I added keyboard navigation to dropdowns by simply setting tabindex="0" on them.

The button that opens the dropdown still needs to have an aria-haspopup attribute.

The correct keyboard behavior for dropdowns is that up and down arrows focus the previous/next item and Tab focuses the next element outside the dropdown.

The correct keyboard behavior for dropdowns is that up and down arrows focus the previous/next item and Tab focuses the next element outside the dropdown.

I have before made a library with this exact functionality, so I'll look into this.

I have not done any screen reader testing myself yet.

I have before made a library with this exact functionality, so I'll look into this.

I was hoping not to add another libary but it might be worth it if it needs more than a few lines of JS.

Blockly's menu implementation might be useful as a reference: https://github.com/google/blockly/blob/139fa2b/core/menu.ts#L407-L462

const shiftAmountsByKey = {
  ArrowUp: -1,
  ArrowDown: 1,
  ArrowLeft: -1,
  ArrowRight: 1,
  Home: -1000,
  End: 1000,
};

/** Makes a list-like element arrow-key navigated. */
export default class ArrowKeyList {
  constructor(element) {
    element.addEventListener("keydown", (e) => {
      if (e.ctrlKey || e.metaKey || e.altKey) return;
      if (e.key === "Tab") {
        if (e.shiftKey) {
          // Focus the first child, then the default behavior of Shift+Tab will move to the previous element
          element.firstElementChild.focus();
        } else {
          // Focus the last child, then the default behavior of Tab will move to the next element
          element.lastElementChild.focus();
        }
      } else {
        const shiftBy = shiftAmountsByKey[e.key];
        if (shiftBy) e.preventDefault(); else return;

        const oldFocusIndex = Array.from(element.children).indexOf(document.activeElement);
        // Move,
        const adjustedFocusIndex = oldFocusIndex + shiftBy;
        // clamp,
        const newFocusIndex = Math.min(Math.max(adjustedFocusIndex, 0), element.childElementCount - 1);
        // set focus!
        const targetElement = element.children[newFocusIndex];
        targetElement.focus();
      }
    });
  }
}

I think it's more important that we add ARIA attributes to our menus, though. role, aria-haspopup, and aria-expanded shouldn't be too hard to implement.

Or, I wonder if there's a library that handles ARIA attributes and navigation for us.

Menu arrow key naviagtion works now. I'm not sure if the menus should stay open when tabbing away, currently they doesn't.

If you want to figure it out, feel free to use this snippet under the same license terms of our project.

Just to be clear you mean this repository's license, right?

It works! The dropdowns, menus, and menu items are announced as such:

• "Button, collapsed, has popup"
  • "Export settings, menu item, 1 of 2"
  • "Import settings, menu item, 2 of 2"

However, icon-buttons still need readable labels—currently most of the images don't have alt text, and when there's no text, the default name is just "graphic" or "button".

I'm not sure if the menus should stay open when tabbing away, currently they doesn't.

On GitHub, they collapse when you tab outside.

If you want to figure it out, feel free to use this snippet under the same license terms of our project.

Just to be clear you mean this repository's license, right?

Correct.

Navigate between addons with the arrow keys?

  <template>
- <div class="addon-body" v-show="shouldShow" :id="'addon-' + addon._addonId">
+   <div
+     class="addon-body"
+     v-show="shouldShow"
+     :id="'addon-' + addon._addonId"
+     tabindex="0"
+     @keydown="handleKeys"
+   >
      <div class="addon-topbar">

        },
+       handleKeys(e) {
+         if (!e.target.classList.contains("addon-body")) return;
+         if (e.ctrlKey || e.metaKey || e.altKey) return;
+         const cards = document.querySelectorAll(".addons-container .addon-body:not([style='display: none;'])");
+         const index = Array.prototype.findIndex.call(cards, (i) => i === document.activeElement);
+         if (e.key === "ArrowUp") {
+           if (!cards[index - 1]) return;
+           e.preventDefault();
+           cards[index - 1].focus();
+         } else if (e.key === "ArrowDown") {
+           if (!cards[index + 1]) return;
+           e.preventDefault();
+           cards[index + 1].focus();
+         }
+       },
        toggleAddonRequest(event) {

Not sure if this is any better than just manully handling keypresses

That's even better! The options are announced as radio buttons by the screen reader.

Now that this is done, I'll try to work on improving screen reader support and some other more specific UI interactions.