[eslint-plugin-lit-a11y]: implement interactive-supports-focus

[bennypowers]

See: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/interactive-supports-focus.md

Elements with an interactive role and interaction handlers (mouse or key press) must be focusable.

Succeed

html`
  <!-- Good: div with click listener is hidden from screen reader -->
  <div aria-hidden @click=${() => void 0}></div>
  <div aria-hidden onclick="void 0"></div>

  <!-- Good: span with click listener is in the tab order -->
  <span @click="${doSomething}" tabIndex="0" role="button">Click me!</span>
  <span @click="${doSomething}" tabIndex="-1" role="menuitem">Click me too!</span>

  <!-- Good: anchor element with href is inherently focusable -->
  <a href="javascript:void(0);" @click="${doSomething}">Click ALL the things!</a>
  <a href="javascript:void(0);" onclick="doSomething();">Click ALL the things!</a>

  <!-- Good: buttons are inherently focusable -->
  <button @click="${doSomething}">Click the button :)</button>
  <button onclick="doSomething();">Click the button :)</button>
`;

Fail

html`
  <!-- Bad: span with click listener has no tabindex -->
  <span @click="${submitForm}" role="button">Submit</span>
  <span onclick="submitForm();" role="button">Submit</span>

  <!-- Bad: anchor element without href is not focusable -->
  <a @click="${showNextPage}" role="button">Next page</a>
  <a onclick="showNextPage();" role="button">Next page</a>
`;

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!