Add aria-invalid to <wa-select> due to issue with <input readonly> (#149)

* add aria-invalid to readonly input

* add comments about select.ts

* prettier

* prettier

src/components/select/select.ts

@@ -836,10 +836,15 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
                 placeholder=${this.placeholder}
                 .disabled=${this.disabled}
                 .value=${this.displayLabel}
+                ?required=${this.required}
                 autocomplete="off"
                 spellcheck="false"
                 autocapitalize="off"
                 readonly
+                aria-invalid=${
+                  !this.validity.valid
+                  /** aria-invalid is required because readonly inputs are technically always valid so it never reads 'invalid data' for screen readers. */
+                }
                 aria-controls="listbox"
                 aria-expanded=${this.open ? 'true' : 'false'}
                 aria-haspopup="listbox"

src/internal/webawesome-element.ts

@@ -109,8 +109,8 @@ export class WebAwesomeFormAssociatedElement
   validators: Validator[] = [];
 
   // Should these be private?
-  @property({ state: true }) valueHasChanged: boolean = false;
-  @property({ state: true }) hasInteracted: boolean = false;
+  @property({ state: true, attribute: false }) valueHasChanged: boolean = false;
+  @property({ state: true, attribute: false }) hasInteracted: boolean = false;
 
   // This works around a limitation in Safari. It is a hacky way for us to preserve custom errors generated by the user.
   @property({ attribute: 'custom-error', reflect: true }) customError: string | null = null;
@@ -227,6 +227,7 @@ export class WebAwesomeFormAssociatedElement
     return this.internals.form;
   }
 
+  @property({ attribute: false, state: true, type: Object })
   get validity() {
     return this.internals.validity;
   }
@@ -269,7 +270,7 @@ export class WebAwesomeFormAssociatedElement
     }
 
     this.internals.setValidity(flags, message, anchor || undefined);
-
+    this.requestUpdate('validity');
     this.setCustomStates();
   }
 
@@ -360,6 +361,7 @@ export class WebAwesomeFormAssociatedElement
       !this.willValidate //
     ) {
       this.resetValidity();
+
       return;
     }