a11y fixes

arackaf · Jan 31, 2023 · c96c4f0 · c96c4f0 · vercel · Jan 31, 2023
1 parent 1550bb0
commit c96c4f0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/svelte-kit/src/routes/(logged-in)/books/menuBar/MenuBar.svelte b/svelte-kit/src/routes/(logged-in)/books/menuBar/MenuBar.svelte
@@ -43,6 +43,7 @@
       <button
         style="font-size: 1.4rem; align-self: center"
         class="mobile-menu-button margin-right raw-button icon-button"
+        aria-label="Mobile menu toggle"
         on:click={() => (mobileMenuOpen = true)}
       >
         <i class="far fa-bars" />

diff --git a/svelte-kit/src/routes/(logged-in)/books/menuBar/PagingButtons.svelte b/svelte-kit/src/routes/(logged-in)/books/menuBar/PagingButtons.svelte
@@ -8,12 +8,20 @@
   $: canPageDown = page > 1;
   $: canPageOne = page > 1;
   $: canPageLast = page < totalPages;
+
+  $: pageDownHref = $changeFilter.pageTo(page - 1, totalPages);
+  $: pageUpHref = $changeFilter.pageTo(page + 1, totalPages);
+  $: pageLastHref = $changeFilter.pageTo(totalPages, totalPages);
 </script>
 
 <div style="display: flex; margin-right: 5px; align-items: center">
   <div class="btn-group">
-    <a href={$changeFilter.pageTo(1)} class:disabled={!canPageOne} class="btn btn-default page-edge"><i class="fal fa-angle-double-left" /></a>
-    <a href={$changeFilter.pageTo(page - 1, totalPages)} class:disabled={!canPageDown} class="btn btn-default page" style="margin-right: 5px">
+    <a href={$changeFilter.pageTo(1)} class:disabled={!canPageOne} class="btn btn-default page-edge">
+      <span class="sr">Go to page 1</span>
+      <i class="fal fa-angle-double-left" />
+    </a>
+    <a href={pageDownHref} class:disabled={!canPageDown} class="btn btn-default page" style="margin-right: 5px">
+      <span class="sr">Go a page down</span>
       <i class="fal fa-angle-left" />
     </a>
   </div>
@@ -32,10 +40,12 @@
   </div>
 
   <div class="btn-group">
-    <a href={$changeFilter.pageTo(page + 1, totalPages)} class:disabled={!canPageUp} class="btn btn-default page" style="margin-left: 5px">
+    <a href={pageUpHref} class:disabled={!canPageUp} class="btn btn-default page" style="margin-left: 5px">
+      <span class="sr">Go a page up</span>
       <i class="fal fa-angle-right" />
     </a>
-    <a href={$changeFilter.pageTo(totalPages, totalPages)} class:disabled={!canPageLast} class="btn btn-default page-edge">
+    <a href={pageLastHref} class:disabled={!canPageLast} class="btn btn-default page-edge">
+      <span class="sr">Go to last page</span>
       <i class="fal fa-angle-double-right" />
     </a>
   </div>

diff --git a/svelte-kit/src/styles/site-styles.scss b/svelte-kit/src/styles/site-styles.scss
@@ -702,3 +702,15 @@ select {
 canvas.book-preview {
   display: block;
 }
+
+.sr {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  clip-path: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}