Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Menu focus after closing #147

Merged
merged 1 commit into from
Feb 7, 2024
Merged

Conversation

florianduros
Copy link
Member

@florianduros florianduros commented Feb 6, 2024

In matrix-org/matrix-react-sdk#12136 , we are building the TAC (Threads Activity Centre) with the Menu component. We have the current issue: when the TAC is closing, the button is the Spaces has his tooltip displayed again. (You can see the tooltip Fils de discussion at the bottom left)

Enregistrement.de.l.ecran.2024-02-06.a.17.26.39.mov

Because the focus is set on the Menu trigger when the Menu is closing. According to the https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content onCloseAutoFocus property:

Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.

Adding event.preventDefault() stops the Menu trigger to have the focus after the Menu closing

@florianduros florianduros marked this pull request as ready for review February 6, 2024 16:29
@florianduros florianduros requested a review from a team as a code owner February 6, 2024 16:29
@florianduros florianduros requested review from dbkr and robintown and removed request for a team February 6, 2024 16:29
@florianduros florianduros merged commit 20c6f91 into main Feb 7, 2024
6 checks passed
@florianduros florianduros deleted the florianduros/fix-menu-focus branch February 7, 2024 14:37
@t3chguy
Copy link
Member

t3chguy commented Feb 15, 2024

This change seems to go against the WAI ARIA guidelines which say

Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened.

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

@robintown
Copy link
Member

Agreed, I think the correct solution would instead be to apply a fix like this: matrix-org/matrix-react-sdk#8546

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants