Prepare for switching AccessibleButton and derivatives to forwardRef (#12072)

* Improve AccessibleButton props & docs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve AccessibleTooltipButton props docs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Simplify roving tab index hook usage

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Ditch RefObject type casts

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Convert AccessibleTooltipButton to a Functional Component

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-12-20 10:58:24 +00:00 committed by GitHub
parent 2212fbadd0
commit bf61d93bf4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 140 additions and 103 deletions

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { PropsWithChildren, useRef } from "react";
import React, { PropsWithChildren } from "react";
import { User } from "matrix-js-sdk/src/matrix";
import ReadReceiptMarker, { IReadReceiptInfo } from "./ReadReceiptMarker";
@ -284,8 +284,7 @@ interface ISectionHeaderProps {
}
function SectionHeader({ className, children }: PropsWithChildren<ISectionHeaderProps>): JSX.Element {
const ref = useRef<HTMLHeadingElement>(null);
const [onFocus] = useRovingTabIndex(ref);
const [onFocus, , ref] = useRovingTabIndex<HTMLHeadingElement>();
return (
<h3 className={className} role="menuitem" onFocus={onFocus} tabIndex={-1} ref={ref}>