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>

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>
     );
-};
+});

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>
     );
-};
+});

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}
         />
     );

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}
         />
     );

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();

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 = {

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")}

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();

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}

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;
 

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}

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 && (

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 && (

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"

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"

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;

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;

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" />

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`}

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}
                 />
             );

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>

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";

src/components/views/messages/MessageActionBar.tsx

@@ -126,7 +126,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
                 onClick={onOptionsClick}
                 onContextMenu={onOptionsClick}
                 isExpanded={menuDisplayed}
-                inputRef={button}
+                ref={button}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
             >
@@ -183,7 +183,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
                 onClick={onClick}
                 onContextMenu={onClick}
                 isExpanded={menuDisplayed}
-                inputRef={button}
+                ref={button}
                 onFocus={onFocus}
                 tabIndex={isActive ? 0 : -1}
             >

src/components/views/messages/ReactionsRow.tsx

@@ -61,7 +61,7 @@ const ReactButton: React.FC<IProps> = ({ mxEvent, reactions }) => {
                     openMenu();
                 }}
                 isExpanded={menuDisplayed}
-                inputRef={button}
+                ref={button}
             />
 
             {contextMenu}

src/components/views/right_panel/WidgetCard.tsx

@@ -78,7 +78,7 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
             </Heading>
             <ContextMenuButton
                 className="mx_BaseCard_header_title_button--option"
-                inputRef={handle}
+                ref={handle}
                 onClick={openMenu}
                 isExpanded={menuDisplayed}
                 label={_t("common|options")}

src/components/views/rooms/CollapsibleButton.tsx

@@ -17,30 +17,38 @@ limitations under the License.
 import React, { ComponentProps, useContext } from "react";
 import classNames from "classnames";
 
+import AccessibleButton from "../elements/AccessibleButton";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import { MenuItem } from "../../structures/ContextMenu";
 import { OverflowMenuContext } from "./MessageComposerButtons";
 import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu";
+import { Ref } from "../../../accessibility/roving/types";
 
-interface ICollapsibleButtonProps extends ComponentProps<typeof MenuItem> {
+interface Props extends Omit<ComponentProps<typeof AccessibleButton>, "element"> {
+    inputRef?: Ref;
     title: string;
     iconClassName: string;
 }
 
-export const CollapsibleButton: React.FC<ICollapsibleButtonProps> = ({
+export const CollapsibleButton: React.FC<Props> = ({
     title,
     children,
     className,
     iconClassName,
+    inputRef,
     ...props
 }) => {
     const inOverflowMenu = !!useContext(OverflowMenuContext);
     if (inOverflowMenu) {
-        return <IconizedContextMenuOption {...props} iconClassName={iconClassName} label={title} />;
+        return <IconizedContextMenuOption {...props} iconClassName={iconClassName} label={title} inputRef={inputRef} />;
     }
 
     return (
-        <AccessibleTooltipButton {...props} title={title} className={classNames(className, iconClassName)}>
+        <AccessibleTooltipButton
+            {...props}
+            title={title}
+            className={classNames(className, iconClassName)}
+            ref={inputRef}
+        >
             {children}
         </AccessibleTooltipButton>
     );

src/components/views/rooms/LegacyRoomHeader.tsx

@@ -234,7 +234,7 @@ const VideoCallButton: FC<VideoCallButtonProps> = ({ room, busy, setBusy, behavi
     return (
         <>
             <AccessibleTooltipButton
-                inputRef={buttonRef}
+                ref={buttonRef}
                 className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_videoCallButton"
                 onClick={onClick}
                 title={_t("voip|video_call")}
@@ -439,7 +439,7 @@ const CallLayoutSelector: FC<CallLayoutSelectorProps> = ({ call }) => {
     return (
         <>
             <AccessibleTooltipButton
-                inputRef={buttonRef}
+                ref={buttonRef}
                 className={classNames("mx_LegacyRoomHeader_button", {
                     "mx_LegacyRoomHeader_layoutButton--freedom": layout === Layout.Tile,
                     "mx_LegacyRoomHeader_layoutButton--spotlight": layout === Layout.Spotlight,

src/components/views/rooms/ReadReceiptGroup.tsx

@@ -188,7 +188,7 @@ export function ReadReceiptGroup({
             <div className="mx_ReadReceiptGroup" role="group" aria-label={_t("timeline|read_receipts_label")}>
                 <AccessibleButton
                     className="mx_ReadReceiptGroup_button"
-                    inputRef={button}
+                    ref={button}
                     aria-label={tooltipText}
                     aria-haspopup="true"
                     onClick={openMenu}

src/components/views/rooms/RoomBreadcrumbs.tsx

@@ -54,7 +54,7 @@ const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => v
             title={room.name}
             tooltipClassName="mx_RoomBreadcrumbs_Tooltip"
             onFocus={onFocus}
-            inputRef={ref}
+            ref={ref}
             tabIndex={isActive ? 0 : -1}
         >
             <DecoratedRoomAvatar

src/components/views/rooms/RoomList.tsx

@@ -173,7 +173,7 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
                     aria-label={_t("action|add_people")}
                     title={_t("action|add_people")}
                     isExpanded={menuDisplayed}
-                    inputRef={handle}
+                    ref={handle}
                 />
 
                 {contextMenu}
@@ -356,7 +356,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
                     aria-label={_t("room_list|add_room_label")}
                     title={_t("room_list|add_room_label")}
                     isExpanded={menuDisplayed}
-                    inputRef={handle}
+                    ref={handle}
                 />
 
                 {contextMenu}

src/components/views/rooms/RoomListHeader.tsx

@@ -389,7 +389,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
     let contextMenuButton: JSX.Element = <div className="mx_RoomListHeader_contextLessTitle">{title}</div>;
     if (canShowMainMenu) {
         const commonProps = {
-            inputRef: mainMenuHandle,
+            ref: mainMenuHandle,
             onClick: openMainMenu,
             isExpanded: mainMenuDisplayed,
             className: "mx_RoomListHeader_contextMenuButton",
@@ -418,7 +418,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
             ) : null}
             {canShowPlusMenu && (
                 <ContextMenuTooltipButton
-                    inputRef={plusMenuHandle}
+                    ref={plusMenuHandle}
                     onClick={openPlusMenu}
                     isExpanded={plusMenuDisplayed}
                     className="mx_RoomListHeader_plusButton"

src/components/views/rooms/RoomSublist.tsx

@@ -709,7 +709,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
                                 <div className="mx_RoomSublist_stickable">
                                     <Button
                                         onFocus={onFocus}
-                                        inputRef={ref}
+                                        ref={ref}
                                         tabIndex={tabIndex}
                                         className="mx_RoomSublist_headerText"
                                         aria-expanded={this.state.isExpanded}

src/components/views/rooms/RoomTile.tsx

@@ -478,7 +478,7 @@ export class RoomTile extends React.PureComponent<ClassProps, State> {
                             {...props}
                             onFocus={onFocus}
                             tabIndex={isActive ? 0 : -1}
-                            inputRef={ref}
+                            ref={ref}
                             className={classes}
                             onClick={this.onTileClick}
                             onContextMenu={this.onContextMenu}

src/components/views/spaces/QuickSettingsButton.tsx

@@ -134,7 +134,7 @@ const QuickSettingsButton: React.FC<{
                 className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
                 onClick={openMenu}
                 title={_t("quick_settings|title")}
-                inputRef={handle}
+                ref={handle}
                 forceHide={!isPanelCollapsed}
                 aria-expanded={!isPanelCollapsed}
             >

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -154,7 +154,7 @@ export const SpaceButton = <T extends keyof JSX.IntrinsicElements>({
             onClick={onClick}
             onContextMenu={openMenu}
             forceHide={!isNarrow || menuDisplayed}
-            inputRef={handle}
+            ref={handle}
             tabIndex={tabIndex}
             onFocus={onFocus}
         >

src/components/views/voip/CallView.tsx

@@ -101,7 +101,7 @@ const DeviceButton: FC<DeviceButtonProps> = ({
         >
             <AccessibleTooltipButton
                 className={`mx_CallView_deviceButton mx_CallView_deviceButton_${kind}`}
-                inputRef={buttonRef}
+                ref={buttonRef}
                 title={muted ? mutedTitle : unmutedTitle}
                 alignment={Alignment.Top}
                 onClick={toggle}

src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx

@@ -92,7 +92,7 @@ const LegacyCallViewDropdownButton: React.FC<IDropdownButtonProps> = ({ state, d
 
     return (
         <LegacyCallViewToggleButton
-            inputRef={buttonRef}
+            ref={buttonRef}
             forceHide={menuDisplayed || hoveringDropdown}
             state={state}
             {...props}
@@ -265,7 +265,7 @@ export default class LegacyCallViewButtons extends React.Component<IProps, IStat
                 {this.props.buttonsVisibility.dialpad && (
                     <ContextMenuTooltipButton
                         className="mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_dialpad"
-                        inputRef={this.dialpadButton}
+                        ref={this.dialpadButton}
                         onClick={this.onDialpadClick}
                         isExpanded={this.state.showDialpad}
                         title={_t("voip|dialpad")}
@@ -312,7 +312,7 @@ export default class LegacyCallViewButtons extends React.Component<IProps, IStat
                     <ContextMenuTooltipButton
                         className="mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button_more"
                         onClick={this.onMoreClick}
-                        inputRef={this.contextMenuButton}
+                        ref={this.contextMenuButton}
                         isExpanded={this.state.showMoreMenu}
                         title={_t("voip|more_button")}
                         alignment={Alignment.Top}