Fix aria invalid form attribute incorrect values

Author: issayah

src/components/BFormInput/BFormInput.vue

@@ -25,9 +25,9 @@
 </template>
 
 <script lang="ts">
-import {InputType} from '../../types'
+import type {InputType} from '@/types'
 import {computed, defineComponent, PropType} from 'vue'
-import useFormInput, {COMMON_INPUT_PROPS} from '../../composables/useFormInput'
+import useFormInput, {COMMON_INPUT_PROPS} from '@/composables/useFormInput'
 
 const allowedTypes = [
   'text',
@@ -74,7 +74,9 @@ export default defineComponent({
       }
     })
 
-    const localType = computed(() => (allowedTypes.includes(props.type) ? props.type : 'text'))
+    const localType = computed<InputType>(() =>
+      allowedTypes.includes(props.type) ? props.type : 'text'
+    )
 
     const {input, computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur} =
       useFormInput(props, emit)

src/composables/useFormInput.ts

@@ -81,11 +81,26 @@ function useFormInput(props: Readonly<InputProps>, emit: InputEmitType) {
 
   onActivated(handleAutofocus)
 
-  const computedAriaInvalid = computed(() => {
-    if (props.ariaInvalid) {
-      return props.ariaInvalid.toString()
+  const computedAriaInvalid = computed<'grammar' | 'spelling' | boolean | undefined>(() => {
+    if (props.state === false) {
+      return true
     }
-    return props.state === false ? 'true' : undefined
+    if (props.state === true) {
+      return undefined
+    }
+    if (typeof props.ariaInvalid === 'boolean') {
+      if (props.ariaInvalid === false) {
+        return undefined
+      }
+      return props.ariaInvalid
+    }
+    if (props.ariaInvalid === 'true') {
+      return true
+    }
+    if (props.ariaInvalid === 'false') {
+      return undefined
+    }
+    return props.ariaInvalid
   })
 
   const onInput = (evt: Event) => {