Make `SVGIcon` take a `title` property

Optional property `title` sets `title` on SVG’s containing `span` for
a11y/usability

src/sidebar/components/svg-icon.js

@@ -57,7 +57,7 @@ const icons = {
  * This matches the way we do icons on the website, see
  * https://github.com/hypothesis/h/pull/3675
  */
-function SvgIcon({ name, className = '', inline = false }) {
+function SvgIcon({ name, className = '', inline = false, title = '' }) {
   if (!icons[name]) {
     throw new Error(`Unknown icon ${name}`);
   }
@@ -74,11 +74,17 @@ function SvgIcon({ name, className = '', inline = false }) {
     markup,
   ]);
 
+  const spanProps = {};
+  if (title) {
+    spanProps.title = title;
+  }
+
   return (
     <span
       className={classnames('svg-icon', { 'svg-icon--inline': inline })}
       dangerouslySetInnerHTML={markup}
       ref={element}
+      {...spanProps}
     />
   );
 }
@@ -92,6 +98,9 @@ SvgIcon.propTypes = {
 
   /** Apply a style allowing for inline display of icon wrapper */
   inline: propTypes.bool,
+
+  /** Optional title attribute to apply to the SVG's containing `span` */
+  title: propTypes.string,
 };
 
 module.exports = SvgIcon;

src/sidebar/components/test/svg-icon-test.js

@@ -59,4 +59,18 @@ describe('SvgIcon', () => {
     assert.isTrue(wrapper.classList.contains('svg-icon'));
     assert.isTrue(wrapper.classList.contains('svg-icon--inline'));
   });
+
+  it('sets a title to the containing `span` element if `title` is present', () => {
+    const container = document.createElement('div');
+    render(<SvgIcon name="expand-menu" title="Open menu" />, container);
+    const wrapper = container.querySelector('span');
+    assert.equal(wrapper.getAttribute('title'), 'Open menu');
+  });
+
+  it('sets does not set a title on the containing `span` element if `title` not present', () => {
+    const container = document.createElement('div');
+    render(<SvgIcon name="expand-menu" />, container);
+    const wrapper = container.querySelector('span');
+    assert.notOk(wrapper.getAttribute('title'));
+  });
 });