Make wording of accessible labels and use of `aria-expanded` consistent (#2191)

Co-authored-by: Kyle Keating <kkeating@hypothes.is>

src/sidebar/components/annotation-body.js

@@ -69,7 +69,8 @@ export default function AnnotationBody({
             className="annotation-body__collapse-toggle-button"
             isExpanded={!isCollapsed}
             onClick={() => setIsCollapsed(!isCollapsed)}
-            title="Toggle to show full annotation text"
+            aria-label="Toggle visibility of full annotation text"
+            title="Toggle visibility of full annotation text"
           />
         </div>
       )}

src/sidebar/components/excerpt.js

@@ -21,8 +21,7 @@ function InlineControls({ isCollapsed, setCollapsed, linkStyle = {} }) {
           className="excerpt__toggle-button"
           onClick={() => setCollapsed(!isCollapsed)}
           aria-expanded={!isCollapsed}
-          aria-label="Toggle to show the full excerpt"
-          aria-pressed={(!isCollapsed).toString()}
+          aria-label="Toggle visibility of full excerpt text"
           style={linkStyle}
         >
           {toggleLabel}

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

@@ -65,7 +65,10 @@ describe('AnnotationBody', () => {
     const button = wrapper.find('Button');
     assert.isOk(button.exists());
     assert.equal(button.props().buttonText, 'More');
-    assert.equal(button.props().title, 'Toggle to show full annotation text');
+    assert.equal(
+      button.props().title,
+      'Toggle visibility of full annotation text'
+    );
     assert.isFalse(button.props().isExpanded);
   });
 
@@ -88,7 +91,10 @@ describe('AnnotationBody', () => {
     const buttonProps = wrapper.find('Button').props();
 
     assert.equal(buttonProps.buttonText, 'Less');
-    assert.equal(buttonProps.title, 'Toggle to show full annotation text');
+    assert.equal(
+      buttonProps.title,
+      'Toggle visibility of full annotation text'
+    );
     assert.isTrue(buttonProps.isExpanded);
   });
 
@@ -127,6 +133,18 @@ describe('AnnotationBody', () => {
         name: 'when annotation is being edited and has tags',
         content: () => createBody({ isEditing: true, tags: ['foo', 'bar'] }),
       },
+      {
+        name: 'when expandable and not editing',
+        content: () => {
+          const wrapper = createBody();
+          act(() => {
+            // change the `isCollapsible` state to `true` via the `Excerpt`
+            wrapper.find('Excerpt').props().onCollapsibleChanged(true);
+          });
+          wrapper.update();
+          return wrapper;
+        },
+      },
     ])
   );
 });

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

@@ -134,18 +134,18 @@ describe('Excerpt', () => {
       assert.equal(getExcerptHeight(wrapper), 200);
     });
 
-    it("sets button's default state to unpressed", () => {
+    it("sets button's default state to un-expanded", () => {
       const wrapper = createExcerpt({ inlineControls: true }, TALL_DIV);
       const button = wrapper.find('.excerpt__toggle-button');
-      assert.equal(button.prop('aria-pressed'), 'false');
+      assert.equal(button.prop('aria-expanded'), false);
       assert.equal(button.text(), 'More');
     });
 
-    it("changes button's state to pressed when clicked", () => {
+    it("changes button's state to expanded 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.prop('aria-expanded'), true);
       assert.equal(button.text(), 'Less');
     });
   });