Skip to content

Commit

Permalink
fix: floating-dropdrow: a11y fix for accessibility (#899)
Browse files Browse the repository at this point in the history
  • Loading branch information
rmotwani-c-eightfold authored Oct 28, 2024
1 parent 758e580 commit 34a3a08
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/components/Dropdown/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -287,12 +287,16 @@ export const Dropdown: FC<DropdownProps> = React.memo(
toggle(false)(event);
}
if (event?.key === eventKeys.TAB) {
event.preventDefault();
timeout && clearTimeout(timeout);
timeout = setTimeout(() => {
if (!refs.floating.current.matches(':focus-within')) {
toggle(false)(event);
}
}, NO_ANIMATION_DURATION);
const menuButtonEvent: HTMLButtonElement =
document.activeElement as HTMLButtonElement;
menuButtonEvent.click();
}
if (event?.key === eventKeys.TAB && event.shiftKey) {
timeout && clearTimeout(timeout);
Expand Down Expand Up @@ -423,7 +427,9 @@ export const Dropdown: FC<DropdownProps> = React.memo(
{getReference()}
<ConditionalWrapper
condition={portal}
wrapper={(children) => <FloatingPortal>{children}</FloatingPortal>}
wrapper={(children) => (
<FloatingPortal preserveTabOrder>{children}</FloatingPortal>
)}
>
{getDropdown()}
</ConditionalWrapper>
Expand Down
6 changes: 6 additions & 0 deletions src/components/Menu/MenuItem/menuItem.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
margin: $space-xxs 0;
white-space: nowrap;

&:focus-within {
box-shadow: var(--focus-visible-box-shadow);
color: var(--primary-color);
border-radius: var(--border-radius-xl);
}

&.wrap {
white-space: normal;
overflow-wrap: anywhere;
Expand Down

0 comments on commit 34a3a08

Please sign in to comment.