fix(controls): Add aria-expanded to sidebar toggle button (#1407)

box · Jul 7, 2021 · 9187577 · 9187577
1 parent 2c53a76
commit 9187577
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/src/lib/viewers/controls/sidebar/ThumbnailsToggle.tsx b/src/lib/viewers/controls/sidebar/ThumbnailsToggle.tsx
@@ -3,16 +3,18 @@ import IconThumbnailsToggle24 from '../icons/IconThumbnailsToggle24';
 import './ThumbnailsToggle.scss';
 
 export type Props = {
+    isThumbnailsOpen?: boolean;
     onThumbnailsToggle?: () => void;
 };
 
-export default function ThumbnailsToggle({ onThumbnailsToggle }: Props): JSX.Element | null {
+export default function ThumbnailsToggle({ onThumbnailsToggle, isThumbnailsOpen }: Props): JSX.Element | null {
     if (!onThumbnailsToggle) {
         return null;
     }
 
     return (
         <button
+            aria-expanded={isThumbnailsOpen}
             className="bp-ThumbnailsToggle"
             onClick={onThumbnailsToggle}
             title={__('toggle_thumbnails')}

diff --git a/src/lib/viewers/controls/sidebar/__tests__/ThumbnailsToggle-test.tsx b/src/lib/viewers/controls/sidebar/__tests__/ThumbnailsToggle-test.tsx
@@ -30,5 +30,15 @@ describe('ThumbnailsToggle', () => {
 
             expect(wrapper.isEmptyRender()).toBe(true);
         });
+
+        test('should have a property aria-expanded setted to false', () => {
+            const wrapper = getWrapper({ onThumbnailsToggle: jest.fn(), isThumbnailsOpen: false });
+            expect(wrapper.prop('aria-expanded')).toBe(false);
+        });
+
+        test('should have a property aria-expanded setted to true', () => {
+            const wrapper = getWrapper({ onThumbnailsToggle: jest.fn(), isThumbnailsOpen: true });
+            expect(wrapper.prop('aria-expanded')).toBe(true);
+        });
     });
 });
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -1082,6 +1082,7 @@ class DocBaseViewer extends BaseViewer {
                 hasDrawing={canAnnotate && showAnnotationsDrawingCreate}
                 hasHighlight={canAnnotate && canDownload}
                 hasRegion={canAnnotate}
+                isThumbnailsOpen={this.thumbnailsSidebar && this.thumbnailsSidebar.isOpen}
                 maxScale={MAX_SCALE}
                 minScale={MIN_SCALE}
                 onAnnotationColorChange={this.handleAnnotationColorChange}

diff --git a/src/lib/viewers/doc/DocControls.tsx b/src/lib/viewers/doc/DocControls.tsx
@@ -25,6 +25,7 @@ export default function DocControls({
     hasDrawing,
     hasHighlight,
     hasRegion,
+    isThumbnailsOpen,
     maxScale,
     minScale,
     onAnnotationColorChange,
@@ -45,7 +46,7 @@ export default function DocControls({
         <ExperiencesProvider experiences={experiences}>
             <ControlsBar>
                 <ControlsBarGroup>
-                    <ThumbnailsToggle onThumbnailsToggle={onThumbnailsToggle} />
+                    <ThumbnailsToggle isThumbnailsOpen={isThumbnailsOpen} onThumbnailsToggle={onThumbnailsToggle} />
                     <FindBarToggle onFindBarToggle={onFindBarToggle} />
                 </ControlsBarGroup>
                 <ControlsBarGroup isDistinct>