Merge pull request #782 from patrickcate/feature/000/date-picker-a11y

Feature/000/date picker a11y
patrickcate · Dec 18, 2023 · 02e1b2d · 02e1b2d
2 parents 8fd395c + 683c3f8
commit 02e1b2d
Show file tree

Hide file tree

Showing 12 changed files with 136 additions and 70 deletions.
diff --git a/src/components/UsaDatePicker/UsaDatePicker.test.js b/src/components/UsaDatePicker/UsaDatePicker.test.js
@@ -51,11 +51,11 @@ describe('UsaDatePicker', () => {
 
     cy.get('div.usa-date-picker__calendar')
       .as('calendar')
-      .should('have.attr', 'role', 'dialog')
-      .and('have.attr', 'aria-modal', 'true')
+      .should('have.attr', 'role', 'application')
       .and('have.attr', 'data-value', '')
       .and('have.attr', 'hidden', 'hidden')
       .and('have.attr', 'style')
+    cy.get('@calendar').should('not.have.attr', 'aria-modal')
 
     cy.get('div.usa-date-picker__status')
       .as('status')

diff --git a/src/components/UsaDatePicker/UsaDatePicker.vue b/src/components/UsaDatePicker/UsaDatePicker.vue
@@ -179,11 +179,11 @@ const props = defineProps({
   },
   yearSelectionButtonLabel: {
     type: String,
-    default: '%s. Click to select year',
+    default: '%s. Select year',
   },
   monthSelectionButtonLabel: {
     type: String,
-    default: '%s. Click to select month',
+    default: '%s. Select month',
   },
   previousYearsButtonLabel: {
     type: String,

diff --git a/src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.test.js b/src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.test.js
@@ -69,7 +69,7 @@ describe('UsaDatePickerCalendar', () => {
       .as('wrapper')
 
     cy.get('.usa-date-picker__calendar')
-      .should('have.attr', 'role', 'dialog')
+      .should('have.attr', 'role', 'application')
       .and('have.attr', 'data-value', '2022-07-13')
       .and('not.have.attr', 'hidden', 'true')
 

diff --git a/src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.vue b/src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.vue
@@ -205,8 +205,7 @@ onMounted(() => {
   <div
     ref="calendarPickerRef"
     class="usa-date-picker__calendar"
-    role="dialog"
-    aria-modal="true"
+    role="application"
     :data-value="highlightedDate"
     :hidden="!open"
   >

diff --git a/src/components/UsaDatePickerCalendarDay/UsaDatePickerCalendarDay.test.js b/src/components/UsaDatePickerCalendarDay/UsaDatePickerCalendarDay.test.js
@@ -151,16 +151,15 @@ describe('UsaDatePickerCalendarDay', () => {
       .and('be.empty')
 
     cy.get('table.usa-date-picker__calendar__table').should(
-      'have.attr',
-      'role',
-      'presentation'
+      'not.have.attr',
+      'role'
     )
 
     cy.get('.usa-date-picker__calendar__table > thead > tr')
       .children()
       .should('have.length', 7)
       .and('have.class', 'usa-date-picker__calendar__day-of-week')
-      .and('have.attr', 'scope', 'presentation')
+      .and('have.attr', 'scope', 'col')
 
     cy.get('.usa-date-picker__calendar__table th:nth-of-type(1)')
       .should('have.attr', 'aria-label', 'Sunday')
@@ -1710,18 +1709,18 @@ describe('UsaDatePickerCalendarDay', () => {
     })
 
     // Make sure the next tab element has been initially rendered.
-    // cy.get('.usa-date-picker__calendar__previous-year').should('not.have.focus')
-    // cy.get('.usa-date-picker__calendar__previous-month').should(
-    //   'not.have.focus'
-    // )
-    // cy.get('.usa-date-picker__calendar__month-selection').should(
-    //   'not.have.focus'
-    // )
-    // cy.get('.usa-date-picker__calendar__year-selection').should(
-    //   'not.have.focus'
-    // )
-    // cy.get('.usa-date-picker__calendar__next-month').should('not.have.focus')
-    // cy.get('.usa-date-picker__calendar__next-year').should('not.have.focus')
+    cy.get('.usa-date-picker__calendar__previous-year').should('not.have.focus')
+    cy.get('.usa-date-picker__calendar__previous-month').should(
+      'not.have.focus'
+    )
+    cy.get('.usa-date-picker__calendar__month-selection').should(
+      'not.have.focus'
+    )
+    cy.get('.usa-date-picker__calendar__year-selection').should(
+      'not.have.focus'
+    )
+    cy.get('.usa-date-picker__calendar__next-month').should('not.have.focus')
+    cy.get('.usa-date-picker__calendar__next-year').should('not.have.focus')
 
     // Should start on selected date: 2022-07-13.
     cy.get('button[data-value="2022-07-13"]')

diff --git a/src/components/UsaDatePickerCalendarDay/UsaDatePickerCalendarDay.vue b/src/components/UsaDatePickerCalendarDay/UsaDatePickerCalendarDay.vue
@@ -495,14 +495,14 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <table class="usa-date-picker__calendar__table" role="presentation">
+    <table class="usa-date-picker__calendar__table">
       <thead>
         <tr>
           <th
             v-for="(dayLabel, index) in dayOfWeekLabels"
             :key="dayLabel"
             class="usa-date-picker__calendar__day-of-week"
-            scope="presentation"
+            scope="col"
             :aria-label="dayLabel"
             >{{ dayOfWeekAbbreviationLabels[index] }}
           </th>

diff --git a/src/components/UsaDatePickerCalendarYear/UsaDatePickerCalendarYear.test.js b/src/components/UsaDatePickerCalendarYear/UsaDatePickerCalendarYear.test.js
@@ -42,9 +42,15 @@ describe('UsaDatePickerCalendarYear', () => {
       '-1'
     )
 
-    cy.get('.usa-date-picker__calendar__year-picker > table')
-      .should('have.attr', 'role', 'presentation')
-      .and('have.class', 'usa-date-picker__calendar__table')
+    cy.get('.usa-date-picker__calendar__year-picker > table').should(
+      'have.class',
+      'usa-date-picker__calendar__table'
+    )
+
+    cy.get('.usa-date-picker__calendar__year-picker > table').should(
+      'not.have.attr',
+      'role'
+    )
 
     cy.get('.usa-date-picker__calendar__year-picker > table > tbody').should(
       'exist'

diff --git a/src/components/UsaDatePickerCalendarYear/UsaDatePickerCalendarYear.vue b/src/components/UsaDatePickerCalendarYear/UsaDatePickerCalendarYear.vue
@@ -254,7 +254,7 @@ onBeforeUnmount(() => {
     tabindex="-1"
     class="usa-date-picker__calendar__year-picker"
   >
-    <table role="presentation" class="usa-date-picker__calendar__table">
+    <table class="usa-date-picker__calendar__table">
       <tbody>
         <tr>
           <td>

diff --git a/src/components/UsaDateRangePicker/UsaDateRangePicker.test.js b/src/components/UsaDateRangePicker/UsaDateRangePicker.test.js
@@ -118,7 +118,7 @@ describe('UsaDateRangePicker', () => {
     )
       .as('monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
@@ -127,7 +127,7 @@ describe('UsaDateRangePicker', () => {
     )
       .as('yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -209,13 +209,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -400,13 +400,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -555,13 +555,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -718,13 +718,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -775,13 +775,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -1028,7 +1028,7 @@ describe('UsaDateRangePicker', () => {
     )
       .as('monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
@@ -1037,7 +1037,7 @@ describe('UsaDateRangePicker', () => {
     )
       .as('yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -1130,13 +1130,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -1321,13 +1321,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -1474,13 +1474,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -1635,13 +1635,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 
@@ -1690,13 +1690,13 @@ describe('UsaDateRangePicker', () => {
 
     cy.get('@monthSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${month}. Click to select month`)
+      .and('have.attr', 'aria-label', `${month}. Select month`)
       .and('have.class', 'usa-date-picker__calendar__month-selection')
       .and('contain', month)
 
     cy.get('@yearSelectorButton')
       .should('have.attr', 'type', 'button')
-      .and('have.attr', 'aria-label', `${year}. Click to select year`)
+      .and('have.attr', 'aria-label', `${year}. Select year`)
       .and('have.class', 'usa-date-picker__calendar__year-selection')
       .and('contain', year)
 

diff --git a/src/components/UsaRange/UsaRange.stories.js b/src/components/UsaRange/UsaRange.stories.js
@@ -4,6 +4,8 @@ import UsaRange from './UsaRange.vue'
 const defaultProps = {
   min: UsaRange.props.min.default,
   max: UsaRange.props.max.default,
+  unit: UsaRange.props.unit.default,
+  preposition: UsaRange.props.preposition.default,
   modelValue: UsaRange.props.modelValue.default,
   label: UsaRange.props.label.default,
   required: UsaRange.props.required.default,
@@ -22,6 +24,12 @@ export default {
     max: {
       control: { type: 'number' },
     },
+    unit: {
+      control: { type: 'text' },
+    },
+    preposition: {
+      control: { type: 'text' },
+    },
     modelValue: {
       control: { type: 'text' },
     },
@@ -60,6 +68,8 @@ export default {
   args: {
     min: defaultProps.min,
     max: defaultProps.max,
+    unit: defaultProps.unit,
+    preposition: defaultProps.preposition,
     modelValue: defaultProps.modelValue,
     label: defaultProps.label,
     required: defaultProps.required,
@@ -88,6 +98,8 @@ const DefaultTemplate = (args, { argTypes }) => ({
     v-bind="$attrs"
     :min="min"
     :max="max"
+    :unit="unit"
+    :preposition="preposition"
     :label="label"
     :required="required"
     :error="error"
@@ -120,6 +132,16 @@ DefaultValueRange.args = {
 }
 DefaultValueRange.storyName = 'Default Value'
 
+export const CustomUnitAndPrepositionRange = DefaultTemplate.bind({})
+CustomUnitAndPrepositionRange.args = {
+  ...defaultProps,
+  label: 'Range label',
+  modelValue: '75',
+  unit: 'degrees',
+  preposition: 'out of a total',
+}
+CustomUnitAndPrepositionRange.storyName = 'Custom Unit and Preposition'
+
 export const HintRange = DefaultTemplate.bind({})
 HintRange.args = {
   ...defaultProps,