From 73eb6b1f4206c84b38e17d5b650a9642ae6eef83 Mon Sep 17 00:00:00 2001 From: Vegard Haugstvedt Date: Fri, 22 Sep 2023 13:31:53 +0200 Subject: [PATCH] Bugfix/dropdown voice over bug (#2303) * 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. --- .changeset/slimy-rocks-talk.md | 5 +++++ @navikt/core/react/src/popover/Popover.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/slimy-rocks-talk.md diff --git a/.changeset/slimy-rocks-talk.md b/.changeset/slimy-rocks-talk.md new file mode 100644 index 0000000000..12d8591216 --- /dev/null +++ b/.changeset/slimy-rocks-talk.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Remove tabIndex="-1" on Popover to fix VoiceOver navigation issue inside Popover diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/src/popover/Popover.tsx index 764209c2c7..70a8fc9325 100644 --- a/@navikt/core/react/src/popover/Popover.tsx +++ b/@navikt/core/react/src/popover/Popover.tsx @@ -210,7 +210,6 @@ export const Popover = forwardRef( })} data-placement={flPlacement} aria-hidden={!open || !anchorEl} - tabIndex={-1} {...getFloatingProps({ ref: floatingRef, style: { @@ -218,6 +217,7 @@ export const Popover = forwardRef( top: y ?? 0, left: x ?? 0, }, + tabIndex: undefined, })} {...rest} >