Merge pull request #817 from dpc-sdp/fix/r20-1360-unlabeled-aria

[R20-1360] Add default contentType label for pagination
dpc-sdp · Aug 29, 2023 · 5a8cf42 · 5a8cf42
2 parents 0849dc2 + ebf99b2
commit 5a8cf42
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/examples/nuxt-app/test/features/search-listing/pagination.feature b/examples/nuxt-app/test/features/search-listing/pagination.feature
@@ -106,3 +106,14 @@ Feature: Searching listing - Pagination
       | title   |
       | Soup    |
       | Biscuit |
+
+  @mockserver
+  Example: Aria labels are set on pagination controls
+    Given the page endpoint for path "/pagination" returns fixture "/search-listing/pagination/page" with status 200
+    And the search network request is stubbed with fixture "/search-listing/pagination/response-page-3" and status 200
+    And the current date is "Fri, 02 Feb 2050 03:04:05 GMT"
+    When I visit the page "/pagination?page=2"
+
+    Then the "Previous" pagination link should have an aria-label "Go to previous page"
+    And the "Next" pagination link should have an aria-label "Go to next page"
+    And the "3" complex pagination link should have an aria-label "Go to page 3"
diff --git a/packages/ripple-test-utils/step_definitions/content-types/listing.ts b/packages/ripple-test-utils/step_definitions/content-types/listing.ts
@@ -214,3 +214,22 @@ Then(
     })
   }
 )
+
+Then(
+  'the {string} pagination link should have an aria-label {string}',
+  (label: string, text: string) => {
+    cy.get('.rpl-pagination__link')
+      .contains(label)
+      .should('have.attr', 'aria-label', text)
+  }
+)
+
+Then(
+  'the {string} complex pagination link should have an aria-label {string}',
+  (label: string, text: string) => {
+    cy.get('.rpl-pagination__page')
+      .contains(label)
+      .parent()
+      .should('have.attr', 'aria-label', text)
+  }
+)
diff --git a/packages/ripple-ui-core/src/components/pagination/RplPagination.stories.mdx b/packages/ripple-ui-core/src/components/pagination/RplPagination.stories.mdx
@@ -28,8 +28,7 @@ export const SingleTemplate = (args) => ({
     label: 'Page navigation',
     totalPages: 20,
     currentPage: 1,
-    surroundingPages: 3,
-    contentType: 'Page'
+    surroundingPages: 3
   }}
 />
 

diff --git a/packages/ripple-ui-core/src/components/pagination/RplPagination.vue b/packages/ripple-ui-core/src/components/pagination/RplPagination.vue
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: undefined,
   currentPage: 1,
   surroundingPages: 2,
-  contentType: undefined,
+  contentType: 'page',
   showTally: false,
   variant: 'complex',
   prevLabel: 'Previous',