Skip to content

Commit ce901e2

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1596 from bhavya-tyagi20/fix/accessibility-navbar
Fix:Accessibility Issues
2 parents b98f40b + b9df622 commit ce901e2

6 files changed

Lines changed: 40 additions & 23 deletions

File tree

‎src/components/header/header.css‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -44,17 +44,17 @@
4444
background: linear-gradient(
4545
90deg,
4646
#e44d26 0%,
47-
/* orange */ #f16529 30%,
48-
/* lighter orange */ #d16ba5 60%,
49-
/* pink */ #6a5acd 100% /* purple */
47+
#f16529 30%,
48+
#d16ba5 60%,
49+
#6a5acd 100%
5050
);
5151
background-clip: text;
5252
-webkit-background-clip: text;
5353
-webkit-text-fill-color: transparent;
5454
transition: background 0.3s ease-in-out;
55-
text-align: center; /* Center the heading text */
56-
width: 100%; /* Ensure it takes full width for proper centering */
57-
margin-top: 2rem; /* Push heading down for better spacing */
55+
text-align: center;
56+
width: 100%;
57+
margin-top: 2rem;
5858
}
5959

6060
[data-theme="dark"] .chh__header-content h1 {
@@ -65,17 +65,17 @@
6565
background: linear-gradient(
6666
135deg,
6767
#a1c4fd 0%,
68-
/* soft sky blue (pops gently) */ #c2e9fb 25%,
69-
/* pastel cyan */ #d4a5f9 60%,
70-
/* muted lavender */ #fbc2eb 100% /* soft rose pink */
68+
#c2e9fb 25%,
69+
#d4a5f9 60%,
70+
#fbc2eb 100%
7171
);
7272
background-clip: text;
7373
-webkit-background-clip: text;
7474
-webkit-text-fill-color: transparent;
7575
transition: background 0.3s ease-in-out;
76-
text-align: center; /* Center the heading text */
77-
width: 100%; /* Ensure it takes full width for proper centering */
78-
margin-top: 2rem; /* Push heading down for better spacing */
76+
text-align: center;
77+
width: 100%;
78+
margin-top: 2rem;
7979
}
8080

8181
.chh__header-content p {
@@ -85,13 +85,12 @@
8585
text-align: justify;
8686
line-height: 30px;
8787
margin-top: 1.5rem;
88-
color: #333; /* Light mode text */
88+
color: #333;
8989
transition: color 0.3s ease-in-out;
9090
}
9191

92-
/* Override paragraph color in dark mode */
9392
[data-theme="dark"] .chh__header-content p {
94-
color: #ccc; /* Softer white for dark mode */
93+
color: #ccc;
9594
}
9695

9796
html.theme-dark .chh__header-content p {
@@ -128,6 +127,12 @@ html.theme-dark .chh__header-content p {
128127
justify-content: center;
129128
}
130129

130+
/* ✅ ADDED ONLY ACCESSIBILITY FIX */
131+
.chh__header-content__input--button:focus-visible {
132+
outline: 2px solid #4c9ffe;
133+
outline-offset: 3px;
134+
}
135+
131136
.chh__header-content__input--button::after {
132137
content: "";
133138
position: absolute;
@@ -151,7 +156,7 @@ html.theme-dark .chh__header-content p {
151156
}
152157

153158
.chh__header-content__input--button:hover {
154-
transform: scale(1.03); /* very subtle lift */
159+
transform: scale(1.03);
155160
text-decoration: none;
156161
}
157162

@@ -336,4 +341,4 @@ html.theme-dark .chh__header-content p {
336341
.navbar__title {
337342
display: none;
338343
}
339-
}
344+
}

‎src/components/navbar/NavbarIcon.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,9 @@ export default function NavbarIcon(props: NavbarIconProps) {
3535
// Handle dashboard usage
3636
if (isDashboardProps(props)) {
3737
const { icon, text, active, onClick } = props;
38+
3839
return (
39-
<div
40+
<button
4041
className={`navbar-icon-item ${active ? "active" : ""}`}
4142
onClick={onClick}
4243
role="button"
@@ -49,7 +50,7 @@ export default function NavbarIcon(props: NavbarIconProps) {
4950
>
5051
<span className="navbar-icon">{icon}</span>
5152
<span className="navbar-text">{text}</span>
52-
</div>
53+
</button>
5354
);
5455
}
5556

@@ -66,4 +67,4 @@ export default function NavbarIcon(props: NavbarIconProps) {
6667
<IconComponent size={18} style={{ verticalAlign: "middle" }} />
6768
</span>
6869
);
69-
}
70+
}

‎src/components/scroll/bottom-to-top.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default function ScrollBottomToTop() {
3131
<div className="scroll-to-top">
3232
{isVisible && (
3333
<button
34+
aria-label="Scroll to top"
3435
onClick={scrollToTop}
3536
className="fixed right-5 bottom-5 z-50 cursor-pointer rounded-full border-none bg-gray-700 p-3 text-white shadow-lg transition-opacity duration-300 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
3637
style={{ backgroundColor: "var(--ifm-color-primary)" }}

‎src/components/ui/button.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ function Button({
4444
}: React.ComponentProps<"button"> &
4545
VariantProps<typeof buttonVariants> & {
4646
asChild?: boolean;
47-
}) {
47+
} &
48+
React.ButtonHTMLAttributes<HTMLButtonElement>) {
4849
const Comp = asChild ? Slot : "button";
4950

5051
return (
@@ -56,4 +57,4 @@ function Button({
5657
);
5758
}
5859

59-
export { Button, buttonVariants };
60+
export { Button, buttonVariants };

‎src/theme/Footer/Layout/index.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export default function FooterLayout(): ReactNode {
121121
<div className="logo-container">
122122
<img
123123
src="/img/logo.png"
124-
alt="recodehive"
124+
alt="RecodeHive Logo"
125125
className="footer-logo-img"
126126
/>
127127
</div>
@@ -410,6 +410,8 @@ export default function FooterLayout(): ReactNode {
410410
to="https://github.com/recodehive"
411411
className="social-link github"
412412
aria-label="GitHub"
413+
target="_blank"
414+
rel="noopener noreferrer"
413415
>
414416
<svg viewBox="0 0 24 24" fill="currentColor">
415417
<path d="M12 0C5.37 0 0 5.37 0 12C0 17.31 3.435 21.795 8.205 23.385C8.805 23.49 9.03 23.13 9.03 22.815C9.03 22.53 9.015 21.585 9.015 20.58C6 21.135 5.22 19.845 4.98 19.17C4.845 18.825 4.26 17.76 3.75 17.475C3.33 17.25 2.73 16.695 3.735 16.68C4.68 16.665 5.355 17.55 5.58 17.91C6.66 19.725 8.385 19.215 9.075 18.9C9.18 18.12 9.495 17.595 9.84 17.295C7.17 16.995 4.38 15.96 4.38 11.37C4.38 10.065 4.845 8.985 5.61 8.145C5.49 7.845 5.07 6.615 5.73 4.965C5.73 4.965 6.735 4.65 9.03 6.195C9.99 5.925 11.01 5.79 12.03 5.79C13.05 5.79 14.07 5.925 15.03 6.195C17.325 4.635 18.33 4.965 18.33 4.965C18.99 6.615 18.57 7.845 18.45 8.145C19.215 8.985 19.68 10.05 19.68 11.37C19.68 15.975 16.875 16.995 14.205 17.295C14.64 17.67 15.015 18.39 15.015 19.515C15.015 21.12 15 22.41 15 22.815C15 23.13 15.225 23.505 15.825 23.385C18.2072 22.5807 20.2772 21.0497 21.7437 19.0074C23.2101 16.965 23.9993 14.5143 24 12C24 5.37 18.63 0 12 0Z" />
@@ -420,6 +422,8 @@ export default function FooterLayout(): ReactNode {
420422
to="https://x.com/sanjay_kv_"
421423
className="social-link twitter"
422424
aria-label="Twitter"
425+
target="_blank"
426+
rel="noopener noreferrer"
423427
>
424428
<svg viewBox="0 0 24 24" fill="currentColor">
425429
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
@@ -430,6 +434,8 @@ export default function FooterLayout(): ReactNode {
430434
to="https://www.instagram.com/nomad_brains/"
431435
className="social-link instagram"
432436
aria-label="Instagram"
437+
target="_blank"
438+
rel="noopener noreferrer"
433439
>
434440
<svg viewBox="0 0 24 24" fill="currentColor">
435441
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
@@ -440,6 +446,8 @@ export default function FooterLayout(): ReactNode {
440446
to="https://www.linkedin.com/in/sanjay-k-v/"
441447
className="social-link linkedin"
442448
aria-label="LinkedIn"
449+
target="_blank"
450+
rel="noopener noreferrer"
443451
>
444452
<svg viewBox="0 0 24 24" fill="currentColor">
445453
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />

‎src/theme/Footer/Logo/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default function FooterLogo({ logo }: Props): ReactNode {
3131
href={logo.href}
3232
className={styles.footerLogoLink}
3333
target={logo.target}
34+
aria-label={logo.alt}
3435
>
3536
<LogoImage logo={logo} />
3637
</Link>

0 commit comments

Comments
 (0)