Background

We are using @axe-core/react to work on ARIA accessibility in react application. By default, on page reload no issues are reported, but on Select click we are facing various issues with accessibility, according to axe-core/react.

Problems

serious: Page must have means to bypass repeated blocks https://dequeuniversity.com/rules/axe/4.0/bypass?application=axeAPI

moderate: Document must have one main landmark https://dequeuniversity.com/rules/axe/4.0/landmark-one-main?application=axeAPI

moderate: All page content must be contained by landmarks https://dequeuniversity.com/rules/axe/4.0/region?application=axeAPI

In addition to problems, there are 2 more:

moderate: Page must contain a level-one heading https://dequeuniversity.com/rules/axe/4.0/page-has-heading-one?application=axeAPI

serious: Elements must have sufficient color contrast https://dequeuniversity.com/rules/axe/4.0/color-contrast?application=axeAPI

Code

import React from "react";
import ReactDOM from "react-dom";
import axe from "@axe-core/react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import { MenuItem, Select, InputLabel } from "@material-ui/core";

const BypassRepeatedBlocks = () => (
  <div aria-hidden="true">
    <a href="#select-content" style={{ display: "none" }}>
      bypass repeated blocks
    </a>
  </div>
);
const NavigationSample = () => (
  // we must have <nav> here in order to put content inside landmark. Otherwise we would get issue.
  <nav>
    <ul>
      <li>
        <Link to="/home">Home</Link>
      </li>
    </ul>
  </nav>
);

const HomePage = () => <div></div>;

const App = () => (
  // BrowserRouter, Route and <Link> (NavigationSample) are the cause of bypass repeated blocks issue
  <BrowserRouter>
    {/**but with BypassRepeatedBlocks portion of code, it can be solved  */}
    <BypassRepeatedBlocks />
    <NavigationSample />

    <main>
      <Route path="/home" component={HomePage} />
      {/**without <h1> there is heading issue on page loading */}
      <h1>H1</h1>

      <InputLabel id="my-input" style={{ color: "black" }}>
        Sort
      </InputLabel>
      <Select
        id="select-content"
        labelId="my-input"
        value="item1"
        style={{ width: "200px" }}
      >
        <MenuItem key="item1" value="item1">
          item1
        </MenuItem>
        <MenuItem key="item2" value="item2">
          item2
        </MenuItem>
      </Select>
    </main>
  </BrowserRouter>
);
axe(React, ReactDOM, 1000);
ReactDOM.render(<App />, document.getElementById("root"));

Observations

• As with shown code, when drop-down menu is shown I can navigate through menuitems (options) with key down and key up from keyboard, and that is what is important, from accessibility point of view, right?
• After clicking on Select and inspecting HTML elements of web page, I can see two things: first, that my main content gets hidden <div id="root" aria-hidden="true">, and second that new <div> is generated with role='presentation' which contains this drop-down content. And it is outside of <main> which sort of explains the issue All page content must be contained by landmarks, as well as Document must have one main landmark and Page must contain a level-one heading
• In addition to previous observation, I tried to add MenuProps={{ disablePortal: true }} to Select element, and issue All page content must be contained by landmarks was removed but i don't know if and what negative impacts this can have
• from what i read on internet on this topic, I find this case (select, drop-down) to be very specific and advance.

Questions

1. Is there a proper way to handle mentioned issues for Select element? How?
2. Is this one of the situations to be considered as a trade-off (don't have to / can't get rid of all issues)?
3. If 2. is true, is then that bug to axe-core/react tool?

Let me know if I can provide more details, or update some content.

Thanks.

EDIT

Github repo for reproduction: https://github.com/StefanZivkovic/aria-accessibility-problems. When you git clone it from cmd, navigate to cd aria-accessibility-problems, execute npm i, thennpm start and wait for server to start. If you use VS code, from cmd do code . to open the files and check the code if you want.

By the way, i found how to overcome Page must have means to bypass repeated blocks, at least on this simple example. That particular issue was caused by react-router-dom, and its elements, Link, BrowserRouter and Route. Might be useful for some.