Switch AccessibleButton and derivatives to using forwardRef (#12054)

* Prevent Cypress typechecking react-sdk components without strict mode This prevented us from switching to `forwardRef` in a bunch of places due to it behaving different with & without strict mode. Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update global.d.ts * Switch AccessibleButton and derivatives to using `forwardRef` Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add missing ref={ref} Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Ensure RefObjects are used consistently Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Re-add WysiwygAutocomplete displayname Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix forwardRef types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add comments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused export Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Readd comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate types & comments Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Apply suggestions from code review Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Add comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve comment Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
matrix-org · Dec 21, 2023 · f632e21 · f632e21
1 parent 0a881e2
commit f632e21
Show file tree

Hide file tree

Showing 37 changed files with 102 additions and 95 deletions.
diff --git a/src/accessibility/context_menu/ContextMenuButton.tsx b/src/accessibility/context_menu/ContextMenuButton.tsx
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, forwardRef, Ref } from "react";
 
 import AccessibleButton from "../../components/views/elements/AccessibleButton";
 
@@ -27,14 +27,10 @@ type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof Access
 };
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuButton = <T extends keyof JSX.IntrinsicElements>({
-    label,
-    isExpanded,
-    children,
-    onClick,
-    onContextMenu,
-    ...props
-}: Props<T>): JSX.Element => {
+export const ContextMenuButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
+    { label, isExpanded, children, onClick, onContextMenu, ...props }: Props<T>,
+    ref: Ref<HTMLElement>,
+) {
     return (
         <AccessibleButton
             {...props}
@@ -44,8 +40,9 @@ export const ContextMenuButton = <T extends keyof JSX.IntrinsicElements>({
             aria-label={label}
             aria-haspopup={true}
             aria-expanded={isExpanded}
+            ref={ref}
         >
             {children}
         </AccessibleButton>
     );
-};
+});
diff --git a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, forwardRef, Ref } from "react";
 
 import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
 
@@ -26,13 +26,10 @@ type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof Access
 };
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuTooltipButton = <T extends keyof JSX.IntrinsicElements>({
-    isExpanded,
-    children,
-    onClick,
-    onContextMenu,
-    ...props
-}: Props<T>): JSX.Element => {
+export const ContextMenuTooltipButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
+    { isExpanded, children, onClick, onContextMenu, ...props }: Props<T>,
+    ref: Ref<HTMLElement>,
+) {
     return (
         <AccessibleTooltipButton
             {...props}
@@ -41,8 +38,9 @@ export const ContextMenuTooltipButton = <T extends keyof JSX.IntrinsicElements>(
             aria-haspopup={true}
             aria-expanded={isExpanded}
             forceHide={isExpanded}
+            ref={ref}
         >
             {children}
         </AccessibleTooltipButton>
     );
-};
+});
diff --git a/src/accessibility/roving/RovingAccessibleButton.tsx b/src/accessibility/roving/RovingAccessibleButton.tsx
@@ -48,7 +48,7 @@ export const RovingAccessibleButton = <T extends keyof JSX.IntrinsicElements>({
                 if (focusOnMouseOver) onFocusInternal();
                 onMouseOver?.(event);
             }}
-            inputRef={ref}
+            ref={ref}
             tabIndex={isActive ? 0 : -1}
         />
     );

diff --git a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
@@ -41,7 +41,7 @@ export const RovingAccessibleTooltipButton = <T extends keyof JSX.IntrinsicEleme
                 onFocusInternal();
                 onFocus?.(event);
             }}
-            inputRef={ref}
+            ref={ref}
             tabIndex={isActive ? 0 : -1}
         />
     );

diff --git a/src/components/structures/GenericDropdownMenu.tsx b/src/components/structures/GenericDropdownMenu.tsx
@@ -195,7 +195,7 @@ export function GenericDropdownMenu<T>({
         <>
             <ContextMenuButton
                 className="mx_GenericDropdownMenu_button"
-                inputRef={button}
+                ref={button}
                 isExpanded={menuDisplayed}
                 onClick={(ev: ButtonEvent) => {
                     openMenu();

diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React, {
+    ComponentProps,
     Dispatch,
     KeyboardEvent,
     KeyboardEventHandler,
@@ -349,7 +350,7 @@ const Tile: React.FC<ITileProps> = ({
                 })}
                 onClick={hasPermissions && onToggleClick ? onToggleClick : onPreviewClick}
                 onKeyDown={onKeyDown}
-                inputRef={ref}
+                ref={ref}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
             >
@@ -664,7 +665,7 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
     const disabled = !selectedRelations.length || removing || saving;
 
     let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
-    let props = {};
+    let props: Partial<ComponentProps<typeof AccessibleTooltipButton>> = {};
     if (!selectedRelations.length) {
         Button = AccessibleTooltipButton;
         props = {

diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx
@@ -196,7 +196,7 @@ const SpaceLandingAddButton: React.FC<{ space: Room }> = ({ space }) => {
         <>
             <ContextMenuButton
                 kind="primary"
-                inputRef={handle}
+                ref={handle}
                 onClick={openMenu}
                 isExpanded={menuDisplayed}
                 label={_t("action|add")}

diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx
@@ -118,7 +118,7 @@ export const ThreadPanelHeader: React.FC<{
                 <>
                     <ContextMenuButton
                         className="mx_ThreadPanel_dropdown"
-                        inputRef={button}
+                        ref={button}
                         isExpanded={menuDisplayed}
                         onClick={(ev: ButtonEvent) => {
                             openMenu();

diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
@@ -453,7 +453,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 <ContextMenuButton
                     className="mx_UserMenu_contextMenuButton"
                     onClick={this.onOpenMenuClick}
-                    inputRef={this.buttonRef}
+                    ref={this.buttonRef}
                     label={_t("a11y|user_menu")}
                     isExpanded={!!this.state.contextMenuPosition}
                     onContextMenu={this.onContextMenu}

diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx
@@ -21,7 +21,10 @@ import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import { Playback, PlaybackState } from "../../../audio/Playback";
 
-type Props = Omit<ComponentProps<typeof AccessibleTooltipButton>, "title" | "onClick" | "disabled" | "element"> & {
+type Props = Omit<
+    ComponentProps<typeof AccessibleTooltipButton>,
+    "title" | "onClick" | "disabled" | "element" | "ref"
+> & {
     // Playback instance to manipulate. Cannot change during the component lifecycle.
     playback: Playback;
 

diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -974,7 +974,7 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
         }
         return (
             <div>
-                <AccessibleButton kind="link" inputRef={this.fallbackButton} onClick={this.onShowFallbackClick}>
+                <AccessibleButton kind="link" ref={this.fallbackButton} onClick={this.onShowFallbackClick}>
                     {_t("auth|uia|fallback_button")}
                 </AccessibleButton>
                 {errorSection}

diff --git a/src/components/views/context_menus/KebabContextMenu.tsx b/src/components/views/context_menus/KebabContextMenu.tsx
@@ -39,7 +39,7 @@ export const KebabContextMenu: React.FC<KebabContextMenuProps> = ({ options, tit
 
     return (
         <>
-            <ContextMenuButton {...props} onClick={openMenu} title={title} isExpanded={menuDisplayed} inputRef={button}>
+            <ContextMenuButton {...props} onClick={openMenu} title={title} isExpanded={menuDisplayed} ref={button}>
                 <ContextMenuIcon className="mx_KebabContextMenu_icon" />
             </ContextMenuButton>
             {menuDisplayed && (

diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx
@@ -94,7 +94,7 @@ const ThreadListContextMenu: React.FC<ThreadListContextMenuProps> = ({
                 onClick={openMenu}
                 title={_t("right_panel|thread_list|context_menu_label")}
                 isExpanded={menuDisplayed}
-                inputRef={button}
+                ref={button}
                 data-testid="threadlist-dropdown-button"
             />
             {menuDisplayed && (

diff --git a/src/components/views/dialogs/spotlight/Option.tsx b/src/components/views/dialogs/spotlight/Option.tsx
@@ -35,7 +35,7 @@ export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment
             {...props}
             className={classNames(className, "mx_SpotlightDialog_option")}
             onFocus={onFocus}
-            inputRef={ref}
+            ref={ref}
             tabIndex={-1}
             aria-selected={isActive}
             role="option"

diff --git a/src/components/views/dialogs/spotlight/TooltipOption.tsx b/src/components/views/dialogs/spotlight/TooltipOption.tsx
@@ -32,7 +32,7 @@ export const TooltipOption: React.FC<TooltipOptionProps> = ({ inputRef, classNam
             {...props}
             className={classNames(className, "mx_SpotlightDialog_option")}
             onFocus={onFocus}
-            inputRef={ref}
+            ref={ref}
             tabIndex={-1}
             aria-selected={isActive}
             role="option"

diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import React, { HTMLAttributes, InputHTMLAttributes } from "react";
+import React, { forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
 import classnames from "classnames";
 
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
@@ -66,7 +66,6 @@ type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<
  * Extends props accepted by the underlying element specified using the `element` prop.
  */
 type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> & {
-    inputRef?: React.Ref<Element>;
     /**
      * The base element type. "div" by default.
      */
@@ -101,22 +100,26 @@ interface RenderedElementProps extends React.InputHTMLAttributes<Element> {
  * as a button.  Identifies the element as a button, setting proper tab
  * indexing and keyboard activation behavior.
  *
+ * If a ref is passed, it will be forwarded to the rendered element as specified using the `element` prop.
+ *
  * @param {Object} props  react element properties
  * @returns {Object} rendered react
  */
-export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>({
-    element = "div" as T,
-    onClick,
-    children,
-    kind,
-    disabled,
-    inputRef,
-    className,
-    onKeyDown,
-    onKeyUp,
-    triggerOnMouseDown,
-    ...restProps
-}: Props<T>): JSX.Element {
+const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
+    {
+        element = "div" as T,
+        onClick,
+        children,
+        kind,
+        disabled,
+        className,
+        onKeyDown,
+        onKeyUp,
+        triggerOnMouseDown,
+        ...restProps
+    }: Props<T>,
+    ref: Ref<HTMLElement>,
+): JSX.Element {
     const newProps: RenderedElementProps = restProps;
     if (disabled) {
         newProps["aria-disabled"] = true;
@@ -170,7 +173,7 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
     }
 
     // Pass through the ref - used for keyboard shortcut access to some buttons
-    newProps.ref = inputRef;
+    newProps.ref = ref;
 
     newProps.className = classnames("mx_AccessibleButton", className, {
         mx_AccessibleButton_hasKind: kind,
@@ -180,11 +183,13 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
 
     // React.createElement expects InputHTMLAttributes
     return React.createElement(element, newProps, children);
-}
+});
 
-AccessibleButton.defaultProps = {
+// Type assertion required due to forwardRef type workaround in react.d.ts
+(AccessibleButton as FunctionComponent).defaultProps = {
     role: "button",
     tabIndex: 0,
 };
+(AccessibleButton as FunctionComponent).displayName = "AccessibleButton";
 
-AccessibleButton.displayName = "AccessibleButton";
+export default AccessibleButton;
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { SyntheticEvent, FocusEvent, useEffect, useState } from "react";
+import React, { SyntheticEvent, FocusEvent, forwardRef, useEffect, Ref, useState, ComponentProps } from "react";
 
 import AccessibleButton from "./AccessibleButton";
 import Tooltip, { Alignment } from "./Tooltip";
@@ -25,7 +25,7 @@ import Tooltip, { Alignment } from "./Tooltip";
  *
  * Extends that of {@link AccessibleButton}.
  */
-type Props<T extends keyof JSX.IntrinsicElements> = React.ComponentProps<typeof AccessibleButton<T>> & {
+type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleButton<T>> & {
     /**
      * Title to show in the tooltip and use as aria-label
      */
@@ -60,16 +60,10 @@ type Props<T extends keyof JSX.IntrinsicElements> = React.ComponentProps<typeof
     onHideTooltip?(ev: SyntheticEvent): void;
 };
 
-function AccessibleTooltipButton<T extends keyof JSX.IntrinsicElements>({
-    title,
-    tooltip,
-    children,
-    forceHide,
-    alignment,
-    onHideTooltip,
-    tooltipClassName,
-    ...props
-}: Props<T>): JSX.Element {
+const AccessibleTooltipButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
+    { title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props<T>,
+    ref: Ref<HTMLElement>,
+) {
     const [hover, setHover] = useState(false);
 
     useEffect(() => {
@@ -108,12 +102,13 @@ function AccessibleTooltipButton<T extends keyof JSX.IntrinsicElements>({
             onFocus={onFocus}
             onBlur={hideTooltip}
             aria-label={title || props["aria-label"]}
+            ref={ref}
         >
             {children}
             {props.label}
             {(tooltip || title) && tip}
         </AccessibleButton>
     );
-}
+});
 
 export default AccessibleTooltipButton;
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
@@ -789,7 +789,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                                         className="mx_AppTileMenuBar_widgets_button"
                                         label={_t("common|options")}
                                         isExpanded={this.state.menuDisplayed}
-                                        inputRef={this.contextMenuButton}
+                                        ref={this.contextMenuButton}
                                         onClick={this.onContextMenuClick}
                                     >
                                         <MenuIcon className="mx_Icon mx_Icon_12" />

diff --git a/src/components/views/elements/Dropdown.tsx b/src/components/views/elements/Dropdown.tsx
@@ -392,7 +392,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
                     aria-haspopup="listbox"
                     aria-expanded={this.state.expanded}
                     disabled={this.props.disabled}
-                    inputRef={this.buttonRef}
+                    ref={this.buttonRef}
                     aria-label={this.props.label}
                     aria-describedby={`${this.props.id}_value`}
                     aria-owns={`${this.props.id}_input`}

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
@@ -506,7 +506,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                     className="mx_ImageView_button mx_ImageView_button_more"
                     title={_t("common|options")}
                     onClick={this.onOpenContextMenu}
-                    inputRef={this.contextMenuButton}
+                    ref={this.contextMenuButton}
                     isExpanded={this.state.contextMenuDisplayed}
                 />
             );

diff --git a/src/components/views/elements/PollCreateDialog.tsx b/src/components/views/elements/PollCreateDialog.tsx
@@ -248,7 +248,7 @@ export default class PollCreateDialog extends ScrollableBaseModal<IProps, IState
                     disabled={this.state.busy || this.state.options.length >= MAX_OPTIONS}
                     kind="secondary"
                     className="mx_PollCreateDialog_addOption"
-                    inputRef={this.addOptionRef}
+                    ref={this.addOptionRef}
                 >
                     {_t("poll|options_add_button")}
                 </AccessibleButton>

diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
@@ -28,7 +28,7 @@ import {
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
-import { AccessibleButtonKind, ButtonEvent } from "../elements/AccessibleButton";
+import type { AccessibleButtonKind, ButtonEvent } from "../elements/AccessibleButton";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary";
 import FacePile from "../elements/FacePile";