[WNMGDS-2161] Compact pagination (#2373)

* Change aria-current to page on Pagination Page * Add pagination heading for SR, streamline nav buttons and update styles. * Fix typos * Update snapshots * Fix unit tests for Pagination * Add custom heading tag to Pagination.
CMSgov · Mar 22, 2023 · 4e796a7 · 4e796a7
1 parent 4e96db9
commit 4e796a7
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 67 deletions.
diff --git a/packages/design-system/src/components/Pagination/Page.tsx b/packages/design-system/src/components/Pagination/Page.tsx
@@ -31,7 +31,7 @@ export default function Page({
       {isActive ? (
         <span
           className="ds-c-button ds-c-button--ghost ds-c-pagination__current-page"
-          aria-current="true"
+          aria-current="page"
         >
           {index}
         </span>

diff --git a/packages/design-system/src/components/Pagination/Pagination.test.tsx b/packages/design-system/src/components/Pagination/Pagination.test.tsx
@@ -6,6 +6,10 @@ function getNav() {
   return screen.getByRole('navigation');
 }
 
+function getLabel() {
+  return screen.getByRole('heading');
+}
+
 function getPrevLink() {
   return screen.getByRole('link', { name: 'Previous Page' });
 }
@@ -54,11 +58,12 @@ describe('Pagination', () => {
   describe('accessibility attributes', () => {
     it('should have navigation label', () => {
       renderPagination({ totalPages: 8 });
-      expect(getNav().getAttribute('aria-label')).toEqual('Pagination');
+      expect(getLabel().textContent).toContain('Pagination');
+      expect(getLabel().textContent).toContain('8');
     });
     it('should set a custom navigation label', () => {
       renderPagination({ totalPages: 8, ariaLabel: 'Pagey page page' });
-      expect(getNav().getAttribute('aria-label')).toEqual('Pagey page page');
+      expect(getLabel().textContent).toContain('Pagey page page');
     });
   });
 
@@ -127,19 +132,21 @@ describe('Pagination', () => {
       expect(queryPrevLink()).toBeTruthy();
     });
 
-    it('should hide "previous" navigation slot if current page is first page of set', () => {
+    it('should render disabled "previous" navigation slot if current page is first page of set', () => {
       renderPagination({ currentPage: 1 });
-      expect(queryPrevLink()).toBeFalsy();
+      expect(queryPrevLink()).toHaveAttribute('aria-disabled');
+      expect(queryPrevLink()).not.toHaveAttribute('href');
     });
 
     it('should show "next" navigation slot if current page is not last page of set', () => {
       renderPagination({ currentPage: 2 });
       expect(queryNextLink()).toBeTruthy();
     });
 
-    it('should hide "next" navigation slot if current page is last page of set', () => {
+    it('should render disabled "next" navigation slot if current page is last page of set', () => {
       renderPagination({ currentPage: 3 });
-      expect(queryNextLink()).toBeFalsy();
+      expect(queryNextLink()).toHaveAttribute('aria-disabled');
+      expect(queryNextLink()).not.toHaveAttribute('href');
     });
   });
 

diff --git a/packages/design-system/src/components/Pagination/Pagination.tsx b/packages/design-system/src/components/Pagination/Pagination.tsx
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { ArrowIcon } from '../Icons';
 import { t } from '../i18n';
 
+export type PaginationHeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
 export interface PaginationProps {
   /**
    * Defines `aria-label` on wrapping Pagination element. Since this exists on a `<nav>` element, the word "navigation" should be omitted from this label. Optional.
@@ -24,6 +25,10 @@ export interface PaginationProps {
    * Defines active page in Pagination.
    */
   currentPage: number;
+  /**
+   * Heading type to override default `<h2>`.
+   */
+  headingLevel?: PaginationHeadingLevel;
   /**
    * Determines if navigation is hidden when current page is the first or last of Pagination page set. Optional.
    */
@@ -130,6 +135,7 @@ function Pagination({
   currentPage,
   renderHref,
   onPageChange,
+  headingLevel,
   isNavigationHidden,
   startLabelText,
   startAriaLabel,
@@ -223,34 +229,38 @@ function Pagination({
   const startIcon = <ArrowIcon direction="left" className="ds-c-pagination__nav--image" />;
   const endIcon = <ArrowIcon direction="right" className="ds-c-pagination__nav--image" />;
 
+  const Heading = `h${headingLevel}` as const;
+  const headingElement = (
+    <Heading id="pagination-heading">
+      {ariaLabel ?? t('pagination.ariaLabel')} -{' '}
+      {t('pagination.pageXOfY', {
+        number: `${currentPage}`,
+        total: `${totalPages}`,
+      })}
+    </Heading>
+  );
+
   return (
-    <nav className={classes} aria-label={ariaLabel ?? t('pagination.ariaLabel')} {...rest}>
-      {currentPage === 1 ? (
-        <span
-          className="ds-c-pagination__nav ds-c-pagination__nav--disabled"
-          aria-disabled="true"
-          style={{ visibility: isNavigationHidden ? 'hidden' : 'visible' }}
-          aria-hidden={isNavigationHidden}
-        >
-          <span className="ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-previous">
-            {startIcon}
-          </span>
-          {startLabelText ?? t('pagination.startLabelText')}
+    <nav className={classes} aria-labelledby="pagination-heading" {...rest}>
+      <span aria-live="polite" role="status" className="ds-u-visibility--screen-reader">
+        {headingElement}
+      </span>
+
+      <Button
+        variation="ghost"
+        href={renderHref(currentPage - 1)}
+        onClick={pageChange(currentPage - 1)}
+        aria-label={startAriaLabel ?? t('pagination.startAriaLabel')}
+        className="ds-c-pagination__nav"
+        disabled={currentPage === 1}
+        style={{ visibility: currentPage === 1 && isNavigationHidden ? 'hidden' : 'visible' }}
+        aria-hidden={currentPage === 1 ? isNavigationHidden : false}
+      >
+        <span className="ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-previous">
+          {startIcon}
         </span>
-      ) : (
-        <Button
-          variation="ghost"
-          href={renderHref(currentPage - 1)}
-          onClick={pageChange(currentPage - 1)}
-          aria-label={startAriaLabel ?? t('pagination.startAriaLabel')}
-          className="ds-c-pagination__nav"
-        >
-          <span className="ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-previous">
-            {startIcon}
-          </span>
-          {startLabelText ?? t('pagination.startLabelText')}
-        </Button>
-      )}
+        {startLabelText ?? t('pagination.startLabelText')}
+      </Button>
 
       <span
         className="ds-c-pagination__page-count"
@@ -264,38 +274,30 @@ function Pagination({
 
       <ul role="list">{pages}</ul>
 
-      {currentPage === totalPages ? (
-        <span
-          className="ds-c-pagination__nav ds-c-pagination__nav--disabled"
-          style={{ visibility: isNavigationHidden ? 'hidden' : 'visible' }}
-          aria-hidden={isNavigationHidden}
-          aria-disabled="true"
-        >
-          {endLabelText ?? t('pagination.endLabelText')}
-          <span className="ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-next">
-            {endIcon}
-          </span>
+      <Button
+        variation="ghost"
+        href={renderHref(currentPage + 1)}
+        onClick={pageChange(currentPage + 1)}
+        aria-label={endAriaLabel ?? t('pagination.endAriaLabel')}
+        className="ds-c-pagination__nav"
+        disabled={currentPage === totalPages}
+        style={{
+          visibility: currentPage === totalPages && isNavigationHidden ? 'hidden' : 'visible',
+        }}
+        aria-hidden={currentPage === totalPages ? isNavigationHidden : false}
+      >
+        {endLabelText ?? t('pagination.endLabelText')}
+        <span className="ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-next">
+          {endIcon}
         </span>
-      ) : (
-        <Button
-          variation="ghost"
-          href={renderHref(currentPage + 1)}
-          onClick={pageChange(currentPage + 1)}
-          aria-label={endAriaLabel ?? t('pagination.endAriaLabel')}
-          className="ds-c-pagination__nav"
-        >
-          {endLabelText ?? t('pagination.endLabelText')}
-          <span className="ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-next">
-            {endIcon}
-          </span>
-        </Button>
-      )}
+      </Button>
     </nav>
   );
 }
 
 Pagination.defaultProps = {
   compact: false,
+  headingLevel: '2',
   isNavigationHidden: false,
 };
 

diff --git a/packages/design-system/src/components/Pagination/__snapshots__/Page.test.tsx.snap b/packages/design-system/src/components/Pagination/__snapshots__/Page.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Page should render static el if current 1`] = `
 <div>
   <li>
     <span
-      aria-current="true"
+      aria-current="page"
       class="ds-c-button ds-c-button--ghost ds-c-pagination__current-page"
     >
       1

diff --git a/packages/design-system/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/design-system/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Pagination pagination slot behavior less than 7 pages should show all p
 Array [
   <li>
     <span
-      aria-current="true"
+      aria-current="page"
       class="ds-c-button ds-c-button--ghost ds-c-pagination__current-page"
     >
       1
@@ -52,13 +52,26 @@ Array [
 exports[`Pagination should render component 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Pagination"
+    aria-labelledby="pagination-heading"
     class="ds-c-pagination"
   >
+    <span
+      aria-live="polite"
+      class="ds-u-visibility--screen-reader"
+      role="status"
+    >
+      <h2
+        id="pagination-heading"
+      >
+        Pagination results - Page 2 of 3
+      </h2>
+    </span>
     <a
+      aria-hidden="false"
       aria-label="Previous Page"
       class="ds-c-button ds-c-button--ghost ds-c-pagination__nav"
       href="#1"
+      style="visibility: visible;"
     >
       <span
         class="ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-previous"
@@ -106,7 +119,7 @@ exports[`Pagination should render component 1`] = `
       </li>
       <li>
         <span
-          aria-current="true"
+          aria-current="page"
           class="ds-c-button ds-c-button--ghost ds-c-pagination__current-page"
         >
           2
@@ -123,9 +136,11 @@ exports[`Pagination should render component 1`] = `
       </li>
     </ul>
     <a
+      aria-hidden="false"
       aria-label="Next Page"
       class="ds-c-button ds-c-button--ghost ds-c-pagination__nav"
       href="#3"
+      style="visibility: visible;"
     >
       Next
       <span
@@ -157,10 +172,23 @@ exports[`Pagination with compact prop enabled should render compact variant 1`]
     aria-labelledby="pagination-heading"
     class="ds-c-pagination ds-c-pagination--compact"
   >
+    <span
+      aria-live="polite"
+      class="ds-u-visibility--screen-reader"
+      role="status"
+    >
+      <h2
+        id="pagination-heading"
+      >
+        Pagination results - Page 2 of 3
+      </h2>
+    </span>
     <a
+      aria-hidden="false"
       aria-label="Previous Page"
       class="ds-c-button ds-c-button--ghost ds-c-pagination__nav"
       href="#1"
+      style="visibility: visible;"
     >
       <span
         class="ds-c-pagination__nav--img-container ds-c-pagination__nav--img-container-previous"
@@ -198,9 +226,11 @@ exports[`Pagination with compact prop enabled should render compact variant 1`]
       role="list"
     />
     <a
+      aria-hidden="false"
       aria-label="Next Page"
       class="ds-c-button ds-c-button--ghost ds-c-pagination__nav"
       href="#3"
+      style="visibility: visible;"
     >
       Next
       <span

diff --git a/packages/design-system/src/components/locale/en.json b/packages/design-system/src/components/locale/en.json
@@ -75,7 +75,7 @@
     "clearAllText": "Clear all"
   },
   "pagination": {
-    "ariaLabel": "Pagination",
+    "ariaLabel": "Pagination results",
     "pageXOfY": "Page {{number}} of {{total}}",
     "startLabelText": "Previous",
     "startAriaLabel": "Previous Page",

diff --git a/packages/design-system/src/components/locale/es.json b/packages/design-system/src/components/locale/es.json
@@ -75,7 +75,7 @@
     "clearAllText": "Borrar todo"
   },
   "pagination": {
-    "ariaLabel": "Paginación",
+    "ariaLabel": "Resultados de paginación",
     "pageXOfY": "Página {{number}} de {{total}}",
     "startLabelText": "Anterior",
     "startAriaLabel": "Página anterior",

diff --git a/packages/design-system/src/styles/components/_Pagination.scss b/packages/design-system/src/styles/components/_Pagination.scss
@@ -21,7 +21,6 @@
   }
   li {
     display: inline-block;
-    list-style: none;
   }
   .ds-c-button {
     color: var(--pagination-link__color);
@@ -96,7 +95,7 @@
       border: 0;
       padding: $spacer-half $spacer-2;
 
-      &:not(.ds-c-pagination__nav--disabled) {
+      &:not([aria-disabled='true']) {
         color: LinkText;
         text-decoration: underline;
         text-decoration-thickness: 3px;
@@ -117,7 +116,7 @@
       }
     }
   }
-  .ds-c-pagination__nav--disabled {
+  [aria-disabled='true'] {
     border: 1px solid transparent;
     color: var(--pagination-link__color--disabled);
     line-height: 1.3;
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ exports[`Page should render static el if current 1`] = ` @@
     <div>
       <li>
         <span
-          aria-current="true"
+          aria-current="page"
           class="ds-c-button ds-c-button--ghost ds-c-pagination__current-page"
         >
@@ Expand Down @@