<rocket-navigation> a11y

[bennypowers]

<rocket-navigation> has a click listener, but doesn't have interactive semantics:

    this.addEventListener('click', ev => {
      if (ev.target.classList.contains('anchor')) {
        this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
      }
    });

possible solutions:

• add listeners to <a> children instead of the parent
• listen for popstate instead

[daKmoR]

why would this be a warning? 🤔

event delegation is so much more performant and simpler to maintain then individual event listener...

can you link some details to this rule or post a screenshot of the a11y result or how to reproduce it - I'm a little baffled 😱

[bennypowers]

This report comes from by Firefox' accessibility inspector Fire up FF Developer Edition, load a rocket page (in desktop resolution) and then load any page. Switch to the accessibility view (right click an element and inspect accessibility properties) Then click the dropdown in a11y panel and scan for keyboard issues.

The error is reported on the <rocket-navigation> element.

The specific error reported is Clickable elements must be focusable and should have interactive semantics

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

aXe doesn't seem to report this specific error.