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>
This commit is contained in:
Michael Telatynski
GitHub
parent
0a881e2123
commit
f632e2124f
37 changed files with 102 additions and 95 deletions
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue