Set `aria-label` and `title` attrs only if different from displayed text

Only set `aria-label` and `title` attributes on `<button>` elements if
they are different from the text displayed in the button.

src/sidebar/components/button.js

@@ -37,6 +37,13 @@ export default function Button({
   const baseClassName = buttonText ? 'button--labeled' : 'button--icon-only';
 
   const extraProps = {};
+
+  // If there is no displayed text in the button, or if the provided `title`
+  // differs from the displayed text, add `aria-label` and `title` attributes
+  if (!buttonText || title !== buttonText) {
+    extraProps.title = title;
+    extraProps['aria-label'] = title;
+  }
   if (typeof isPressed === 'boolean') {
     // Indicate that this is a toggle button.
     extraProps['aria-pressed'] = isPressed;
@@ -59,7 +66,6 @@ export default function Button({
         className
       )}
       onClick={onClick}
-      title={title}
       style={style}
       disabled={disabled}
       {...extraProps}

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

@@ -65,18 +65,48 @@ describe('Button', () => {
     assert.notProperty(wrapper.find('button').props(), 'aria-pressed');
   });
 
-  it('sets `title` to provided `title` prop', () => {
-    const wrapper = createComponent({});
-    assert.equal(wrapper.find('button').prop('title'), 'My Action');
-  });
+  describe('`title` and `aria-label` attributes', () => {
+    it('sets attrs to provided `title` prop', () => {
+      const wrapper = createComponent({});
+      assert.equal(wrapper.find('button').prop('title'), 'My Action');
+      assert.equal(wrapper.find('button').prop('aria-label'), 'My Action');
+    });
 
-  it('uses `buttonText` to set `title` attr if `title` missing', () => {
-    const wrapper = createComponent({
-      buttonText: 'My Label',
-      title: undefined,
+    it('sets attrs if `title` is different than `buttonText`', () => {
+      const wrapper = createComponent({
+        buttonText: 'My Label',
+        title: 'Click here to do something',
+      });
+
+      assert.equal(
+        wrapper.find('button').prop('title'),
+        'Click here to do something'
+      );
+      assert.equal(
+        wrapper.find('button').prop('aria-label'),
+        'Click here to do something'
+      );
     });
 
-    assert.equal(wrapper.find('button').prop('title'), 'My Label');
+    it('does not set attrs if no `title` provided and `buttonText` present', () => {
+      const wrapper = createComponent({
+        buttonText: 'My Label',
+        title: undefined,
+      });
+
+      assert.notProperty(wrapper.find('button').props(), 'title');
+      assert.notProperty(wrapper.find('button').props(), 'aria-label');
+    });
+
+    it('does not set attrs if `title` is the same as `buttonText`', () => {
+      const wrapper = createComponent({
+        buttonText: 'My Label',
+        title: 'My Label',
+      });
+
+      assert.notProperty(wrapper.find('button').props(), 'title');
+      assert.notProperty(wrapper.find('button').props(), 'aria-label');
+    });
   });
 
   it('invokes `onClick` callback when pressed', () => {