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

package/dist/css/psui_styles_output.css

@@ -2748,9 +2748,6 @@ video {
 .psui-el-button span {
   font-weight: 600;
 }
-.psui-el-button span {
-  line-height: 130%;
-}
 .psui-el-button:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2844,6 +2841,7 @@ video {
 }
 .psui-el-button.size-medium {
   font-size: 14px;
+  line-height: 20px;
 }
 .psui-el-button.size-medium .icon-left-side {
   margin-right: 0.25rem;
@@ -2879,6 +2877,7 @@ video {
 }
 .psui-el-button.size-small {
   font-size: 14px;
+  line-height: 20px;
 }
 .psui-el-button.size-small .icon-left-side {
   margin-right: 0.25rem;
@@ -2912,18 +2911,33 @@ video {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
-.psui-el-button.size-compact {
+.psui-el-button.size-compact span {
   font-size: 14px;
+  line-height: 20px;
 }
 .psui-el-button.size-compact .icon-left-side {
   margin-right: 0.125rem;
 }
+.psui-el-button.size-compact .icon-left-side {
+  aspect-ratio: 1/1;
+}
+.psui-el-button.size-compact .icon-left-side {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
 .psui-el-button.size-compact .icon-left-side {
   font-size: 16px;
 }
 .psui-el-button.size-compact .icon-right-side {
   margin-left: 0.125rem;
 }
+.psui-el-button.size-compact .icon-right-side {
+  aspect-ratio: 1/1;
+}
+.psui-el-button.size-compact .icon-right-side {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
 .psui-el-button.size-compact .icon-right-side {
   font-size: 16px;
 }

package/package.json

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

package/src/assets/scss/components/PsButton.scss

@@ -3,7 +3,7 @@
     @apply psui-flex psui-items-center psui-content-center psui-font-bold psui-transition-all psui-ease-in-out psui-duration-[130ms] psui-no-underline psui-cursor-pointer;
 
     span {
-      @apply psui-flex psui-items-center psui-font-semibold psui-flex-shrink-0 psui-leading-[130%] psui-font-[inherit] psui-text-right psui-pt-[1px] psui-align-middle;
+      @apply psui-flex psui-items-center psui-font-semibold psui-flex-shrink-0 psui-font-[inherit] psui-text-right psui-pt-[1px] psui-align-middle;
     }
 
     &:focus {
@@ -37,7 +37,7 @@
     }
 
     &.size-medium {
-      @apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md psui-py-1.5 psui-px-3 psui-text-[14px];
+      @apply psui-flex psui-items-center psui-justify-center psui-content-center psui-rounded-md psui-py-1.5 psui-px-3 psui-text-14;
 
       .icon-left-side {
         @apply psui-text-[18px] psui-mr-1;
@@ -49,7 +49,7 @@
     }
 
     &.size-small {
-      @apply psui-flex psui-items-center psui-justify-center psui-py-1 psui-px-2 psui-rounded psui-text-[14px];
+      @apply psui-flex psui-items-center psui-justify-center psui-py-1 psui-px-2 psui-rounded psui-text-14;
 
       .icon-left-side {
         @apply psui-text-[18px] psui-mr-1;
@@ -61,14 +61,18 @@
     }
 
     &.size-compact {
-      @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-py-0.5 psui-px-1.5 psui-text-[14px];
+      @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-py-0.5 psui-px-1.5;
+
+      span  {
+        @apply psui-text-14;
+      }
 
       .icon-left-side {
-        @apply psui-text-[16px] psui-mr-0.5;
+        @apply psui-text-[16px] psui-mr-0.5 psui-py-[2px] psui-aspect-square;
       }
 
       .icon-right-side {
-        @apply psui-text-[16px] psui-ml-0.5;
+        @apply psui-text-[16px] psui-ml-0.5 psui-py-[2px] psui-aspect-square;
       }
     }
 

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) {