@policystudio/policy-studio-ui-vue 1.2.0-access.73 → 1.2.0-access.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.2.0-access.73",
+  "version": "1.2.0-access.74",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/components/tabs/PsTabHeader.vue

@@ -2,7 +2,9 @@
   <div
     class="psui-el-tab-header"
     :class="[getComponentClass, `layout-${layout}`]"
-    role="group"
+    role="tablist"
+    :aria-label="ariaLabel"
+    @keydown="onKeyDown"
   >
     <template v-for="(item, index) in getItems">
       <slot :item="item">
@@ -14,7 +16,12 @@
           <template #trigger>
             <button
               :key="item[keyValue] + index"
+              ref="tabButtons"
               type="button"
+              role="tab"
+              :aria-selected="getSelected === item[keyValue]"
+              :tabindex="getSelected === item[keyValue] ? 0 : -1"
+              :aria-controls="ariaControlsPrefix ? `${ariaControlsPrefix}${item.id || item[keyValue]}` : undefined"
               @click="selectTab(item)"
               :class="getButtonClass(item).value"
             >
@@ -31,9 +38,15 @@
           </template>
         </PsRichTooltip>
         <button  
-          v-else       
-          type="button"
+          v-else
+          :id="item.id ? item.id : (idSuffix ? `${item[keyValue]}${idSuffix}` : undefined)"       
           :key="item[keyValue] + index"
+          ref="tabButtons"
+          type="button"
+          role="tab"
+          :aria-selected="getSelected === item[keyValue]"
+          :tabindex="getSelected === item[keyValue] ? 0 : -1"
+          :aria-controls="ariaControlsPrefix ? `${ariaControlsPrefix}${item.id || item[keyValue]}` : undefined"
           @click="selectTab(item)"
           :class="getButtonClass(item).value"
         >
@@ -54,7 +67,7 @@
 
 <script setup>
 import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import PsIcon from '../ui/PsIcon.vue'
 
 const props = defineProps({
@@ -98,10 +111,33 @@ const props = defineProps({
    * It sets the tab seleced.
    */
   selected: {},
+  /**
+   * The aria-label for the tablist.
+   */
+  ariaLabel: {
+    type: String,
+    default: 'Tabs',
+  },
+  /**
+   * Prefix for the aria-controls attribute.
+   */
+  ariaControlsPrefix: {
+    type: String,
+    default: '',
+  },
+  /**
+   * Suffix for the tab ID.
+   */
+  idSuffix: {
+    type: String,
+    default: '',
+  },
 })
 
 const emit = defineEmits(['change', 'update:selected'])
 
+const tabButtons = ref([])
+
 const getComponentClass = computed(() => {
   if (props.disabled) {
     return 'status-disabled'
@@ -146,6 +182,46 @@ const selectTab = (item) => {
   }
 }
 
+const onKeyDown = (e) => {
+  const tabs = tabButtons.value.filter(btn => btn !== null)
+  let currentIndex = tabs.findIndex(btn => btn === document.activeElement)
+
+  if (currentIndex === -1) return
+
+  let nextIndex
+
+  switch (e.key) {
+    case 'ArrowRight':
+    case 'ArrowDown':
+      e.preventDefault()
+      nextIndex = (currentIndex + 1) % tabs.length
+      break
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      e.preventDefault()
+      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length
+      break
+    case 'Home':
+      e.preventDefault()
+      nextIndex = 0
+      break
+    case 'End':
+      e.preventDefault()
+      nextIndex = tabs.length - 1
+      break
+    default:
+      return
+  }
+
+  if (nextIndex !== undefined) {
+    const nextTab = nextIndex >= 0 && nextIndex < getItems.value.length ? getItems.value[nextIndex] : null
+    if (nextTab && nextTab.disabled !== true) {
+      selectTab(nextTab)
+      tabs[nextIndex].focus()
+    }
+  }
+}
+
 const getButtonClass = (item) => {
   return computed(() => {
     if (item.disabled) {