<选择> - 编程之家

如何解决<选择>

背景

我们正在使用@axe-core/react来处理React应用程序中的ARIA可访问性。默认情况下，根据axe-core / react，在页面重新加载时，不会报告任何问题，但是在Select单击时，我们面临着各种可访问性问题。

问题

严重的：页面必须具有绕过重复的块的方法 https://dequeuniversity.com/rules/axe/4.0/bypass?application=axeAPI

中等：文档必须具有一个主要地标 https://dequeuniversity.com/rules/axe/4.0/landmark-one-main?application=axeAPI

中等：所有页面内容必须包含在地标中 https://dequeuniversity.com/rules/axe/4.0/region?application=axeAPI

除了问题，还有2个问题：

适中：页面必须包含一级标题 https://dequeuniversity.com/rules/axe/4.0/page-has-heading-one?application=axeAPI

严重：元素必须具有足够的颜色对比度https://dequeuniversity.com/rules/axe/4.0/color-contrast?application=axeAPI

代码

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"));

观察

与显示的代码一样，当显示下拉菜单时，我可以通过按下键盘上的键并通过键盘上的键来浏览菜单项（选项），从可访问性的角度来看，这很重要吗？
单击“选择并检查网页的HTML元素”后，我可以看到两件事：首先，我的主要内容被隐藏<div id="root" aria-hidden="true">，其次，{{1 }}'包含此下拉内容。并且在<div>之外解释问题role='presentation以及<main>和All page content must be contained by landmarks
除了先前的观察之外，我尝试将Document must have one main landmark添加到Select元素中，并删除了问题Page must contain a level-one heading，但是我不知道这是否会产生负面影响以及什么负面影响
从我在互联网上阅读的有关此主题的内容来看，我发现这种情况（选择，下拉）非常具体并且可以发展。

问题

是否有适当的方法来处理MenuProps={{ disablePortal: true }}元素中提到的问题？怎么样？
这是否是一种折衷方案（不必/不能摆脱所有问题）？
如果2.是true，那么轴中心/反应工具的bug是吗？

请告知我是否可以提供更多详细信息或更新一些内容。

谢谢。

编辑

Github复制库：https://github.com/StefanZivkovic/aria-accessibility-problems。从cmd All page content must be contained by landmarks进行操作时，导航至Select，先执行git clone，然后执行cd aria-accessibility-problems，然后等待服务器启动。如果您使用VS代码，请从cmd执行npm i打开文件并检查代码。

顺便说一句，至少在这个简单的例子上，我找到了克服npm start的方法。该特定问题是由code .及其元素Page must have means to bypass repeated blocks，react-router-dom和Link引起的。对某些人可能有用。