feat(input): add aria-label prop for accessibility and update tests (#…

…1844) * feat(input): add aria-label prop for accessibility and update tests * fix(ui/input): add ariaLabel to input definition --------- Co-authored-by: Ioana Grozav <[email protected]>
varletjs · Jan 17, 2025 · 359819a · 359819a
1 parent 2d64cd8
commit 359819a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 0 deletions.
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -7,6 +7,7 @@
         size,
         variant,
         placeholder,
+        ariaLabel,
         line,
         hint,
         textColor,
@@ -31,6 +32,7 @@
       <input
         v-if="normalizedType === 'password'"
         tabindex="-1"
+        :aria-label="ariaLabel"
         :class="n('autocomplete')"
         :placeholder="!hint ? placeholder : undefined"
         :style="{
@@ -42,6 +44,7 @@
         v-if="textarea"
         :id="id"
         ref="el"
+        :aria-label="ariaLabel"
         :class="
           classes(
             n('input'),
@@ -78,6 +81,7 @@
         v-else
         :id="id"
         ref="el"
+        :aria-label="ariaLabel"
         :class="
           classes(
             n('input'),

diff --git a/packages/varlet-ui/src/input/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/input/__tests__/__snapshots__/index.spec.js.snap
@@ -1,5 +1,28 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`test input aria-label 1`] = `
+"<div class="var-input var--box">
+  <div class="var-field-decorator var--box var-field-decorator--standard" aria-label="test aria-label">
+    <div class="var-field-decorator__controller" style="cursor: text; overflow: visible; --field-decorator-middle-offset-left: 0px; --field-decorator-middle-offset-width: 0px; --field-decorator-middle-offset-height: 0px;">
+      <div class="var-field-decorator__icon"></div>
+      <div class="var-field-decorator__middle">
+        <!--v-if--><input id="var-input-mock-id" aria-label="test aria-label" class="var-input__input" autocomplete="new-password" type="text">
+      </div>
+      <!--v-if-->
+      <div class="var-field-decorator__icon">
+        <!--v-if-->
+      </div>
+    </div>
+    <div class="var-field-decorator__line">
+      <div class="var-field-decorator__dot"></div>
+    </div>
+  </div>
+  <transition-stub name="var-form-details" appear="false" persisted="false" css="true">
+    <!--v-if-->
+  </transition-stub>
+</div>"
+`;
+
 exports[`test input clear 1`] = `
 "<div class="var-input var--box">
   <div class="var-field-decorator var--box var-field-decorator--standard">

diff --git a/packages/varlet-ui/src/input/__tests__/index.spec.js b/packages/varlet-ui/src/input/__tests__/index.spec.js
@@ -451,3 +451,17 @@ describe('test input component slots', () => {
     wrapper.unmount()
   })
 })
+
+test('test input aria-label', async () => {
+  const wrapper = mount(VarInput, {
+    props: {
+      modelValue: 'text',
+      ariaLabel: 'test aria-label',
+    },
+  })
+
+  await delay(100)
+  expect(wrapper.find('.var-input__input').attributes('aria-label')).toBe('test aria-label')
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.unmount()
+})
diff --git a/packages/varlet-ui/src/input/props.ts b/packages/varlet-ui/src/input/props.ts
@@ -17,6 +17,7 @@ export const props = {
     default: 'text',
   },
   textarea: Boolean,
+  ariaLabel: String,
   rows: {
     type: [String, Number],
     default: 8,

diff --git a/packages/varlet-ui/types/input.d.ts b/packages/varlet-ui/types/input.d.ts
@@ -22,6 +22,7 @@ export interface InputProps extends BasicAttributes {
   size?: InputSize
   variant?: InputVariant
   textarea?: boolean
+  ariaLabel?: string
   rows?: string | number
   placeholder?: string
   hint?: boolean