Skip to content

Commit

Permalink
Bugfix/dropdown voice over bug (#2303)
Browse files Browse the repository at this point in the history
* Remove tabIndex="-1" for Popover component, to fix VoiceOver bug where navigation inside the Popover doesn't work.

This affects Datepicker, Dropdown, Timeline and the Popover components, but appears to cause no bugs.

Ref: https://nav-it.slack.com/archives/C7NE7A8UF/p1694158816166729

* Add changeset

* Might not be the best way, but it works. getFloatingProps added it's own tabIndex="-1", which we need to get rid of.

* Seems like getFloatingProps can take "tabIndex: undefined" as an option, reducing the amount of code we need to change.
  • Loading branch information
it-vegard authored Sep 22, 2023
1 parent 5a20e34 commit 73eb6b1
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/slimy-rocks-talk.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@navikt/ds-react": patch
---

Remove tabIndex="-1" on Popover to fix VoiceOver navigation issue inside Popover
2 changes: 1 addition & 1 deletion @navikt/core/react/src/popover/Popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -210,14 +210,14 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
})}
data-placement={flPlacement}
aria-hidden={!open || !anchorEl}
tabIndex={-1}
{...getFloatingProps({
ref: floatingRef,
style: {
position: strategy,
top: y ?? 0,
left: x ?? 0,
},
tabIndex: undefined,
})}
{...rest}
>
Expand Down

0 comments on commit 73eb6b1

Please sign in to comment.