diff --git a/.changeset/tall-singers-occur.md b/.changeset/tall-singers-occur.md new file mode 100644 index 00000000000..c7cf667aa0d --- /dev/null +++ b/.changeset/tall-singers-occur.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +Added aria-hidden to AccordionContent when closed, to fix issue where Radio labels were omitted when opening/closing AccordionItems diff --git a/@navikt/core/react/src/accordion/AccordionContent.tsx b/@navikt/core/react/src/accordion/AccordionContent.tsx index dae93ac0cb5..3a7451ca73e 100644 --- a/@navikt/core/react/src/accordion/AccordionContent.tsx +++ b/@navikt/core/react/src/accordion/AccordionContent.tsx @@ -34,6 +34,9 @@ const AccordionContent = forwardRef( }, className )} + aria-hidden={ + !context.open || undefined + } /* Added to fix bug with Radio component, where label text inside a span sometimes is ignored by screen readers after hiding/displaying the RadioGroup inside an Accordion */ > {children} diff --git a/@navikt/core/react/src/form/radio/radio.stories.tsx b/@navikt/core/react/src/form/radio/radio.stories.tsx index 7e172f76519..0b301f68373 100644 --- a/@navikt/core/react/src/form/radio/radio.stories.tsx +++ b/@navikt/core/react/src/form/radio/radio.stories.tsx @@ -1,6 +1,9 @@ import { Meta } from "@storybook/react"; import React, { useState } from "react"; -import { Radio, RadioGroup } from "../../index"; +import { Accordion, Radio, RadioGroup } from "../../index"; +import AccordionItem from "../../accordion/AccordionItem"; +import AccordionHeader from "../../accordion/AccordionHeader"; +import AccordionContent from "../../accordion/AccordionContent"; const meta: Meta = { title: "ds-react/Radio", @@ -114,3 +117,24 @@ export const UUDemo = () => ( ); + +/** + * Added to test bug where Radio labels are sometimes omitted from accessibility tree in Chrome when inside of an Accordion. + * It was not possible to replicate using a Storybook-test. + * + * See https://nav-it.slack.com/archives/C7NE7A8UF/p1695723000232659 + */ +export const TestInsideAccordion = () => ( + + + Åpne for å velge + + + Første valg + Andre valg + Tredje valg + + + + +); diff --git a/yarn.lock b/yarn.lock index f2e148b4623..de305f81cd7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4242,7 +4242,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^5.5.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^5.6.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -4269,8 +4269,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^5.5.0 - "@navikt/ds-tokens": ^5.5.0 + "@navikt/ds-css": ^5.6.0 + "@navikt/ds-tokens": ^5.6.0 "@types/jest": ^29.0.0 concurrently: 7.2.1 copyfiles: 2.4.1 @@ -4288,7 +4288,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 5.5.0 + "@navikt/ds-css": 5.6.0 "@types/inquirer": ^9.0.3 "@types/jest": ^29.0.0 axios: 1.3.6 @@ -4312,11 +4312,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@5.5.0, @navikt/ds-css@^5.5.0, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@5.6.0, @navikt/ds-css@^5.6.0, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^5.5.0 + "@navikt/ds-tokens": ^5.6.0 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -4329,13 +4329,13 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@5.5.0, @navikt/ds-react@^5.5.0, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@5.6.0, @navikt/ds-react@^5.6.0, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.25.4 - "@navikt/aksel-icons": ^5.5.0 - "@navikt/ds-tokens": ^5.5.0 + "@navikt/aksel-icons": ^5.6.0 + "@navikt/ds-tokens": ^5.6.0 "@radix-ui/react-tabs": 1.0.0 "@radix-ui/react-toggle-group": 1.0.0 "@testing-library/dom": 8.13.0 @@ -4369,11 +4369,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^5.5.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^5.6.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^5.5.0 + "@navikt/ds-tokens": ^5.6.0 "@types/jest": ^29.0.0 color: 4.2.3 jest: ^29.0.0 @@ -4384,7 +4384,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^5.5.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^5.6.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -9214,11 +9214,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^5.5.0 - "@navikt/ds-css": ^5.5.0 - "@navikt/ds-react": ^5.5.0 - "@navikt/ds-tailwind": ^5.5.0 - "@navikt/ds-tokens": ^5.5.0 + "@navikt/aksel-icons": ^5.6.0 + "@navikt/ds-css": ^5.6.0 + "@navikt/ds-react": ^5.6.0 + "@navikt/ds-tailwind": ^5.6.0 + "@navikt/ds-tokens": ^5.6.0 prettier-plugin-tailwindcss: ^0.2.3 languageName: unknown linkType: soft @@ -24181,8 +24181,8 @@ __metadata: version: 0.0.0-use.local resolution: "shadow-dom@workspace:examples/shadow-dom" dependencies: - "@navikt/ds-css": 5.5.0 - "@navikt/ds-react": 5.5.0 + "@navikt/ds-css": 5.6.0 + "@navikt/ds-react": 5.6.0 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 "@vitejs/plugin-react": ^3.1.0