Merge e5513ff into 18ab01f

.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

@navikt/core/react/src/accordion/AccordionContent.tsx

@@ -34,6 +34,9 @@ const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
           },
           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}
       </BodyLong>

@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<typeof Radio> = {
   title: "ds-react/Radio",
@@ -114,3 +117,24 @@ export const UUDemo = () => (
     </RadioGroup>
   </div>
 );
+
+/**
+ * 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 = () => (
+  <Accordion>
+    <AccordionItem>
+      <AccordionHeader>Åpne for å velge</AccordionHeader>
+      <AccordionContent>
+        <RadioGroup legend="Velg én">
+          <Radio value="1">Første valg</Radio>
+          <Radio value="2">Andre valg</Radio>
+          <Radio value="3">Tredje valg</Radio>
+        </RadioGroup>
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+);

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