Skip to content

fix(a11y): add main landmark, unique nav labels, and fix color contrast #7894

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Rishabh037 wants to merge 3 commits into from
Closed

fix(a11y): add main landmark, unique nav labels, and fix color contrast #7894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0a4dc93
fix(a11y): add main landmark, unique nav labels, and fix color contrast
Rishabh037 Mar 1, 2026
a14ba68
style: fix prettier formatting in Navigation.jsx
Rishabh037 Mar 1, 2026
ec17d19
fix: align react-test-renderer with react v17
Rishabh037 Mar 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@
"postcss-loader": "^8.2.0",
"prettier": "^3.8.1",
"react-refresh": "^0.18.0",
"react-test-renderer": "^17.0.2",
"react-test-renderer": "17.0.2",
Copy link
Member

@alexander-akait alexander-akait Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert it

"redirect-webpack-plugin": "^1.0.0",
"remark": "^15.0.1",
"remark-autolink-headings": "7.0.1",
Expand Down
1 change: 1 addition & 0 deletions src/components/Dropdown/Dropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export default class Dropdown extends Component {

return (
<nav
aria-label="Secondary"
className={`dropdown ${className}`}
ref={(el) => (this.dropdown = el)}
onMouseOver={this._toggle.bind(this, true)}
Expand Down
9 changes: 9 additions & 0 deletions src/components/Footer/Footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,3 +115,12 @@
.footer__top p + p {
margin-top: 18px;
}

.footer__top p a {
color: getColor(denim);
text-decoration: underline;

&:hover {
color: getColor(elephant);
}
}
5 changes: 4 additions & 1 deletion src/components/Navigation/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,10 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
<Link to="/" className="md:mr-auto">
<Logo />
</Link>
<nav className="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px] md:items-center">
<nav
aria-label="Primary"
className="hidden md:inline-grid md:grid-flow-col md:gap-x-[18px] md:items-center"
>
{links.map(({ content, url, isActive, ariaLabel }) => (
<NavigationItem
key={url}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sidebar/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function Sidebar({ className = "", pages, currentPage }) {
let group;

return (
<nav className={`sidebar ${className}`}>
<nav aria-label="Documentation" className={`sidebar ${className}`}>
<div className="sidebar__inner">
<div className="relative z-0 bg-white dark:bg-gray-100 ">
<label htmlFor="docs-version" className="sr-only">
Expand Down
1 change: 1 addition & 0 deletions src/components/SidebarMobile/SidebarMobile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default class SidebarMobile extends Component {

return (
<nav
aria-label="Mobile"
className={`sidebar-mobile${openMod}`}
ref={(ref) => (this._container = ref)}
onTouchStart={this._handleTouchStart}
Expand Down
79 changes: 40 additions & 39 deletions src/components/Site/Site.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,45 +255,46 @@ function Site(props) {
toggle={_toggleSidebar}
/>
) : null}

<Routes>
<Route index element={<Splash />} />
<Route
element={
<Container className="site__content">
<Outlet />
</Container>
}
>
<Route path="app-shell" element={<Fragment />} />
{pages.map((page) => {
const path = page.path.replace("src/content/", "");
const { previous, next } = getAdjacentPages(
sidebarPages,
page,
"url",
);
return (
<Route
key={page.url}
path={page.url}
element={
<PageElement
currentPage={location.pathname}
sidebarPages={sidebarPages}
page={page}
next={next}
previous={previous}
import={props.import}
path={path}
/>
}
/>
);
})}
<Route path="*" element={<PageNotFound />} />
</Route>
</Routes>
<main>
<Routes>
<Route index element={<Splash />} />
<Route
element={
<Container className="site__content">
<Outlet />
</Container>
}
>
<Route path="app-shell" element={<Fragment />} />
{pages.map((page) => {
const path = page.path.replace("src/content/", "");
const { previous, next } = getAdjacentPages(
sidebarPages,
page,
"url",
);
return (
<Route
key={page.url}
path={page.url}
element={
<PageElement
currentPage={location.pathname}
sidebarPages={sidebarPages}
page={page}
next={next}
previous={previous}
import={props.import}
path={path}
/>
}
/>
);
})}
<Route path="*" element={<PageNotFound />} />
</Route>
</Routes>
</main>
Copy link
Member

@alexander-akait alexander-akait Mar 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have the main, it is not a good to have multiple mains

<Footer />
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/styles/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@apply bg-transparent lg:bg-gray-500 transition duration-200 !important;
}
.DocSearch-Button-Placeholder {
@apply hidden lg:font-light lg:text-sm lg:block lg:text-gray-200 lg:dark:text-gray-300 transition duration-200 !important;
@apply hidden lg:font-light lg:text-sm lg:block lg:text-gray-100 lg:dark:text-gray-300 transition duration-200 !important;
}
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
@apply lg:text-gray-100 !important;
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11939,7 +11939,7 @@ react-shallow-renderer@^16.13.1:
object-assign "^4.1.1"
react-is "^16.12.0 || ^17.0.0 || ^18.0.0"

react-test-renderer@^17.0.2:
react-test-renderer@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
Expand Down
Loading