Add `tabindex` attribute support to show BS4 popover on trigger `focus`

app/assets/javascripts/vue_shared/components/icon.vue

@@ -75,6 +75,12 @@ export default {
       required: false,
       default: null,
     },
+
+    tabIndex: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
@@ -98,6 +104,7 @@ export default {
     :height="height"
     :x="x"
     :y="y"
+    :tabindex="tabIndex"
   >
     <use v-bind="{ 'xlink:href':spriteHref }"/>
   </svg>

spec/javascripts/vue_shared/components/icon_spec.js

@@ -13,6 +13,7 @@ describe('Sprite Icon Component', function () {
         name: 'commit',
         size: 32,
         cssClasses: 'extraclasses',
+        tabIndex: '0',
       });
     });
@@ -58,5 +59,9 @@ describe('Sprite Icon Component', function () {
     it('`name` validator should return false for existing icons', () => {
       expect(Icon.props.name.validator('commit')).toBe(true);
     });
+
+    it('should contain `tabindex` attribute on svg element when `tabIndex` prop is defined', () => {
+      expect(icon.$el.getAttribute('tabindex')).toBe('0');
+    });
   });
 });