2 files changed, 12 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index e7ff76c8218..3cf90b45a97 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/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>
diff --git a/spec/javascripts/vue_shared/components/icon_spec.js b/spec/javascripts/vue_shared/components/icon_spec.js
index 882420e602e..01f4649339e 100644
--- a/spec/javascripts/vue_shared/components/icon_spec.js
+++ b/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');
+    });
   });
 });