fix(gcds-pagination): Add tabindex="0" to <a> tags to function in web…

…kit browsers (#723) * fix(gcds-pagination): Add tabindex='0' to links to function in webkit * Remove CSS that was causing issues
cds-snc · Jan 9, 2025 · 7256590 · 7256590
1 parent 71af7b8
commit 7256590
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 57 deletions.
diff --git a/packages/web/src/components/gcds-pagination/gcds-pagination.css b/packages/web/src/components/gcds-pagination/gcds-pagination.css
@@ -207,7 +207,6 @@
       background: var(--gcds-pagination-active-background);
       border-color: var(--gcds-pagination-active-background);
       text-decoration: none;
-      pointer-events: none;
     }
   }
 }

diff --git a/packages/web/src/components/gcds-pagination/gcds-pagination.tsx b/packages/web/src/components/gcds-pagination/gcds-pagination.tsx
@@ -138,6 +138,7 @@ export class GcdsPagination {
       : 'javascript:void(0)';
     const linkAttrs = {
       'href': href,
+      'tabindex': 0,
       'aria-label': !end
         ? I18N[this.lang].pageNumberOf
             .replace('{#}', page)
@@ -392,6 +393,7 @@ export class GcdsPagination {
                 <li class="gcds-pagination-simple-previous">
                   <a
                     href={previousHref}
+                    tabindex={0}
                     aria-label={`${I18N[lang].previousPage}${
                       previousLabel ? `: ${previousLabel}` : ''
                     }`}
@@ -411,6 +413,7 @@ export class GcdsPagination {
                 <li class="gcds-pagination-simple-next">
                   <a
                     href={nextHref}
+                    tabindex={0}
                     aria-label={`${I18N[lang].nextPage}${
                       nextLabel ? `: ${nextLabel}` : ''
                     }`}