Skip to content

Commit c1fc66e

Browse files
authored
Merge pull request studio1902#136 from studio1902/feature/a11y-improvements
a11y improvements
2 parents e697ee8 + 39e6155 commit c1fc66e

10 files changed

Lines changed: 31 additions & 7 deletions

File tree

dev/app/Console/Commands/stubs/index.antlers.html.stub

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@desc The {{ collection_name }} index template.
44
#}}
55

6-
<main class="outer-grid">
6+
<main class="outer-grid" id="content">
77
<div class="fluid-container grid md:grid-cols-12 gap-12">
88
{{ collection:{{ handle }} sort="date:desc" paginate="true" limit="10" as="items" }}
99
{{ unless no_results }}

dev/app/Console/Commands/stubs/show.antlers.html.stub

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@desc The {{ collection_name }} show template.
44
#}}
55

6-
<main class="outer-grid">
6+
<main class="outer-grid" id="content">
77
<div class="fluid-container">
88
{{ partial:typography/h1 :content="title" }}
99
</div>

dev/resources/lang/en/strings.php

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,11 @@
3434
// Navigation
3535
'close' => 'Close',
3636
'menu' => 'Menu',
37+
'nav_close' => 'Close navigation',
38+
'nav_open' => 'Open navigation',
39+
'subnav_close' => 'Close sub navigation',
40+
'subnav_open' => 'Open sub navigation',
41+
'skip_to_content' => 'Skip to content',
3742

3843
// Other
3944
'dark_mode_on' => 'Enable dark mode',

dev/resources/views/default.antlers.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@desc The default template with an outer wrapper grid as defined in tailwind.config.js. It makes sure all blocks on a page get evenly spaced without having to worry about margins or paddings.
44
#}}
55

6-
<main class="outer-grid">
6+
<main class="outer-grid" id="content">
77
{{ page_builder scope="block" }}
88
{{ partial src="page_builder/{type}" }}
99
{{ /page_builder }}

dev/resources/views/errors/404.antlers.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313
404
1414
{{ /section:seo_title }}
1515

16-
<main class="outer-grid">
16+
<main class="outer-grid" id="content">
1717
<article class="fluid-container grid md:grid-cols-12 gap-y-4">
1818
<div class="col-span-12">
1919
{{ partial:typography/h1 class="mb-4" :content="configuration:404_title" }}
2020
{{ partial:typography/paragraph :content="configuration:404_text" }}
2121
</div>
2222
</article>
23-
</main>
23+
</main>

dev/resources/views/layout.antlers.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
{{ partial:snippets/browser_appearance }}
2020
</head>
2121
<body class="flex flex-col min-h-screen bg-white selection:bg-primary selection:text-white">
22+
{{ partial:navigation/skip_to_content }}
2223
{{ partial:components/toolbar }}
2324
2425
{{# Remove the following line if you want to use an addon for SEO. #}}

dev/resources/views/navigation/_main_desktop.antlers.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<li
55
{{ if children }}
66
x-data="{ subnavOpen: false }"
7+
@keyup.escape.window="subnavOpen = false"
78
{{ /if }}
89
class="relative leading-none"
910
>
@@ -16,6 +17,11 @@
1617
"
1718
{{ if children }}
1819
href="#"
20+
:aria-label="
21+
subnavOpen
22+
? '{{ trans:strings.subnav_close }}'
23+
: '{{ trans:strings.subnav_open }}'
24+
"
1925
@click.prevent="subnavOpen = !subnavOpen"
2026
{{ else }}
2127
href="{{ url }}"

dev/resources/views/navigation/_main_mobile.antlers.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@
99
<button
1010
@click.prevent="mobileNavOpen = !mobileNavOpen"
1111
class="fixed bottom-0 right-0 z-20 flex items-center justify-center w-16 h-16 mr-8 text-xs font-bold text-white mb-safe bg-primary"
12-
aria-label="Toggle menu"
12+
:aria-label="
13+
mobileNavOpen
14+
? '{{ trans:strings.nav_close }}'
15+
: '{{ trans:strings.nav_open }}'
16+
"
1317
x-text="mobileNavOpen ? '{{ trans:strings.close }}' : '{{ trans:strings.menu }}'"
1418
></button>
1519

@@ -32,6 +36,11 @@
3236
href="#"
3337
@click.prevent="mobileNavSubnavOpen = !mobileNavSubnavOpen"
3438
@click.outside="mobileNavSubnavOpen = false"
39+
:aria-label="
40+
mobileNavSubnavOpen
41+
? '{{ trans:strings.subnav_close }}'
42+
: '{{ trans:strings.subnav_open }}'
43+
"
3544
{{ else }}
3645
href="{{ url }}"
3746
{{ /if }}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<a class="fixed bottom-safe left-8 py-2 px-4 bg-primary text-white text-sm rounded shadow-lg font-bold translate-y-24 opacity-0 focus-visible:translate-y-0 focus-visible:opacity-100 motion-safe:transition-all" href="#content" tabindex="1">
2+
{{ trans:strings.skip_to_content }}
3+
</a>

dev/resources/views/search.antlers.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{{ trans:strings.search }}
99
{{ /section:seo_title }}
1010

11-
<main class="outer-grid">
11+
<main class="outer-grid" id="content">
1212
<section class="fluid-container grid grid-cols-12 gap-y-6">
1313
<div class="col-span-12 md:col-span-8 md:col-start-3">
1414
{{ partial:typography/h1 class="mb-2" content="{trans:strings.search_results_for} &quot;{get:q}&quot;" }}

0 commit comments

Comments
 (0)