Merge pull request #2130 from hypothesis/show-hide-toggles

Add `aria-expanded` to excerpt show/hide toggles

src/sidebar/components/annotation-body.js

@@ -31,10 +31,6 @@ export default function AnnotationBody({
   const [isCollapsible, setIsCollapsible] = useState(false);
 
   const toggleText = isCollapsed ? 'More' : 'Less';
-  const toggleTitle = isCollapsed
-    ? 'Show full annotation text'
-    : 'Show the first few lines only';
-
   const showExcerpt = !isEditing && text.length > 0;
   const showTagList = !isEditing && tags.length > 0;
 
@@ -69,10 +65,11 @@ export default function AnnotationBody({
       {isCollapsible && !isEditing && (
         <div className="annotation-body__collapse-toggle">
           <Button
+            buttonText={toggleText}
             className="annotation-body__collapse-toggle-button"
+            isExpanded={!isCollapsed}
             onClick={() => setIsCollapsed(!isCollapsed)}
-            buttonText={toggleText}
-            title={toggleTitle}
+            title="Toggle to show full annotation text"
           />
         </div>
       )}

src/sidebar/components/button.js

@@ -21,6 +21,7 @@ export default function Button({
   className = '',
   disabled = false,
   icon = '',
+  isExpanded,
   isPressed,
   onClick = () => null,
   style = {},
@@ -40,6 +41,9 @@ export default function Button({
     // Indicate that this is a toggle button.
     extraProps['aria-pressed'] = isPressed;
   }
+  if (typeof isExpanded === 'boolean') {
+    extraProps['aria-expanded'] = isExpanded;
+  }
 
   return (
     <button
@@ -110,6 +114,11 @@ Button.propTypes = {
    */
   icon: requiredStringIfButtonTextMissing,
 
+  /**
+   * Is the expandable element controlled by this button currently expanded?
+   */
+  isExpanded: propTypes.bool,
+
   /**
    * Indicate that this is a toggle button (if `isPressed` is a boolean) and
    * whether it is pressed.

src/sidebar/components/excerpt.js

@@ -20,7 +20,8 @@ function InlineControls({ isCollapsed, setCollapsed, linkStyle = {} }) {
         <button
           className="excerpt__toggle-button"
           onClick={() => setCollapsed(!isCollapsed)}
-          aria-label="Toggle to show the full excerpt or first few lines only"
+          aria-expanded={!isCollapsed}
+          aria-label="Toggle to show the full excerpt"
           aria-pressed={(!isCollapsed).toString()}
           style={linkStyle}
         >

src/sidebar/components/test/annotation-body-test.js

@@ -65,7 +65,8 @@ describe('AnnotationBody', () => {
     const button = wrapper.find('Button');
     assert.isOk(button.exists());
     assert.equal(button.props().buttonText, 'More');
-    assert.equal(button.props().title, 'Show full annotation text');
+    assert.equal(button.props().title, 'Toggle to show full annotation text');
+    assert.isFalse(button.props().isExpanded);
   });
 
   it('shows appropriate button text to collapse the Excerpt if expanded', () => {
@@ -87,7 +88,8 @@ describe('AnnotationBody', () => {
     const buttonProps = wrapper.find('Button').props();
 
     assert.equal(buttonProps.buttonText, 'Less');
-    assert.equal(buttonProps.title, 'Show the first few lines only');
+    assert.equal(buttonProps.title, 'Toggle to show full annotation text');
+    assert.isTrue(buttonProps.isExpanded);
   });
 
   describe('tag list and editor', () => {

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

@@ -41,6 +41,18 @@ describe('Button', () => {
     assert.equal(wrapper.find('SvgIcon').prop('name'), 'fakeIcon');
   });
 
+  [true, false].forEach(isExpanded => {
+    it('sets `aria-expanded` attribute if `isExpanded` is a boolean', () => {
+      const wrapper = createComponent({ isExpanded });
+      assert.equal(wrapper.find('button').prop('aria-expanded'), isExpanded);
+    });
+  });
+
+  it('does not set `aria-expanded` attribute if `isExpanded` is omitted', () => {
+    const wrapper = createComponent();
+    assert.notProperty(wrapper.find('button').props(), 'aria-expanded');
+  });
+
   [true, false].forEach(isPressed => {
     it('sets `aria-pressed` attribute if `isPressed` is a boolean', () => {
       const wrapper = createComponent({ isPressed });