Files for my website
bwc9876.dev
Makeke Mobile Nav Links Unfocusable
+14
-4
+1
src/components/ExtLink.astro
+1
src/components/ExtLink.astro
+2
src/components/IconLink.astro
+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
+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
+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>