Merge pull request #963 from centerofci/keyboard_pagination292

Keyboard Accessibility Pagination Component
mathesar-foundation · Feb 3, 2022 · d1bb077 · d1bb077
2 parents 1900452 + 2bf712a
commit d1bb077
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 25 deletions.
diff --git a/mathesar_ui/src/component-library/icon/Icon.svelte b/mathesar_ui/src/component-library/icon/Icon.svelte
@@ -61,11 +61,6 @@
   aria-label={label}
   role={label ? 'img' : 'presentation'}
   {...$$restProps}
-  on:click
-  on:mouseover
-  on:focus
-  on:mouseout
-  on:blur
 >
   {#if Array.isArray(path)}
     {#each path as entry (entry)}

diff --git a/mathesar_ui/src/component-library/pagination/Pagination.scss b/mathesar_ui/src/component-library/pagination/Pagination.scss
@@ -10,12 +10,26 @@ ul.pagination {
     margin: 0 2px;
 
     a,
-    span {
+    button {
       padding: 5px 3px;
       min-width: 26px;
       display: inline-block;
       text-align: center;
       cursor: pointer;
+
+      &:hover {
+        background-color: #aeb9be21;
+      }
+
+      &:disabled {
+        color: #ccc;
+        background-color: inherit;
+        cursor: not-allowed;
+      }
+    }
+
+    button:focus {
+      outline: #39a0f5 solid 1px;
     }
 
     .page {
@@ -25,7 +39,10 @@ ul.pagination {
       background: #fff;
     }
 
-    span {
+    button {
+      border: none;
+      background: inherit;
+
       .ellipsis {
         color: #afafaf;
       }

diff --git a/mathesar_ui/src/component-library/pagination/Pagination.svelte b/mathesar_ui/src/component-library/pagination/Pagination.svelte
@@ -31,6 +31,9 @@
   // Total number of pages.
   export let pageCount = 0;
 
+  // ARIA Label for component
+  export let ariaLabel = 'Pagination';
+
   $: pageCount = Math.ceil(total / pageSize);
   $: pageInfo = calculatePages(currentPage, pageCount);
 
@@ -45,23 +48,24 @@
   }
 </script>
 
-<nav role="navigation" aria-label="Pagination Navigation">
+<nav role="navigation" aria-label={ariaLabel}>
   <ul class="pagination">
     {#if pageCount > 1}
       <li>
-        <span
+        <button
           tabindex="0"
           role="link"
           aria-label="Previous"
           on:click={(e) => setPage(e, currentPage - 1)}
+          disabled={currentPage === 1}
         >
-          <Icon data={faAngleLeft} />
-        </span>
+          <Icon data={faAngleLeft} tabindex="-1" />
+        </button>
       </li>
     {/if}
 
     {#if pageInfo.start > 1}
-      <li class:active={currentPage === pageInfo.start}>
+      <li>
         {#if getLink}
           <a
             tabindex="0"
@@ -74,28 +78,28 @@
             1
           </a>
         {:else}
-          <span
+          <button
             tabindex="0"
             role="link"
             aria-label="Goto Page 1"
             class="page"
             on:click={(e) => setPage(e, 1)}
           >
             1
-          </span>
+          </button>
         {/if}
       </li>
       {#if pageInfo.start > 2}
         <li>
-          <span
+          <button
             tabindex="0"
             role="link"
             aria-label="Goto Page {pageInfo.prevPageWindow}"
             on:click={(e) => setPage(e, pageInfo.prevPageWindow)}
           >
             <Icon class="ellipsis" data={faEllipsisH} />
             <Icon class="arrow" data={faAngleDoubleLeft} />
-          </span>
+          </button>
         </li>
       {/if}
     {/if}
@@ -117,7 +121,7 @@
             {_page}
           </a>
         {:else}
-          <span
+          <button
             tabindex="0"
             role="link"
             aria-label={currentPage === _page
@@ -128,26 +132,26 @@
             aria-selected={currentPage === _page}
           >
             {_page}
-          </span>
+          </button>
         {/if}
       </li>
     {/each}
 
     {#if pageInfo.end < pageCount}
       {#if pageInfo.end < pageCount - 1}
         <li>
-          <span
+          <button
             tabindex="0"
             role="link"
             aria-label="Goto Page {pageInfo.nextPageWindow}"
             on:click={(e) => setPage(e, pageInfo.nextPageWindow)}
           >
             <Icon class="ellipsis" data={faEllipsisH} />
             <Icon class="arrow" data={faAngleDoubleRight} />
-          </span>
+          </button>
         </li>
       {/if}
-      <li class:active={currentPage === pageInfo.end}>
+      <li>
         {#if getLink}
           <a
             tabindex="0"
@@ -160,28 +164,30 @@
             {pageCount}
           </a>
         {:else}
-          <span
+          <button
             tabindex="0"
+            class="page"
             role="link"
             aria-label="Goto Page {pageCount}"
             on:click={(e) => setPage(e, pageCount)}
           >
             {pageCount}
-          </span>
+          </button>
         {/if}
       </li>
     {/if}
 
     {#if pageCount > 1}
       <li>
-        <span
+        <button
           tabindex="0"
           role="link"
           aria-label="Next"
           on:click={(e) => setPage(e, currentPage + 1)}
+          disabled={currentPage === pageCount}
         >
           <Icon data={faAngleRight} />
-        </span>
+        </button>
       </li>
     {/if}
   </ul>