during the deployment preview, i used to test the project with the toolbar, mainly looking for some errors. but most of the errors came from accessibility audit.
when i checked the errors from critical and serious tabs, i saw a pattern of errors, some of my components are common, maybe there are errors related to the way aria rules are indexed.
example:
export default function List() {
return (
<ul role="listbox" aria-label="color space">
<li>
<a
role="option"
aria-selected="true"
aria-current="page"
rel="alternate"
href="https://priest.vercel.app/color?mode=rgb&r=255&g=0&b=255"
>
<code>
<span>rgb(</span>
<span>255</span> <span>68</span> <span>249</span>
<span>)</span>
</code>
</a>
</li>
</ul>
);
}
Certain ARIA roles must contain particular children: mentioned above list
Certain ARIA roles must be contained by particular parents: all children inside above list
<li>
elements must be contained in a<ul>
or<ol>