diff --git a/src/components/UsaDatePicker/UsaDatePicker.test.js b/src/components/UsaDatePicker/UsaDatePicker.test.js index 2ca6736f..157aaf69 100644 --- 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 index 5054fb03..a6666600 100644 --- 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 index 1585f6a5..ca013fbe 100644 --- 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 index 3a5b0f6b..d62d4db0 100644 --- a/src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.vue +++ b/src/components/UsaDatePickerCalendar/UsaDatePickerCalendar.vue @@ -205,8 +205,7 @@ onMounted(() => { - + diff --git a/src/components/UsaDatePickerCalendarYear/UsaDatePickerCalendarYear.test.js b/src/components/UsaDatePickerCalendarYear/UsaDatePickerCalendarYear.test.js index 64d3b4ae..06717da4 100644 --- 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 index ee331f2c..e5e1208a 100644 --- 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" > -
{{ dayOfWeekAbbreviationLabels[index] }}
+
diff --git a/src/components/UsaDateRangePicker/UsaDateRangePicker.test.js b/src/components/UsaDateRangePicker/UsaDateRangePicker.test.js index 5a9c3a64..d51d1f37 100644 --- 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 index c9bcb8a9..74d78919 100644 --- 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, diff --git a/src/components/UsaRange/UsaRange.test.js b/src/components/UsaRange/UsaRange.test.js index 831669a0..a061aa4d 100644 --- a/src/components/UsaRange/UsaRange.test.js +++ b/src/components/UsaRange/UsaRange.test.js @@ -15,23 +15,27 @@ describe('UsaRange', () => { hint: () => 'Test hint', }, }) + .its('wrapper') + .as('wrapper') cy.get('div.usa-form-group').should('not.have.attr', 'name') cy.get('label.usa-label').should('have.attr', 'for') - cy.get('input.usa-range').as('range').should('have.attr', 'id') - cy.get('@range') - .should('have.attr', 'name') - .and('contain', 'test-dropdown-name') - cy.get('@range').should('have.attr', 'type').and('contain', 'range') - cy.get('@range').should('have.attr', 'role').and('contain', 'slider') - cy.get('@range').should('have.attr', 'min').and('contain', 0) - cy.get('@range').should('have.attr', 'aria-valuemin').and('contain', 0) - cy.get('@range').should('have.attr', 'max').and('contain', 100) - cy.get('@range').should('have.attr', 'aria-valuemax').and('contain', 100) - cy.get('@range').should('have.attr', 'aria-valuenow').and('contain', '') - - cy.get('@range').should('have.attr', 'aria-describedby') + cy.get('input.usa-range').should('have.attr', 'id') + cy.get('input.usa-range') + .should('have.attr', 'name', 'test-dropdown-name') + .and('have.attr', 'type', 'range') + .and('have.attr', 'min', 0) + .and('have.attr', 'max', 100) + .and('have.attr', 'aria-describedby') + cy.get('input.usa-range').should('not.have.attr', 'aria-valuetext') + + // Check for correct default preposition prop value. + cy.get('@wrapper') + .vue() + .then(({ vm }) => { + expect(vm.props.preposition).to.equal('of') + }) }) it('displays `label`, `hint`, and `error-message` slot content', () => { @@ -85,6 +89,25 @@ describe('UsaRange', () => { .and('contain', 'custom-id-hint custom-id-error-message') }) + it('`aria-valuetext` attribute has correct text', () => { + cy.mount(UsaRange, { + props: { + modelValue: 10, + }, + }) + .its('wrapper') + .as('wrapper') + + cy.get('input').should('have.attr', 'aria-valuetext', '10 of 100') + + cy.get('@wrapper').invoke('setProps', { + unit: 'degrees', + preposition: 'at', + }) + + cy.get('input').should('have.attr', 'aria-valuetext', '10 degrees at 100') + }) + it('add required attribute if `required` prop is true', () => { cy.mount(UsaRange, { props: { diff --git a/src/components/UsaRange/UsaRange.vue b/src/components/UsaRange/UsaRange.vue index 9f709f59..819733d8 100644 --- a/src/components/UsaRange/UsaRange.vue +++ b/src/components/UsaRange/UsaRange.vue @@ -22,6 +22,14 @@ const props = defineProps({ type: Number, default: 100, }, + unit: { + type: String, + default: '', + }, + preposition: { + type: String, + default: 'of', + }, modelValue: { type: [String, Number], default: '', @@ -83,6 +91,18 @@ const ariaDescribedby = computed(() => { return ids.length ? ids.join(' ') : null }) + +const callout = computed(() => { + if (!rangeValue.value && rangeValue.value !== 0) { + return null + } + + if (props.unit) { + return `${rangeValue.value} ${props.unit} ${props.preposition} ${props.max}` + } + + return `${rangeValue.value} ${props.preposition} ${props.max}` +})