feat(QField): improve a11y - add alert role to error messages, add aria-invalid quasarframework#8884 (quasarframework#9988)

Author: pdanpdan

ui/dev/src/pages/form/form.vue

@@ -185,6 +185,7 @@
 export default {
   components: {
     customInput: {
+      inheritAttrs: false,
       props: [ 'value' ],
       render (h) {
         return h('q-field', {
@@ -201,6 +202,7 @@ export default {
     },
 
     myComp: {
+      inheritAttrs: false,
       render (h) {
         return h('div', {
           staticClass: 'q-validation-component'

ui/src/components/field/QField.js

@@ -394,7 +394,7 @@ export default Vue.extend({
 
       if (this.hasError === true) {
         if (this.computedErrorMessage !== void 0) {
-          msg = [ h('div', [ this.computedErrorMessage ]) ]
+          msg = [ h('div', { attrs: { role: 'alert' } }, [ this.computedErrorMessage ]) ]
           key = this.computedErrorMessage
         }
         else {

ui/src/mixins/validate.js

@@ -67,6 +67,11 @@ export default {
           this.validate()
         }
       }
+    },
+
+    hasError (invalid) {
+      const targetEl = document.getElementById(this.targetUid)
+      targetEl !== null && targetEl.setAttribute('aria-invalid', invalid === true)
     }
   },