Add role attribute to clickable elements

[trailofdead]

Add support for vimium keyboard navigation and screen readers

• Add menuitem role to SidebarFilter li
• Add button role to Tooltip div

Description

Adds role="menuitem" to clickable li elements in SidebarFilter and role="button" tabIndex={0} to div elements in Tooltip

Related Issue

Flood-UI/flood#885

Screenshots

Types of changes

• Breaking change (changes that break backward compatibility of public API or CLI - semver MAJOR)
• New feature (non-breaking change which adds functionality - semver MINOR)
• Bug fix (non-breaking change which fixes an issue - semver PATCH)

[codecov]

Codecov Report

Merging #182 (3c7560f) into master (2c747d7) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #182   +/-   ##
=======================================
  Coverage   79.95%   79.95%           
=======================================
  Files          56       56           
  Lines        8909     8909           
  Branches      926      927    +1     
=======================================
  Hits         7123     7123           
  Misses       1774     1774           
  Partials       12       12           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 2c747d7...3c7560f. Read the comment docs.

[jesec]

This change seems to introduce some visual border when the element is focused. It does not align with existing designs.

[trailofdead]

The issue you're describing is caused because the div is now focusable, since the addition of the tabIndex attribute. This project uses the eslint jsx-a11y/interactive-supports-focus rule, and removing tabIndex makes the div unfocusable and violates the rule, hurting accessibility.

[jesec]

Visual regressions are not preferable, either. I am going to rollback the tabIndex for now unless there is a better solution.

[trailofdead]

Can we keep the role attribute, remove tabIndex, and ignore the eslint rule for that line?

[jesec]

I fixed the visual regression while preserving the a11y feature with 9f21f94 and 973de1a.