React: How to implement accessibility in React navigation?

1function Navigation() {
2  return (
3    <nav aria-label="Main navigation">
4      <ul>
5        <li><a href="/">Home</a></li>
6        <li><a href="/about">About</a></li>
7        <li><a href="/contact">Contact</a></li>
8      </ul>
9    </nav>
10  );
11}

1function SkipLink() {
2  return (
3    <a href="#main-content" className="skip-link">
4      Skip to main content
5    </a>
6  );
7}
8
9// CSS
10.skip-link {
11  position: absolute;
12  left: -9999px;
13}
14
15.skip-link:focus {
16  left: 10px;
17  top: 10px;
18}

1function Breadcrumbs({ items }) {
2  return (
3    <nav aria-label="Breadcrumb">
4      <ol>
5        {items.map((item, index) => (
6          <li key={item.path}>
7            {index === items.length - 1 ? (
8              <span aria-current="page">{item.label}</span>
9            ) : (
10              <a href={item.path}>{item.label}</a>
11            )}
12          </li>
13        ))}
14      </ol>
15    </nav>
16  );
17}

1function Router() {
2  const location = useLocation();
3  const headingRef = useRef(null);
4
5  useEffect(() => {
6    headingRef.current?.focus();
7  }, [location.pathname]);
8
9  return (
10    <main id="main-content" tabIndex={-1} ref={headingRef}>
11      <Routes>
12        <Route path="/" element={<Home />} />
13        <Route path="/about" element={<About />} />
14      </Routes>
15    </main>
16  );
17}