From c8e534de0b46c33417da4fa125f667085ca3a17d Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Wed, 26 Jun 2024 16:29:31 -0400
Subject: [PATCH] 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    | 5 +++++
 src/internal/webawesome-element.ts | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 8bae8cd59..4e764c36d 100644
--- a/src/components/select/select.ts
+++ b/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"
diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts
index 361f39896..50ce2629b 100644
--- a/src/internal/webawesome-element.ts
+++ b/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;
     }