OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Tooltip: Improve accessibility for context menus (#12462) 

* Update `ContextMenuTooltipButton.tsx`

* Fix placement

* Update tests

* Update space panel snapshot

* Remove default placement

* Update snapshots

* Fix tooltip child rerender

* Remove useless props title
pull/28217/head
Florian Duros 2024-05-15 16:25:30 +02:00 committed by GitHub
parent 580bc8771c
commit bec8fdb3d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/accessibility/context_menu/ContextMenuTooltipButton.tsx
View File

@ -18,9 +18,9 @@ limitations under the License.
import React, { ComponentProps, forwardRef, Ref } from "react"; import React, { ComponentProps, forwardRef, Ref } from "react";
import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton"; import AccessibleButton from "../../components/views/elements/AccessibleButton";
type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleTooltipButton<T>> & { type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleButton<T>> & {
// whether the context menu is currently open // whether the context menu is currently open
isExpanded: boolean; isExpanded: boolean;
}; };
@ -31,17 +31,17 @@ export const ContextMenuTooltipButton = forwardRef(function <T extends keyof JSX
ref: Ref<HTMLElement>, ref: Ref<HTMLElement>,
) { ) {
return ( return (
<AccessibleTooltipButton <AccessibleButton
{...props} {...props}
element={element as keyof JSX.IntrinsicElements} element={element as keyof JSX.IntrinsicElements}
onClick={onClick} onClick={onClick}
onContextMenu={onContextMenu ?? onClick ?? undefined} onContextMenu={onContextMenu ?? onClick ?? undefined}
aria-haspopup={true} aria-haspopup={true}
aria-expanded={isExpanded} aria-expanded={isExpanded}
forceHide={isExpanded} disableTooltip={isExpanded}
ref={ref} ref={ref}
> >
{children} {children}
</AccessibleTooltipButton> </AccessibleButton>
); );
}); });

7
src/components/views/elements/AccessibleButton.tsx
View File

@ -106,6 +106,11 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
* Callback for when the tooltip is opened or closed. * Callback for when the tooltip is opened or closed.
*/ */
onTooltipOpenChange?: TooltipProps["onOpenChange"]; onTooltipOpenChange?: TooltipProps["onOpenChange"];
/**
* Whether the tooltip should be disabled.
*/
disableTooltip?: TooltipProps["disabled"];
}; };
/** /**
@ -140,6 +145,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
caption, caption,
placement = "right", placement = "right",
onTooltipOpenChange, onTooltipOpenChange,
disableTooltip,
...restProps ...restProps
}: Props<T>, }: Props<T>,
ref: Ref<HTMLElement>, ref: Ref<HTMLElement>,
@ -217,6 +223,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
isTriggerInteractive={true} isTriggerInteractive={true}
placement={placement} placement={placement}
onOpenChange={onTooltipOpenChange} onOpenChange={onTooltipOpenChange}
disabled={disableTooltip}
> >
{button} {button}
</Tooltip> </Tooltip>

4
test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View File

@ -229,8 +229,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
class="mx_ThreadsActivityCentre_container" class="mx_ThreadsActivityCentre_container"
> >
<button <button
aria-controls="floating-ui-35" aria-controls="floating-ui-39"
aria-describedby="floating-ui-35" aria-describedby="floating-ui-39"
aria-expanded="true" aria-expanded="true"
aria-haspopup="dialog" aria-haspopup="dialog"
aria-label="Threads" aria-label="Threads"