Merge pull request #1785 from hypothesis/excerpt-a11y

Fix a11y for Excerpt

src/sidebar/components/excerpt.js

@@ -12,24 +12,20 @@ import { applyTheme } from '../util/theme';
  * it is expanded or collapsed.
  */
 function InlineControls({ isCollapsed, setCollapsed, linkStyle = {} }) {
-  const toggleTitle = isCollapsed
-    ? 'Show the full excerpt'
-    : 'Show the first few lines only';
   const toggleLabel = isCollapsed ? 'More' : 'Less';
 
   return (
     <div className="excerpt__inline-controls">
       <span className="excerpt__toggle-link">
-        {/* FIXME-A11Y */}
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        <a
-          href="#"
+        <button
+          className="excerpt__toggle-button"
           onClick={() => setCollapsed(!isCollapsed)}
-          title={toggleTitle}
+          aria-label="Toggle to show the full excerpt or first few lines only"
+          aria-pressed={(!isCollapsed).toString()}
           style={linkStyle}
         >
           {toggleLabel}
-        </a>
+        </button>
       </span>
     </div>
   );
@@ -113,9 +109,8 @@ function Excerpt({
       <div className="excerpt__content" ref={contentElement}>
         {children}
       </div>
-      {/* FIXME-A11Y */}
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
       <div
+        role="presentation"
         onClick={() => setCollapsed(false)}
         className={classnames({
           excerpt__shadow: true,

src/sidebar/components/test/excerpt-test.js

@@ -128,11 +128,26 @@ describe('Excerpt', () => {
 
     it('toggles the expanded state when clicked', () => {
       const wrapper = createExcerpt({ inlineControls: true }, TALL_DIV);
-      const control = wrapper.find('.excerpt__inline-controls a');
+      const button = wrapper.find('.excerpt__toggle-button');
       assert.equal(getExcerptHeight(wrapper), 40);
-      control.simulate('click');
+      button.simulate('click');
       assert.equal(getExcerptHeight(wrapper), 200);
     });
+
+    it("sets button's default state to unpressed", () => {
+      const wrapper = createExcerpt({ inlineControls: true }, TALL_DIV);
+      const button = wrapper.find('.excerpt__toggle-button');
+      assert.equal(button.prop('aria-pressed'), 'false');
+      assert.equal(button.text(), 'More');
+    });
+
+    it("changes button's state to pressed when clicked", () => {
+      const wrapper = createExcerpt({ inlineControls: true }, TALL_DIV);
+      wrapper.find('.excerpt__toggle-button').simulate('click');
+      const button = wrapper.find('.excerpt__toggle-button');
+      assert.equal(button.prop('aria-pressed'), 'true');
+      assert.equal(button.text(), 'Less');
+    });
   });
 
   it(

src/styles/sidebar/components/excerpt.scss

+@use "../../mixins/buttons";
 @use "../../variables" as var;
 
 // FIXME - Remove the `@at-root` here when SASS modules are used, as local
@@ -37,6 +38,11 @@
     line-height: var.$normal-line-height;
   }
 
+  .excerpt__toggle-button {
+    @include buttons.reset-native-btn-styles;
+    font-style: italic;
+  }
+
   .excerpt__toggle-link > a {
     color: var.$text-color;
     font-style: italic;