Add `aria-expanded` to sidebar show/hide button (#2192)

* Add `aria-expanded` to sidebar show/hide button

* Add axe test to annotator toolbar component
Co-authored-by: Kyle Keating <kkeating@hypothes.is>

src/annotator/components/test/toolbar-test.js

@@ -3,6 +3,8 @@ import { createElement } from 'preact';
 
 import Toolbar from '../toolbar';
 
+import { checkAccessibility } from '../../../test-util/accessibility';
+
 const noop = () => {};
 
 describe('Toolbar', () => {
@@ -43,7 +45,7 @@ describe('Toolbar', () => {
   it('renders the normal controls if `useMinimalControls` is false', () => {
     const wrapper = createToolbar({ useMinimalControls: false });
     assert.isFalse(findButton(wrapper, 'Close annotation sidebar').exists());
-    assert.isTrue(findButton(wrapper, 'Show annotation sidebar').exists());
+    assert.isTrue(findButton(wrapper, 'Annotation sidebar').exists());
     assert.isTrue(findButton(wrapper, 'Show highlights').exists());
     assert.isTrue(findButton(wrapper, 'New page note').exists());
   });
@@ -62,11 +64,11 @@ describe('Toolbar', () => {
     const toggleSidebar = sinon.stub();
     const wrapper = createToolbar({ isSidebarOpen: false, toggleSidebar });
 
-    findButton(wrapper, 'Show annotation sidebar').simulate('click');
+    findButton(wrapper, 'Annotation sidebar').simulate('click');
     assert.calledWith(toggleSidebar);
 
     wrapper.setProps({ isSidebarOpen: true });
-    findButton(wrapper, 'Hide annotation sidebar').simulate('click');
+    findButton(wrapper, 'Annotation sidebar').simulate('click');
     assert.calledWith(toggleSidebar);
   });
 
@@ -81,4 +83,21 @@ describe('Toolbar', () => {
     findButton(wrapper, 'Show highlights').simulate('click');
     assert.calledWith(toggleHighlights);
   });
+
+  it(
+    'should pass a11y checks',
+    checkAccessibility([
+      {
+        content: () => createToolbar(),
+      },
+      {
+        name: 'with minimal controls',
+        content: () =>
+          createToolbar({
+            useMinimalControls: true,
+            isSidebarOpen: false,
+          }),
+      },
+    ])
+  );
 });

src/annotator/components/toolbar.js

@@ -6,6 +6,7 @@ import SvgIcon from '../../shared/components/svg-icon';
 
 function ToolbarButton({
   buttonRef,
+  expanded,
   extraClasses,
   label,
   icon,
@@ -23,6 +24,7 @@ function ToolbarButton({
     <button
       className={classnames('annotator-frame-button', extraClasses)}
       aria-label={label}
+      aria-expanded={expanded}
       aria-pressed={selected}
       onClick={handleClick}
       ref={buttonRef}
@@ -35,6 +37,7 @@ function ToolbarButton({
 
 ToolbarButton.propTypes = {
   buttonRef: propTypes.any,
+  expanded: propTypes.bool,
   extraClasses: propTypes.string,
   label: propTypes.string.isRequired,
   icon: propTypes.string.isRequired,
@@ -71,12 +74,9 @@ export default function Toolbar({
         <ToolbarButton
           extraClasses="annotator-frame-button--sidebar_toggle"
           buttonRef={toggleSidebarRef}
-          label={
-            isSidebarOpen
-              ? 'Hide annotation sidebar'
-              : 'Show annotation sidebar'
-          }
+          label="Annotation sidebar"
           icon={isSidebarOpen ? 'caret-right' : 'caret-left'}
+          expanded={isSidebarOpen}
           onClick={toggleSidebar}
         />
       )}