Both of your initial mistakes are identical. The table pagination is using a MUI Select Component, which is causing the issue in both cases. To test the grid, I utilized a demo page from MUI Data Grid.
https://mui.com/x/react-data-grid/pagination/
The coding for the MUI Select appears unconventional:
<input aria-invalid="false" aria-hidden="true" tabindex="-1"
class="MuiSelect-nativeInput css-1k3x8v3" value="5">
This coding includes aria-hidden="true", making the <input> hidden from screen readers and other assistive technologies. Additionally, it features tabindex="-1", preventing keyboard users from tabbing to it. Consequently, users cannot focus on the <input>. Although this non-standard approach confuses the WebAIM WAVE tool, the error can be disregarded.
For the MUI Select, the <input> should ideally have display:none instead of aria-hidden and tabindex. This adjustment would eliminate the WAVE error while preserving the intended functionality. It may be advisable to report this issue to MUI.
Your third error related to MUI Tabs could not be reproduced when testing with https://mui.com/material-ui/react-tabs/. The basic structure of the tabs is as follows:
<div aria-label="basic tabs example" role="tablist">
<button role="tab" aria-selected="true" id="simple-tab-0">Item One</button>
<button role="tab" aria-selected="false" id="simple-tab-1">Item Two</button>
<button role="tab" aria-selected="false" id="simple-tab-2">Item Three</button>
</div>
...
<div role="tabpanel" id="simple-tabpanel-0" aria-labelledby="simple-tab-0"></div>
<div role="tabpanel" id="simple-tabpanel-1" aria-labelledby="simple-tab-1" hidden=""></div>
<div role="tabpanel" id="simple-tabpanel-2" aria-labelledby="simple-tab-2" hidden=""></div>
Each <button> is assigned an ID (such as "simple-tab-0", 1, 2), and later, each
<div role="tabpanel">
has
aria-labelledby that corresponds to one of the button IDs. This standard practice explains why the demo page does not generate WAVE errors.
In the provided screenshot, the issue arises where the third <div> with
aria-labelledby="simple-tab-2"
is erroneously highlighted. If this occurs, it indicates that the corresponding <button> with
id="simple-tab-2" is missing.