Improve a11y via keyboard navigable NavBar and "Skip to Content Button"

[andrico1234]

Is your feature request related to a problem? Please describe.
I appreciate how easy to use React Admin works out of the box in regards to keyboard navigation in the Edit/Show/Create/List screens, and with just a little work the same can be achieved in the other parts of the library

If you're happy to have these included in the app, I would love to create the MR(s).

The two proposals I have are

• Left side navigation accepts focus: Make NavMenu Keyboard Navigable #5772
• Add a "Skip to Content button": Add "Skip to content" button #5773

The former will ensure that all buttons and links in the page are tabbable, since it seems that RA skips over the list of resources in the side menu.

The latter will allow users to jump straight to the main content on the page.

These are ARIA standards outlined in: here and here

Implementation

Focusable Nav Bar

It looks like the dashboard items have a tabIndex set to -1. Removing this makes the button tabbable.

Skip to content button

This should be relatively straight forward, this would include a button like the following

function SkipNavigation() {
  return (
    <a className="SkipNavigation" tabIndex={0} href="#main">
      Skip Navigation
    </a>
  );
}

.SkipNavigation {
  top: -200px;
  left: 0;
  position: absolute;
}

.SkipNavigation:focus {
  top: 0;
}

And then adding an id of main to either the outer-most <div> tag in files like this, or a better place if it allows us to make changes in the fewest number of places.

[fzaninotto]

Great idea! Would you like to work on a PR to implement this (on the next branch)?

[fzaninotto]

Fixed by #5772 and #5804