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:

1
export default function List() {
2
  return (
3
    <ul role="listbox" aria-label="color space">
4
      <li>
5
        <a
6
          role="option"
7
          aria-selected="true"
8
          aria-current="page"
9
          rel="alternate"
10
          href="https://priest.vercel.app/color?mode=rgb&r=255&g=0&b=255"
11
        >
12
          <code>
13
            <span>rgb(</span>
14
            <span>255</span> <span>68</span> <span>249</span>
15
            <span>)</span>
16
          </code>
17
        </a>
18
      </li>
19
    </ul>
20
  );
21
}

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>