Files for my website bwc9876.dev

Makeke Mobile Nav Links Unfocusable

+14 -4
+1
src/components/ExtLink.astro
··· 2 2 export interface Props { 3 3 href: string; 4 4 class?: string; 5 + [x: string | number]: unknown; 5 6 } 6 7 7 8 const { href, class: className, ...rest } = Astro.props;
+2
src/components/IconLink.astro
··· 11 11 label: string; 12 12 placement: LabelPlacement; 13 13 overridePack?: string; 14 + [rest: string | number]: unknown; 14 15 } 15 16 16 17 const { href, label, placement, icon, size, overridePack, ...rest } = Astro.props; ··· 21 22 data-tooltip={placement !== "inside" ? label : null} 22 23 data-placement={placement !== "inside" ? placement : null} 23 24 href={href} 25 + {...rest} 24 26 > 25 27 <Icon width={size} height={size} name={`${overridePack ?? "bi"}:${icon}`} /> 26 28 {placement === "inside" && label}
+8 -1
src/components/Socials.astro
··· 3 3 4 4 export interface Props { 5 5 labelPlacement: LabelPlacement; 6 + makeLinksUnfocusable?: boolean; 6 7 [rest: string | number | symbol]: unknown; 7 8 } 8 9 9 - const { labelPlacement, ...rest } = Astro.props; 10 + const { labelPlacement, makeLinksUnfocusable, ...rest } = Astro.props; 10 11 --- 11 12 12 13 <ul {...rest}> ··· 14 15 <IconLink 15 16 icon="github" 16 17 size={25} 18 + tabindex={makeLinksUnfocusable ? "-1" : undefined} 17 19 href="https://github.com/Bwc9876" 18 20 label="GitHub" 19 21 placement={labelPlacement} ··· 23 25 <IconLink 24 26 icon="twitter" 25 27 size={25} 28 + tabindex={makeLinksUnfocusable ? "-1" : undefined} 26 29 href="https://twitter.com/Bwc9876" 27 30 label="Twitter" 28 31 placement={labelPlacement} ··· 32 35 <IconLink 33 36 icon="instagram" 34 37 size={25} 38 + tabindex={makeLinksUnfocusable ? "-1" : undefined} 35 39 href="https://www.instagram.com/bwc6789/" 36 40 label="Instagram" 37 41 placement={labelPlacement} ··· 41 45 <IconLink 42 46 icon="linkedin" 43 47 size={25} 48 + tabindex={makeLinksUnfocusable ? "-1" : undefined} 44 49 href="https://www.linkedin.com/in/bwc9876" 45 50 label="Linkedn" 46 51 placement={labelPlacement} ··· 50 55 <IconLink 51 56 icon="paypal" 52 57 size={25} 58 + tabindex={makeLinksUnfocusable ? "-1" : undefined} 53 59 href="https://paypal.me/bwc9876" 54 60 label="Paypal" 55 61 placement={labelPlacement} ··· 60 66 icon="patreon" 61 67 overridePack="mdi" 62 68 size={25} 69 + tabindex={makeLinksUnfocusable ? "-1" : undefined} 63 70 href="https://patreon.com/Bwc9876" 64 71 label="Patreon" 65 72 placement={labelPlacement}
+3 -3
src/layouts/Layout.astro
··· 86 86 <a href="/projects">Projects</a> 87 87 </li> 88 88 </ul> 89 - <ul aria-hidden class="mobile-socials"> 89 + <ul aria-hidden="true" class="mobile-socials"> 90 90 <li> 91 91 <details role="list" dir="rtl"> 92 - <summary aria-haspopup="listbox" role="link">Socials</summary> 93 - <Socials role="listbox" labelPlacement="inside" /> 92 + <summary tabindex="-1" aria-haspopup="listbox" role="link">Socials</summary> 93 + <Socials makeLinksUnfocusable role="listbox" labelPlacement="inside" /> 94 94 </details> 95 95 </li> 96 96 </ul>