Merge pull request #1635 from hypothesis/svg-span-titles

Add `title` property to `SvgIcon`

src/images/icons/lock.svg

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="48px" height="56px" viewBox="0 0 48 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
-    <title>Only me</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group-4-Copy-3" fill="currentColor">
             <rect id="Rectangle-34" x="0" y="24" width="48" height="32"></rect>

src/sidebar/components/annotation-share-info.js

@@ -41,12 +41,13 @@ function AnnotationShareInfo({ annotation, isPrivate }) {
         </a>
       )}
       {isPrivate && (
-        <span
-          className="annotation-share-info__private"
-          title="This annotation is visible only to you."
-        >
+        <span className="annotation-share-info__private">
           {/* Show the lock icon in all cases when the annotation is private... */}
-          <SvgIcon className="annotation-share-info__icon" name="lock" />
+          <SvgIcon
+            className="annotation-share-info__icon"
+            name="lock"
+            title="This annotation is visible only to you"
+          />
           {/* but only render the "Only Me" text if we're not showing/linking a group name */}
           {!linkToGroup && (
             <span className="annotation-share-info__private-info">Only me</span>

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'));
+  });
 });