Feat: Add a11y audit tests to Pagination

Author: dchyun

showcase/app/styles/showcase-pages/pagination.scss

@@ -20,12 +20,6 @@ body.components-pagination {
     }
   }
 
-  .shw-component-pagination-ul-wrapper {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
   // paginated tables demo
 
   .shw-component-pagination-table-demo {

showcase/app/templates/components/pagination.hbs

@@ -227,14 +227,11 @@
   <Shw::Flex as |SF|>
     <SF.Item as |SFI|>
       <SFI.Label>Generic (default)</SFI.Label>
-      <ul class="shw-component-pagination-ul-wrapper"><Hds::Pagination::Nav::Number @page="1" /></ul>
+      <Hds::Pagination::Nav::Number @page="1" />
     </SF.Item>
     <SF.Item as |SFI|>
       <SFI.Label>Current (with <code>@isSelected=&lcub;&lcub;true&rcub;&rcub;</code>)</SFI.Label>
-      <ul class="shw-component-pagination-ul-wrapper"><Hds::Pagination::Nav::Number
-          @page="1"
-          @isSelected={{true}}
-        /></ul>
+      <Hds::Pagination::Nav::Number @page="1" @isSelected={{true}} />
     </SF.Item>
   </Shw::Flex>
 
@@ -247,31 +244,31 @@
         <SF.Item @label={{capitalize state}} mock-state-value={{state}} mock-state-selector="button,a">
           <Shw::Flex as |SF|>
             <SF.Item>
-              <ul class="shw-component-pagination-ul-wrapper"><Hds::Pagination::Nav::Number @page="1" /></ul>
+              <Hds::Pagination::Nav::Number @page="1" />
             </SF.Item>
             <SF.Item>
-              <ul class="shw-component-pagination-ul-wrapper"><Hds::Pagination::Nav::Number @page="12" /></ul>
+              <Hds::Pagination::Nav::Number @page="12" />
             </SF.Item>
             <SF.Item>
-              <ul class="shw-component-pagination-ul-wrapper"><Hds::Pagination::Nav::Number @page="123" /></ul>
+              <Hds::Pagination::Nav::Number @page="123" />
             </SF.Item>
             <SF.Item>
-              <ul class="shw-component-pagination-ul-wrapper"><Hds::Pagination::Nav::Number
+              <Hds::Pagination::Nav::Number
                   @page="1"
                   @isSelected={{true}}
-                /></ul>
+                />
             </SF.Item>
             <SF.Item>
-              <ul class="shw-component-pagination-ul-wrapper"><Hds::Pagination::Nav::Number
+              <Hds::Pagination::Nav::Number
                   @page="12"
                   @isSelected={{true}}
-                /></ul>
+                />
             </SF.Item>
             <SF.Item>
-              <ul class="shw-component-pagination-ul-wrapper"><Hds::Pagination::Nav::Number
+              <Hds::Pagination::Nav::Number
                   @page="123"
                   @isSelected={{true}}
-                /></ul>
+                />
             </SF.Item>
           </Shw::Flex>
         </SF.Item>

showcase/tests/acceptance/components/hds/pagination-test.js

@@ -6,10 +6,25 @@
 import { module, test } from 'qunit';
 import { click, select, visit, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from '../../../helpers';
+import { a11yAudit } from 'ember-a11y-testing/test-support';
 
 module('Acceptance | Component | hds/pagination', function (hooks) {
   setupApplicationTest(hooks);
 
+  test('Components/pagination page passes automated a11y checks', async function (assert) {
+    let axeOptions = {
+      rules: {
+        'landmark-unique': {
+          enabled: false,
+        },
+      },
+    };
+    await visit('/components/pagination');
+    await a11yAudit(axeOptions);
+
+    assert.ok(true, 'a11y automation audit passed');
+  })
+
   test('interacting with the demo of a "numbered" pagination with routing', async function (assert) {
     await visit('/components/pagination');