feat(accessibility): extend InputBase with autocomplete and aria attr

Author: alvarosabu

dev/typescript/App.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="app">
     <div class="page container">
-      <h1 class="title m-4">{{ title }}</h1>
-      <div class="flex justify-between">
-        <div class="card p-6 mr-4">
+      <h1 class="title m-4 text-bg">{{ title }}</h1>
+      <div class="flex flex-wrap justify-between">
+        <div class="card p-6 w-full sm:w-1/2">
           <dynamic-form
             :form="form"
             @submited="handleSubmit"
@@ -15,6 +15,7 @@
             >
               <div class="avocado-field">
                 <input
+                  :id="control.name"
                   v-if="control"
                   class="form-control"
                   v-model="control.value"
@@ -36,7 +37,7 @@
             Submit Form
           </button>
         </div>
-        <div class="card p-6">
+        <div class="p-6 w-full sm:w-1/3">
           <pre>{{ formValues }}</pre>
         </div>
       </div>
@@ -111,6 +112,7 @@ export default defineComponent({
         password: {
           label: 'Password',
           type: 'password',
+          autocomplete: 'current-password',
           validations: [passwordValidator],
         } as PasswordInput,
         stock: {
@@ -241,6 +243,15 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
+.text-bg {
+  background-image: linear-gradient(
+    to top,
+    #99ffd580 54%,
+    transparent 54%,
+    transparent 100%
+  );
+  width: fit-content;
+}
 .avocado-field {
   position: relative;
 

src/components/dynamic-form/DynamicForm.vue

@@ -139,7 +139,13 @@ export default defineComponent({
 
     const formattedOptions = computed(() => {
       if (options?.form) {
-        const { customClass, method, netlify, netlifyHoneypot } = options?.form;
+        const {
+          customClass,
+          method,
+          netlify,
+          netlifyHoneypot,
+          autocomplete,
+        } = options?.form;
         return {
           class: [
             customClass,
@@ -148,6 +154,7 @@ export default defineComponent({
           method,
           'data-netlify': netlify,
           'data-netlify-honeypot': netlifyHoneypot,
+          autocomplete: autocomplete ? 'on' : 'off',
         };
       } else {
         return;

src/components/number-input/NumberInput.vue

@@ -18,15 +18,18 @@ export default defineComponent({
         id: props.control.name,
         name: props?.control?.name || '',
         type: props?.control?.type,
-        disabled: props?.control?.disabled,
-        placeholder: props?.control?.placeholder,
         class: ['form-control'],
-        required: props.control.required,
-        ariaRequired: props.control.required,
         value: props?.control?.value,
         min: props?.control?.min,
         max: props?.control?.max,
         step: props?.control?.step,
+        disabled: props?.control?.disabled,
+        placeholder: props?.control?.placeholder,
+        required: props.control.required,
+        autocomplete: props.control.autocomplete,
+        ariaLabel: props.control.ariaLabel,
+        ariaLabelledBy: props.control.ariaLabelledBy,
+        ariaRequired: props.control.required,
         onFocus,
         onBlur,
         onChange,

src/components/text-area-input/TextAreaInput.vue

@@ -16,14 +16,17 @@ export default defineComponent({
       h('textarea', {
         id: props.control.name,
         name: props?.control?.name || '',
-        disabled: props?.control?.disabled,
-        placeholder: props?.control?.placeholder,
-        required: props.control.required,
-        ariaRequired: props.control.required,
         class: ['form-control'],
         value: props?.control?.value,
         rows: props?.control?.rows,
         cols: props?.control?.cols,
+        disabled: props?.control?.disabled,
+        placeholder: props?.control?.placeholder,
+        required: props.control.required,
+        autocomplete: props.control.autocomplete,
+        ariaLabel: props.control.ariaLabel,
+        ariaLabelledBy: props.control.ariaLabelledBy,
+        ariaRequired: props.control.required,
         onFocus,
         onBlur,
         onChange,

src/components/text-input/TextInput.vue

@@ -27,12 +27,15 @@ export default defineComponent({
         id: props.control.name,
         name: props.control.name || '',
         type: props.control.type,
+        class: ['form-control'],
+        value: props?.control?.value,
         disabled: props.control.disabled,
         placeholder: props.control.placeholder,
         required: props.control.required,
+        autocomplete: props.control.autocomplete,
         ariaRequired: props.control.required,
-        class: ['form-control'],
-        value: props?.control?.value,
+        ariaLabel: props.control.ariaLabel,
+        ariaLabelledBy: props.control.ariaLabelledBy,
         onFocus,
         onBlur,
         onChange,

src/core/models.ts

@@ -42,10 +42,13 @@ export interface FormValidation {
 export interface InputBase {
   name: string;
   label?: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
   required?: string;
   disabled?: boolean;
   customClass?: string;
   placeholder?: string;
+  autocomplete?: string;
   validations?: FormValidation[];
 }
 
@@ -124,4 +127,5 @@ export interface FormOptions {
   method?: string;
   netlify?: boolean;
   netlifyHoneypot?: string;
+  autocomplete?: boolean;
 }