feat(a11y): make menu buttons in 'More' dropdown selectable with the keyboard

[jyn514]

previously, these were pure divs, without a <button> element, and could not be selected with Tab, rendering them keyboard-inaccessible.

see also #2767 (cc @userquin). that uses a slightly different approach; it adds a disabled anchor instead of using buttons. i think this html is more semantically accurate, but i don't mind changing it if you so desire.

fixes #2974

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	f4a3489
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/66f5555b9063570008f4201c
😎 Deploy Preview	https://deploy-preview-2976--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	f4a3489
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/66f5555b06b44800072f5b78

[jyn514]

8:31:15 PM: Failed during stage 'checking build content for changes': Canceled build due to no content change

i am not sure why this thinks nothing changed; i tested it locally with pnpm dev and it's definitely selectable now where it wasn't before.

[userquin]

can you update your main and merge changes in this PR?

[userquin]

i am not sure why this thinks nothing changed; i tested it locally with pnpm dev and it's definitely selectable now where it wasn't before.

What do you mean? The buttons are there (also in the PR preview):

Buttons on StatusActionsMore on local using this PR

[userquin]

We should:

• do the same also in components/account/AccountMoreButton.vue
• add type="button" when is is button in components/common/dropdown/DropdownItem.vue: iirc type by default is submit

[jyn514]

can you update your main and merge changes in this PR?
do the same also in components/account/AccountMoreButton.vue

done :)

What do you mean? The buttons are there (also in the PR preview):

i mean the comment the github bot posted on this PR, that says the build was cancelled. maybe i'm misinterpreting it somehow, clearly the preview is showing up.

add type="button" when is is button in components/common/dropdown/DropdownItem.vue: iirc type by default is submit

can you say more? i'm looking at the rendered button and i don't see any submit attribute. does it affect the event type or something like that?

i glanced at DropdownItem but i don't see anything related to submit; the closest is :is="is" in a component. maybe i'm missing something, i've never used react before 😅

[jyn514]

i mean the comment the github bot posted on this PR, that says the build was cancelled. maybe i'm misinterpreting it somehow, clearly the preview is showing up.

ohhhh that's for the docs, not for the live preview of the site. that makes more sense.

[userquin]

Add this in the script setup:

const type = computed(() => is === 'button' ? 'button' : null)

Then add :type="type" below :is="is" in the template, and so the button will be rendered with the type:

<button type="button" ...

[userquin]

We should use props destr. instead with defaults (enabled by default in vue 3.5)

[jyn514]

i added :type="type". it broke at first (apparently NuxtJS can't handle null?) so i just had it fallback to submit .

We should use props destr. instead with defaults (enabled by default in vue 3.5)

i don't know what this means.

[jyn514]

it broke at first (apparently NuxtJS can't handle null?) so i just had it fallback to submit

oh wait apparently this started working again?? the only thing i changed was the order :type appears in the element ...

anyway, i've reverted this change, so now type="" only appears for button elements, not other dropdown items.

[userquin]

Use undefined instead null in the composable

[userquin]

i don't know what this means.

I Will fix this

[shuuji3]

Sorry for taking a while to review 🙏🏻 This is a great accessibility improvement! Thank you so much.😀