Skip to content

fix(react): focus the dialog on open instead of the hidden trigger #546

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.

Sign up for GitHub

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

Closed
DonOmalVindula wants to merge 1 commit into from
Closed

fix(react): focus the dialog on open instead of the hidden trigger #546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dialog-initial-focus.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@asgardeo/react': patch
---

Dialogs (for example the popup mode of `<UserProfile />` opened from the user dropdown) now move focus onto the dialog when they open. Previously focus stayed on the trigger, which the focus manager had just hidden from assistive technology with `aria-hidden`, and browsers reported "Blocked aria-hidden on an element because its descendant retained focus".
10 changes: 9 additions & 1 deletion packages/react/src/components/primitives/Dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,17 @@ export const DialogContent: ForwardRefExoticComponent<HTMLProps<HTMLDivElement>
className={cx(withVendorCSSClassPrefix(bem('dialog', 'overlay')), styles['overlay'])}
lockScroll
>
<FloatingFocusManager context={floatingContext} initialFocus={-1}>
{/*
Move focus onto the dialog itself when it opens. The focus manager marks everything outside the
dialog `aria-hidden`, so leaving focus on the trigger (e.g. the user dropdown in a page header)
hides a focused element from assistive technology, which browsers flag as an accessibility error.
Focusing the container rather than the first field keeps the previous behaviour of not
auto-focusing an input.
*/}
<FloatingFocusManager context={floatingContext} initialFocus={context.refs.floating}>
<div
ref={ref}
tabIndex={-1}
className={cx(withVendorCSSClassPrefix(bem('dialog', 'content')), styles['content'], props.className)}
aria-labelledby={context.labelId}
aria-describedby={context.descriptionId}
Expand Down
Loading