Vercel Toolbar Accessibility is Inconsistent

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>

Thank you for sharing this feedback, @r-sp!

I’ll pass this on internally, and will loop back with any further comments from the team.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.