feat(a11y): apply aria-modal attribute and move header landmark (#48)

Videodock · Jan 31, 2024 · 04d53ab · 04d53ab
1 parent 378276f
commit 04d53ab
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -17,14 +17,16 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
   >
     <div
       class="_modal_6c6c55"
-      role="dialog"
     >
       <div
         class="_backdrop_6c6c55"
         data-testid="backdrop"
       />
       <div
+        aria-modal="true"
         class="_container_6c6c55"
+        data-testid="container"
+        role="dialog"
       >
         <div
           style="transition: transform 0.2s ease, opacity 0.2s ease; transform: translate(0, -15px); opacity: 0; z-index: 15;"

diff --git a/packages/ui-react/src/components/Modal/Modal.test.tsx b/packages/ui-react/src/components/Modal/Modal.test.tsx
@@ -23,15 +23,15 @@ describe('<Modal>', () => {
     expect(onClose).toBeCalledTimes(1);
   });
 
-  test('should add aria-hidden and inert attributes on the root div when open', () => {
+  test('Should add inert attribute on the root div when open', () => {
     const onClose = vi.fn();
     const { getByTestId, rerender } = render(
       <div id="root" data-testid="root">
         <Modal open={true} onClose={onClose} />
       </div>,
     );
 
-    expect(getByTestId('root')).toHaveAttribute('aria-hidden', 'true');
+    expect(getByTestId('container')).toHaveAttribute('aria-modal', 'true');
     expect(getByTestId('root')).toHaveProperty('inert', true);
 
     rerender(
@@ -40,7 +40,6 @@ describe('<Modal>', () => {
       </div>,
     );
 
-    expect(getByTestId('root')).not.toHaveAttribute('aria-hidden', 'true');
     expect(getByTestId('root')).toHaveProperty('inert', false);
   });
 

diff --git a/packages/ui-react/src/components/Modal/Modal.tsx b/packages/ui-react/src/components/Modal/Modal.tsx
@@ -44,7 +44,6 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
       // make sure main content is hidden for screen readers and inert
       if (appView) {
         appView.inert = true;
-        appView.setAttribute('aria-hidden', 'true');
       }
 
       // prevent scrolling under the modal
@@ -60,7 +59,6 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
     } else {
       if (appView) {
         appView.inert = false;
-        appView.removeAttribute('aria-hidden');
       }
 
       document.body.style.removeProperty('margin-right');
@@ -77,9 +75,9 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
 
   return ReactDOM.createPortal(
     <Fade open={open} duration={300} onCloseAnimationEnd={() => setVisible(false)}>
-      <div className={styles.modal} onKeyDown={keyDownEventHandler} ref={modalRef} role={role}>
+      <div className={styles.modal} onKeyDown={keyDownEventHandler} ref={modalRef}>
         <div className={styles.backdrop} onClick={onClose} data-testid={testId('backdrop')} />
-        <div className={styles.container}>
+        <div className={styles.container} data-testid={testId('container')} role={role} aria-modal="true">
           <AnimationComponent open={open} duration={200}>
             {children}
           </AnimationComponent>

diff --git a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx
@@ -41,11 +41,11 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
         <meta property="og:title" content={pageTitle} />
         <meta name="twitter:title" content={pageTitle} />
       </Helmet>
-      <header className={styles.header}>
-        <h1>{data.title}</h1>
-        {shouldShowFilter && <Filter name="genre" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
-      </header>
       <main className={styles.main}>
+        <header className={styles.header}>
+          <h1>{data.title}</h1>
+          {shouldShowFilter && <Filter name="genre" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
+        </header>
         <CardGrid
           getUrl={getUrl}
           playlist={filteredPlaylist}