fix(tabs): DLT-3251 improve accessibility (#1171)

Author: francisrupert

packages/dialtone-vue/components/tab/tab.test.js

@@ -8,6 +8,7 @@ const MOCK_DEFAULT_SLOT = 'Message Slot';
 const MOCK_GROUP_CONTEXT = {
   disabled: false,
   selected: '',
+  focusedTabId: null,
 };
 
 const baseProps = {
@@ -388,5 +389,51 @@ describe('DtTab Tests', () => {
         expect(tab.attributes('tabindex')).toBe('-1');
       });
     });
+
+    describe('Roving tabindex', () => {
+      describe('When focusedTabId matches this tab', () => {
+        beforeEach(() => {
+          mockProvide = { groupContext: { ...MOCK_GROUP_CONTEXT, selected: '', focusedTabId: MOCK_ID } };
+
+          updateWrapper();
+        });
+
+        it('tabindex should be 0', () => {
+          expect(tab.attributes('tabindex')).toBe('0');
+        });
+
+        it('aria-selected should still be "false"', () => {
+          expect(tab.attributes('aria-selected')).toBe('false');
+        });
+      });
+
+      describe('When focusedTabId is a different tab', () => {
+        beforeEach(() => {
+          mockProvide = { groupContext: { ...MOCK_GROUP_CONTEXT, selected: MOCK_PANEL_ID, focusedTabId: 'other-tab' } };
+
+          updateWrapper();
+        });
+
+        it('tabindex should be -1 even when selected', () => {
+          expect(tab.attributes('tabindex')).toBe('-1');
+        });
+
+        it('aria-selected should still be "true"', () => {
+          expect(tab.attributes('aria-selected')).toBe('true');
+        });
+      });
+
+      describe('When focusedTabId is null', () => {
+        beforeEach(() => {
+          mockProvide = { groupContext: { ...MOCK_GROUP_CONTEXT, selected: MOCK_PANEL_ID, focusedTabId: null } };
+
+          updateWrapper();
+        });
+
+        it('tabindex should fall back to selected tab', () => {
+          expect(tab.attributes('tabindex')).toBe('0');
+        });
+      });
+    });
   });
 });

packages/dialtone-vue/components/tab/tab.vue

@@ -21,7 +21,7 @@
     :leading-class="leadingClass"
     :trailing-class="trailingClass"
     data-qa="dt-tab"
-    :tabindex="isSelected ? '0' : '-1'"
+    :tabindex="isFocusTarget ? '0' : '-1'"
     v-bind="$attrs"
     v-on="tabListeners"
   >
@@ -211,6 +211,11 @@ export default {
       return this.groupContext.selected === this.panelId;
     },
 
+    isFocusTarget () {
+      const focusedId = this.groupContext.focusedTabId;
+      return focusedId ? focusedId === this.id : this.isSelected;
+    },
+
     buttonKind () {
       if (this.groupContext.outlined) {
         return this.groupContext.kind === 'muted' ? 'muted' : 'default';
@@ -245,6 +250,12 @@ export default {
     }
   },
 
+  beforeUnmount () {
+    if (this.groupContext.focusedTabId === this.id) {
+      this.setFocus(null);
+    }
+  },
+
   methods: {
   },
 };