@policystudio/policy-studio-ui-vue 1.2.0-access.50 → 1.2.0-access.52

package/package.json

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

package/src/components/forms/PsDropdown.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="psui-el-dropdown-menu"
-  >
+  <div class="psui-el-dropdown-menu">
     <div
       ref="PSDropdownTrigger"
       @click="toggle"
@@ -32,8 +30,11 @@
           v-if="show"
           ref="PSDropdownFloating"
           role="menu"
-          tabindex="0"
+          tabindex="-1"
           class="psui-el-dropdown-menu-dialog-wrapper"
+          @keydown.esc="closeWithFocus"
+          @keydown.down.prevent="moveFocus(1)"
+          @keydown.up.prevent="moveFocus(-1)"
           :class="contentCss"
           aria-orientation="vertical"
           :style="floatingStyles"
@@ -48,34 +49,35 @@
 
 <script setup>
 // Figma - 2.3 Dropdown with category divider https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64886
-import { 
-  useFloating, 
-  autoUpdate, 
-  offset, 
-  flip, 
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
   shift,
-  size 
+  size,
 } from '@floating-ui/vue'
 
 import { ref, defineProps, useSlots, computed } from 'vue'
 import Teleport from 'vue2-teleport'
+import { nextTick } from 'vue'
 
 const props = defineProps({
-  disabled: {type: Boolean, default: false},
+  disabled: { type: Boolean, default: false },
   placement: { type: String, default: 'bottom-start' },
   offsetVal: { type: Number, default: 4 },
   width: {
     type: [Number, String],
-    default: null
+    default: null,
   },
   height: {
     type: [Number, String],
-    default: 'auto'
+    default: 'auto',
   },
   contentCss: {
     type: String,
-    default: 'psui-rounded psui-bg-white psui-shadow-elevation-20'
-  }
+    default: 'psui-rounded psui-bg-white psui-shadow-elevation-20',
+  },
 })
 
 const emit = defineEmits(['open', 'close'])
@@ -96,39 +98,85 @@ const { floatingStyles } = useFloating(PSDropdownTrigger, PSDropdownFloating, {
   whileElementsMounted: autoUpdate,
   middleware: [
     offset(props.offsetVal),
-    flip(), 
+    flip(),
     shift(),
     size({
-      apply({rects, elements}) {
-          const customWidth = props.width ?? rects.reference.width
-          Object.assign(elements.floating.style, {
-            width: `${customWidth}px`,
-            ...(typeof height == 'string' ? {maxHeight: props.height} : {maxHeight : `${props.height}px`})
-          })
+      apply({ rects, elements }) {
+        const customWidth = props.width ?? rects.reference.width
+        Object.assign(elements.floating.style, {
+          width: `${customWidth}px`,
+          ...(typeof height == 'string'
+            ? { maxHeight: props.height }
+            : { maxHeight: `${props.height}px` }),
+        })
       },
-    }) 
+    }),
   ],
 })
 
+const closeWithFocus = () => {
+  show.value = false
+  emit('close')
+  PSDropdownTrigger.value?.querySelector('button')?.focus()
+}
+
+const focusFirstElement = async () => {
+  await nextTick()
+  if (PSDropdownFloating.value) {
+    const focusable = PSDropdownFloating.value.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    )
+    focusable?.focus()
+  }
+}
+
+const moveFocus = (offset) => {
+  if (!PSDropdownFloating.value) return
+
+  const focusableElements = PSDropdownFloating.value.querySelectorAll(
+    'button:not([disabled]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  )
+  
+  const focusable = Array.from(focusableElements)
+  if (focusable.length === 0) return
+
+  const currentIndex = focusable.indexOf(document.activeElement)
+
+  let nextIndex = currentIndex + offset
+  
+  if (nextIndex < 0) {
+    nextIndex = focusable.length - 1 
+  } else if (nextIndex >= focusable.length) {
+    nextIndex = 0 
+  }
+
+  focusable[nextIndex].focus()
+}
+
 const open = () => {
   show.value = true
   emit('open')
 }
 
 const close = (event) => {
-  if(event?.target && PSDropdownTrigger.value.contains(event?.target)) return
+  if (event?.target && PSDropdownTrigger.value.contains(event?.target)) return
 
   show.value = false
   emit('close')
 }
 
-const toggle = (event) => {
+const toggle = async (event) => {
   if (props.disabled) return
 
   if (event) event.stopPropagation()
 
   show.value = !show.value
-  
+
+  if (show.value) {
+    await focusFirstElement()
+  } else {
+    emit('close')
+  }
 }
 
 defineExpose({ open, close })

package/src/components/notifications/PsDialog.vue

@@ -1,7 +1,9 @@
 <template>
   <div
     class="psui-el-dialog"
+    v-bind="$attrs"
     :class="getComponentClass"
+    @keydown.esc="onClose"
   >
     <div
       v-if="hasIcon"
@@ -30,6 +32,7 @@
     <button
       class="psui-el-dialog-close"
       v-if="hasClose"
+      aria-label="Close dialog"
       @click="onClose"
     >
       <i class="material-icons-round">close</i>

package/src/components/tabs/PsTabHeader.vue

@@ -22,6 +22,8 @@
                 v-if="item.icon"
                 :icon="item.icon"
                 display="flex"
+                tabindex="-1"
+                aria-hidden="true"
                 size="18"
               />
               <span>{{ item[keyLabel] }}</span>
@@ -39,6 +41,8 @@
             v-if="item.icon"
             :icon="item.icon"
             display="flex"
+            tabindex="-1"
+            aria-hidden="true"
             size="18"
           />
           <span>{{ item[keyLabel] }}</span>