v3.11.0

robdekort · robdekort · commit 53fd7999cc18 · 2021-10-09T14:37:08.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Release Notes
 
+## 3.11.0 (2021-10-09)
+
+### What's improved
+- a11y improvements. #136 by @robdekort
+
 ## 3.10.0 (2021-10-06)
 
 ### What's new
diff --git a/app/Console/Commands/stubs/index.antlers.html.stub b/app/Console/Commands/stubs/index.antlers.html.stub
@@ -3,7 +3,7 @@
 	@desc The {{ collection_name }} index template.
 #}}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     <div class="fluid-container grid md:grid-cols-12 gap-12">
         {{ collection:{{ handle }} sort="date:desc" paginate="true" limit="10" as="items" }}
             {{ unless no_results }}
diff --git a/app/Console/Commands/stubs/show.antlers.html.stub b/app/Console/Commands/stubs/show.antlers.html.stub
@@ -3,7 +3,7 @@
 	@desc The {{ collection_name }} show template.
 #}}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     <div class="fluid-container">
         {{ partial:typography/h1 :content="title" }}
     </div>
diff --git a/dev/CHANGELOG.md b/dev/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Release Notes
 
+## 3.11.0 (2021-10-09)
+
+### What's improved
+- a11y improvements. #136 by @robdekort
+
 ## 3.10.0 (2021-10-06)
 
 ### What's new
diff --git a/dev/README.md b/dev/README.md
@@ -22,12 +22,12 @@ Maintaining Peak demands a lot of my time and it probably saves you a lot. Your
 
 ![And a lot more additional bottles of oxygen.](https://cdn.studio1902.nl/assets/statamic-peak/statamic-peak-promo-06.png)
 
-<!-- statamic:hide -->
 ## Contributing
 Contributions and discussions are always welcome, no matter how large or small. Treat each other with respect. Read the [Code of Conduct](https://github.com/studio1902/statamic-peak/blob/main/.github/CODE_OF_CONDUCT.md).
 
+Read more about [how you can contribute](https://peak.studio1902.nl/other/contributing.html) here.
+
 ## License
 The MIT License (MIT). Please see [License File](LICENSE.md) for more information. Statamic itself is commercial software and has its' own license.
 
 The Peak branding is done by Jouke Zult from [Mistral Merkactivisten](https://mistralmerkactivisten.nl). Thank you so much!
-<!-- /statamic:hide -->
diff --git a/public/css/site.css b/public/css/site.css
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/site.js": "/js/site.js?id=3fa2b4e345dfacd0d582",
-    "/css/site.css": "/css/site.css?id=852ea8771cf2b48e9307"
+    "/css/site.css": "/css/site.css?id=f17a4b9830059af4d962"
 }
diff --git a/resources/lang/en/strings.php b/resources/lang/en/strings.php
@@ -34,6 +34,11 @@
     // Navigation
     'close'                             => 'Close',
     'menu'                              => 'Menu',
+    'nav_close'                         => 'Close navigation',
+    'nav_open'                          => 'Open navigation',
+    'subnav_close'                      => 'Close sub navigation',
+    'subnav_open'                       => 'Open sub navigation',
+    'skip_to_content'                   => 'Skip to content',
 
     // Other
     'dark_mode_on'                      => 'Enable dark mode',
diff --git a/resources/views/default.antlers.html b/resources/views/default.antlers.html
@@ -3,7 +3,7 @@
 	@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.
 #}}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     {{ page_builder scope="block" }}
         {{ partial src="page_builder/{type}" }}
     {{ /page_builder }}
diff --git a/resources/views/errors/404.antlers.html b/resources/views/errors/404.antlers.html
@@ -13,11 +13,11 @@
     404
 {{ /section:seo_title }}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     <article class="fluid-container grid md:grid-cols-12 gap-y-4">
         <div class="col-span-12">
             {{ partial:typography/h1 class="mb-4" :content="configuration:404_title" }}
             {{ partial:typography/paragraph :content="configuration:404_text" }}
         </div>
     </article>
-</main>
+</main>
diff --git a/resources/views/layout.antlers.html b/resources/views/layout.antlers.html
@@ -19,6 +19,7 @@
         {{ partial:snippets/browser_appearance }}
     </head>
     <body class="flex flex-col min-h-screen bg-white selection:bg-primary selection:text-white">
+        {{ partial:navigation/skip_to_content }}
         {{ partial:components/toolbar }}
 
         {{# Remove the following line if you want to use an addon for SEO. #}}
diff --git a/resources/views/navigation/_main_desktop.antlers.html b/resources/views/navigation/_main_desktop.antlers.html
@@ -4,6 +4,7 @@
             <li
                 {{ if children }}
                     x-data="{ subnavOpen: false }"
+                    @keyup.escape.window="subnavOpen = false"
                 {{ /if }}
                 class="relative leading-none"
             >
@@ -16,6 +17,11 @@
                     "
                     {{ if children }}
                         href="#"
+                        :aria-label="
+                            subnavOpen
+                                ? '{{ trans:strings.subnav_close }}'
+                                : '{{ trans:strings.subnav_open }}'
+                        "
                         @click.prevent="subnavOpen = !subnavOpen"
                     {{ else }}
                         href="{{ url }}"
diff --git a/resources/views/navigation/_main_mobile.antlers.html b/resources/views/navigation/_main_mobile.antlers.html
@@ -9,7 +9,11 @@
     <button
         @click.prevent="mobileNavOpen = !mobileNavOpen"
         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"
-        aria-label="Toggle menu"
+        :aria-label="
+        mobileNavOpen
+            ? '{{ trans:strings.nav_close }}'
+            : '{{ trans:strings.nav_open }}'
+        "
         x-text="mobileNavOpen ? '{{ trans:strings.close }}' : '{{ trans:strings.menu }}'"
     ></button>
 
@@ -32,6 +36,11 @@
                             href="#"
                             @click.prevent="mobileNavSubnavOpen = !mobileNavSubnavOpen"
                             @click.outside="mobileNavSubnavOpen = false"
+                            :aria-label="
+                            mobileNavSubnavOpen
+                                ? '{{ trans:strings.subnav_close }}'
+                                : '{{ trans:strings.subnav_open }}'
+                        "
                         {{ else }}
                             href="{{ url }}"
                         {{ /if }}
diff --git a/resources/views/navigation/_skip_to_content.antlers.html b/resources/views/navigation/_skip_to_content.antlers.html
@@ -0,0 +1,3 @@
+<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">
+    {{ trans:strings.skip_to_content }}
+</a>
diff --git a/resources/views/search.antlers.html b/resources/views/search.antlers.html
@@ -8,7 +8,7 @@
     {{ trans:strings.search }}
 {{ /section:seo_title }}
 
-<main class="outer-grid">
+<main class="outer-grid" id="content">
     <section class="fluid-container grid grid-cols-12 gap-y-6">
         <div class="col-span-12 md:col-span-8 md:col-start-3">
             {{ partial:typography/h1 class="mb-2" content="{trans:strings.search_results_for} &quot;{get:q}&quot;" }}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`{`
`2`	`2`	`"/js/site.js": "/js/site.js?id=3fa2b4e345dfacd0d582",`
`3`		`- "/css/site.css": "/css/site.css?id=852ea8771cf2b48e9307"`
	`3`	`+ "/css/site.css": "/css/site.css?id=f17a4b9830059af4d962"`
`4`	`4`	`}`