fix(client): make pages route actions keyboard accessible

packages/client/src/pages/pages.vue

@@ -169,6 +169,7 @@ function isParamPart(part: string): boolean {
             class="w-full border-0 bg-transparent color-inherit outline-none placeholder-color-gray-500 dark:placeholder-gray-300"
             type="text"
             placeholder="/"
+            aria-label="Route path"
             @keydown.enter="navigate"
           />
         </div>
@@ -260,15 +261,16 @@ function isParamPart(part: string): boolean {
                         </button>
 
                         <Dropdown v-else>
-                          <code
-                            class="block cursor-pointer font-mono"
+                          <button
+                            class="block cursor-pointer border-0 bg-transparent p-0 color-inherit font-mono"
                             :class="
                               routeMatches(currentRoute?.matched ?? [], item)
                                 ? 'text-primary-400'
                                 : routeMatches(routeInputMatched, item)
                                   ? 'text-teal'
                                   : ''
                             "
+                            type="button"
                           >
                             <span
                               v-for="(part, index) in getRouteParts(item)"
@@ -281,7 +283,7 @@ function isParamPart(part: string): boolean {
                             >
                               {{ isParamPart(part) ? part.slice(1) : part }}
                             </span>
-                          </code>
+                          </button>
 
                           <template #popper="{ hide }">
                             <div class="p-2">
@@ -304,6 +306,7 @@ function isParamPart(part: string): boolean {
                                       v-if="isParamPart(part)"
                                       class="w-20 rounded-1 border border-primary-100 bg-transparent px-2 py-0.75 color-inherit outline-none dark:border-gray-700"
                                       :placeholder="part.slice(1)"
+                                      :aria-label="`Route param ${part.slice(1)}`"
                                       :value="getRouteInput(item, index)"
                                       @input="setRouteInput(item, index, getInputValue($event))"
                                     />
@@ -331,13 +334,16 @@ function isParamPart(part: string): boolean {
                       v-if="metaFieldVisible"
                       class="w-50 whitespace-nowrap pr-1 text-left font-mono text-sm op50 hover:text-primary hover:op100"
                     >
-                      <span
-                        class="inline-block w-50 cursor-pointer overflow-hidden text-ellipsis"
+                      <button
+                        v-if="hasMeta(item)"
+                        class="block w-50 cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap border-0 bg-transparent p-0 text-left color-inherit font-mono text-sm"
+                        type="button"
                         :title="metaToString(item.meta, 2)"
                         @click="selectMeta(item.meta)"
                       >
                         {{ metaToString(item.meta) }}
-                      </span>
+                      </button>
+                      <span v-else class="inline-block w-50">-</span>
                     </td>
                   </tr>
                 </tbody>

tests/integration/client/pages.test.ts

@@ -0,0 +1,56 @@
+// @vitest-environment happy-dom
+
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+const routerSnapshot = ref({
+  appId: 'app:0',
+  currentRoute: { fullPath: '/', matched: [], path: '/' },
+  routes: [
+    { name: 'home', path: '/' },
+    { meta: { auth: true }, name: 'user', path: '/user/:id' },
+  ],
+})
+
+vi.mock('../../../packages/client/src/composables/devtools-client', () => ({
+  useDevtoolsClient: () => ({
+    error: ref(''),
+    getMatchedRoutes: vi.fn(async () => []),
+    navigateRoute: vi.fn(async () => {}),
+    routerSnapshot,
+    selectedAppId: ref('app:0'),
+  }),
+}))
+
+import Pages from '../../../packages/client/src/pages/pages.vue'
+
+let wrapper: ReturnType<typeof mount> | undefined
+afterEach(() => wrapper?.unmount())
+
+function mountPages() {
+  return mount(Pages, {
+    global: {
+      directives: { tooltip: {} },
+      stubs: { Dropdown: { template: '<div><slot /></div>' } },
+    },
+  })
+}
+
+describe('Pages', () => {
+  it('labels the route path input', () => {
+    wrapper = mountPages()
+    expect(wrapper.get('input[type="text"]').attributes('aria-label')).toBe('Route path')
+  })
+
+  it('renders dynamic routes and route meta as buttons', async () => {
+    wrapper = mountPages()
+    const dynamicRoute = wrapper.findAll('button').find((button) => button.text() === '/user/id')
+    expect(dynamicRoute?.attributes('type')).toBe('button')
+
+    const metaButton = wrapper.get('button[title]')
+    expect(metaButton.text()).toBe('{"auth":true}')
+    await metaButton.trigger('click')
+    expect(wrapper.text()).toContain('Route meta detail')
+  })
+})