feat(UsaRange): add unit and preposition props

patrickcate · Dec 18, 2023 · dc2bc92 · dc2bc92
1 parent f1650d6
commit dc2bc92
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
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,

diff --git a/src/components/UsaRange/UsaRange.test.js b/src/components/UsaRange/UsaRange.test.js
@@ -15,6 +15,8 @@ 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')
@@ -26,6 +28,14 @@ describe('UsaRange', () => {
       .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', () => {
@@ -79,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
@@ -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}`
+})
 </script>
 
 <template>
@@ -120,6 +140,7 @@ const ariaDescribedby = computed(() => {
       type="range"
       :min="min"
       :max="max"
+      :aria-valuetext="callout"
       :required="required"
       :aria-describedby="ariaDescribedby"
     />