Skip to content

Fix accessibility: heading hierarchy and color contrast issues #8372

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

Open
deadlock1997 wants to merge 1 commit into
base: main
Choose a base branch
from
+9 −9
Open

Fix accessibility: heading hierarchy and color contrast issues #8372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 7 additions & 7 deletions src/components/Layout/HomeContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,9 +297,9 @@ export function HomeContent() {
<div className="absolute inset-0 bg-gradient-right" />
<div className="bg-wash relative h-14 w-full" />
<div className="relative flex items-start justify-center flex-col flex-1 pb-16 pt-5 gap-3 px-5 lg:px-10 lg:pt-8">
<h4 className="leading-tight text-primary font-semibold text-3xl lg:text-4xl">
<h3 className="leading-tight text-primary font-semibold text-3xl lg:text-4xl">
Stay true to the web
</h4>
</h3>
<p className="lg:text-xl leading-normal text-secondary">
People expect web app pages to load fast. On the server,
React lets you start streaming HTML while you’re still
Expand Down Expand Up @@ -383,9 +383,9 @@ export function HomeContent() {
</div>
</div>
<div className="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8">
<h4 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
<h3 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
Go truly native
</h4>
</h3>
<p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
People expect native apps to look and feel like their
platform.{' '}
Expand Down Expand Up @@ -1114,9 +1114,9 @@ function SearchableVideoList({ videos }) {
noPadding={true}
contentMarginTop="72px"
height="30rem">
<h1 className="mx-4 mb-1 font-bold text-3xl text-primary">
<h2 className="mx-4 mb-1 font-bold text-3xl text-primary">
React Videos
</h1>
</h2>
<p className="mx-4 mb-0 leading-snug text-secondary text-xl">
A brief history of React
</p>
Expand Down Expand Up @@ -1315,7 +1315,7 @@ function BrowserChrome({children, hasPulse, hasRefresh, domain, path}) {
/>
</svg>

<span className="text-gray-30">
<span className="text-gray-50 dark:text-gray-30">
{domain}
{path != null && '/'}
</span>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Layout/TopNav/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,10 +312,10 @@ export default function TopNav({
<button
type="button"
className={cn(
'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-30 rounded-full align-middle text-base'
'flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-50 dark:text-gray-30 rounded-full align-middle text-base'
)}
onClick={onOpenSearch}>
<IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
<IconSearch className="align-middle me-3 text-gray-50 dark:text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
Search
<span className="hidden ms-auto sm:flex item-center me-1">
<Kbd data-platform="mac">⌘</Kbd>
Expand Down
Loading