chore(release): 0.1.38

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.38](https://github.com/nuxtlabs/ui/compare/v0.1.37...v0.1.38) (2023-02-03)
+
+### [0.1.37](https://github.com/nuxtlabs/ui/compare/v0.1.36...v0.1.37) (2023-02-03)
+
+
+### Bug Fixes
+
+* **CommandPalette:** improve accessibility ([#129](https://github.com/nuxtlabs/ui/issues/129)) ([bea47b5](https://github.com/nuxtlabs/ui/commit/bea47b5906d1bc665717830d6dc2f3ff2a0374f3))
+
+### [0.1.36](https://github.com/nuxtlabs/ui/compare/v0.1.35...v0.1.36) (2023-02-02)
+
+
+### Bug Fixes
+
+* **CommandPalette:** put back cursor on top only when query changes ([5bf5a31](https://github.com/nuxtlabs/ui/commit/5bf5a314c414b96c656190719bd56acca10676f5))
+
 ### [0.1.35](https://github.com/nuxtlabs/ui/compare/v0.1.34...v0.1.35) (2023-02-01)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "0.1.35",
+  "version": "0.1.38",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -25,19 +25,19 @@
     "release": "yarn lint && standard-version && git push --follow-tags"
   },
   "dependencies": {
-    "@headlessui/vue": "1.7.4",
+    "@headlessui/vue": "1.7.9",
-    "@iconify/vue": "^4.0.2",
+    "@iconify/vue": "^4.1.0",
-    "@nuxt/kit": "^3.0.0",
+    "@nuxt/kit": "^3.1.2",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.2.0",
+    "@nuxtjs/tailwindcss": "^6.3.1",
     "@popperjs/core": "^2.11.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^9.11.1",
+    "@vueuse/core": "^9.12.0",
-    "@vueuse/integrations": "^9.11.1",
+    "@vueuse/integrations": "^9.12.0",
-    "defu": "^6.1.1",
+    "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
     "tailwindcss": "^3.2.4"
@@ -46,8 +46,9 @@
     "@nuxt/module-builder": "^0.2.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@types/lodash-es": "^4.17.6",
-    "eslint": "^8.32.0",
+    "@types/node": "^18.11.18",
-    "nuxt": "^3.0.0",
+    "eslint": "^8.33.0",
+    "nuxt": "^3.1.2",
     "standard-version": "^9.5.0",
     "unbuild": "^1.1.1",
     "vue-tsc": "^1.0.24"

src/runtime/components/navigation/CommandPalette.vue

@@ -25,12 +25,19 @@
           :class="$ui.commandPalette.input.close.base"
           :size="$ui.commandPalette.input.close.size"
           :variant="$ui.commandPalette.input.close.variant"
-          aria-label="close"
+          aria-label="Close"
           @click="onClear"
         />
       </div>
 
-      <ComboboxOptions v-if="groups.length" static hold class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2">
+      <ComboboxOptions
+        v-if="groups.length"
+        static
+        hold
+        as="div"
+        aria-label="Commands"
+        class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-2"
+      >
         <CommandPaletteGroup v-for="group of groups" :key="group.key" :group="group" :group-attribute="groupAttribute" :command-attribute="commandAttribute">
           <template v-for="(_, name) in $slots" #[name]="slotData">
             <slot :name="name" v-bind="slotData" />
@@ -183,7 +190,7 @@ const groups = computed(() => map(groupBy(results.value, command => command.item
   } as Group
 }))
 
-watch(groups, () => {
+watch(query, () => {
   // Select first item on search changes
   setTimeout(() => {
     // https://github.com/tailwindlabs/headlessui/blob/6fa6074cd5d3a96f78a2d965392aa44101f5eede/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L804

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -1,10 +1,10 @@
 <template>
-  <li class="p-2" role="option">
+  <div class="p-2" role="option">
     <h2 v-if="group[groupAttribute]" class="px-3 my-2 text-xs font-semibold u-text-gray-900">
       {{ group[groupAttribute] }}
     </h2>
 
-    <ul class="text-sm u-text-gray-700">
+    <div class="text-sm u-text-gray-700" role="listbox" :aria-label="group[groupAttribute]">
       <ComboboxOption
         v-for="(command, index) of group.commands"
         :key="`${group.key}-${index}`"
@@ -13,7 +13,7 @@
         :disabled="command.disabled"
         as="template"
       >
-        <li :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
+        <div :class="['flex justify-between select-none items-center rounded-md px-3 py-2 gap-3 relative', active && 'bg-gray-100 dark:bg-gray-800 u-text-gray-900', command.disabled ? 'cursor-not-allowed' : 'cursor-pointer']">
           <div class="flex items-center gap-2 min-w-0">
             <Icon v-if="command.icon" :name="command.icon" :class="['h-4 w-4 flex-shrink-0', active ? 'text-opacity-100 dark:text-opacity-100' : 'text-opacity-40 dark:text-opacity-40', command.iconClass || 'text-gray-900 dark:text-gray-50']" aria-hidden="true" />
             <Avatar
@@ -45,10 +45,10 @@
             </span>
             <span v-else-if="!command.disabled && group.inactive" class="flex-shrink-0 u-text-gray-500">{{ group.inactive }}</span>
           </slot>
-        </li>
+        </div>
       </ComboboxOption>
-    </ul>
+    </div>
-  </li>
+  </div>
 </template>
 
 <script setup lang="ts">

tsconfig.json

@@ -1,14 +1,3 @@
 {
-  "extends": "./docs/.nuxt/tsconfig.json",
+  "extends": "./docs/.nuxt/tsconfig.json"
-  "compilerOptions": {
-    "module": "esnext"
-  },
-  "include": [
-    "./**/*",
-    "./docs/.nuxt/nuxt.d.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
 }