OPHJOD-952: Update Accordion to work better with screenreader

Opetushallitus · Oct 30, 2024 · 4f5045a · 4f5045a
1 parent 9f38f05
commit 4f5045a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 32 deletions.
diff --git a/lib/components/Accordion/Accordion.stories.tsx b/lib/components/Accordion/Accordion.stories.tsx
@@ -42,8 +42,6 @@ export const Default: Story = {
     title: 'Title',
     children: 'Content',
     lang: 'en',
-    expandMoreText: 'Show more',
-    expandLessText: 'Show less',
   },
 };
 
@@ -59,10 +57,9 @@ export const TitleComponent: Story = {
   },
   args: {
     title: <div className="ds-text-heading-1 ds-font-arial ds-text-alert ds-italic ds-tracking-widest">Title</div>,
+    titleText: 'Title',
     children: 'Content',
     lang: 'en',
-    expandMoreText: 'Show more',
-    expandLessText: 'Show less',
   },
 };
 
@@ -81,7 +78,5 @@ export const WithUnderline: Story = {
     children: 'Content',
     underline: true,
     lang: 'en',
-    expandMoreText: 'Show more',
-    expandLessText: 'Show less',
   },
 };
diff --git a/lib/components/Accordion/Accordion.test.tsx b/lib/components/Accordion/Accordion.test.tsx
@@ -6,19 +6,17 @@ import { Accordion } from './Accordion';
 
 describe('Accordion', () => {
   const title = 'Accordion Title';
-  const expandLessText = 'Expand Less';
-  const expandMoreText = 'Expand More';
   const lang = 'en';
 
   test('renders accordion with open state by default', () => {
     const { container } = render(
-      <Accordion title={title} expandLessText={expandLessText} expandMoreText={expandMoreText} lang={lang}>
+      <Accordion title={title} lang={lang}>
         <div>Default content</div>
       </Accordion>,
     );
 
     const accordionTitle = screen.getByText(title);
-    const expandButton = screen.getByLabelText(expandLessText);
+    const expandButton = screen.getByRole('button');
     const accordionContent = screen.queryByText('Default content');
 
     expect(accordionTitle).toBeInTheDocument();
@@ -29,12 +27,12 @@ describe('Accordion', () => {
 
   test('closes accordion when expand button is clicked', () => {
     render(
-      <Accordion title={title} expandLessText={expandLessText} expandMoreText={expandMoreText} lang={lang}>
+      <Accordion title={title} lang={lang}>
         <div>Content to be gone</div>
       </Accordion>,
     );
 
-    const expandButton = screen.getByLabelText(expandLessText);
+    const expandButton = screen.getByRole('button');
     fireEvent.click(expandButton);
 
     const accordionContent = screen.queryByText('Content to be gone');

diff --git a/lib/components/Accordion/Accordion.tsx b/lib/components/Accordion/Accordion.tsx
@@ -2,31 +2,31 @@ import React from 'react';
 import { MdExpandLess, MdExpandMore } from 'react-icons/md';
 import { cx } from '../../cva';
 
-interface AccordionProps {
+type TitleProps =
+  | {
+      title: React.ReactNode;
+      titleText: string;
+    }
+  | {
+      title: string;
+      titleText?: never;
+    };
+
+type AccordionProps = {
   title: React.ReactNode | string;
   children: React.ReactNode;
-  expandLessText: string;
-  expandMoreText: string;
   lang: string;
   underline?: boolean;
   intialState?: boolean;
-}
+} & TitleProps;
 
 const Caret = ({ isOpen }: { isOpen: boolean }) => (
   <span className="ds-text-black group-hover:!ds-text-accent" aria-hidden>
     {isOpen ? <MdExpandLess size={24} /> : <MdExpandMore size={24} />}
   </span>
 );
 
-export const Accordion = ({
-  title,
-  children,
-  expandLessText,
-  expandMoreText,
-  lang,
-  underline,
-  intialState = true,
-}: AccordionProps) => {
+export const Accordion = ({ title, titleText, children, lang, underline, intialState = true }: AccordionProps) => {
   const [isOpen, setIsOpen] = React.useState(intialState);
   const toggleOpen = () => setIsOpen(!isOpen);
   const isTitleValidElement = React.isValidElement(title);
@@ -47,17 +47,13 @@ export const Accordion = ({
       {isTitleValidElement ? (
         <div className={wrapperClassnames}>
           {title}
-          <button aria-label={isOpen ? expandLessText : expandMoreText} onClick={toggleOpen} className="ds-flex">
+          <button aria-label={titleText} aria-expanded={isOpen} onClick={toggleOpen} className="ds-flex">
             <Caret isOpen={isOpen} />
           </button>
         </div>
       ) : (
         <div className="ds-group">
-          <button
-            aria-label={isOpen ? expandLessText : expandMoreText}
-            onClick={toggleOpen}
-            className={wrapperClassnames}
-          >
+          <button aria-expanded={isOpen} onClick={toggleOpen} className={wrapperClassnames}>
             <span
               className="ds-mr-5 ds-w-full ds-text-left ds-hyphens-auto ds-text-heading-3 group-hover:ds-underline"
               lang={lang}

diff --git a/lib/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/lib/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Accordion > renders accordion with open state by default 1`] = `
   class="ds-group"
 >
   <button
-    aria-label="Expand Less"
+    aria-expanded="true"
     class="ds-flex ds-w-full ds-items-center ds-justify-between ds-gap-x-4 ds-mb-2 group-hover:!ds-text-accent"
   >
     <span