Hide "loading" screen reader-only text after visual spinner leaves (#3011)

Author: JoyceZhu

.changeset/khaki-waves-lie.md

@@ -0,0 +1,6 @@
+---
+'@primer/view-components': patch
+---
+
+Remove "loading" screenreader-only text after Spinner load for
+`eventually_local` SelectPanels

app/components/primer/alpha/select_panel_element.ts

@@ -547,6 +547,7 @@ export class SelectPanelElement extends HTMLElement {
       }
 
       case 'loadend': {
+        this.#filterInputTextFieldElement.hideLeadingSpinner()
         this.dispatchEvent(new CustomEvent('loadend'))
         break
       }

app/components/primer/beta/spinner.html.erb

@@ -3,5 +3,5 @@
   <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
 <% end %>
 <% if no_aria_label? %>
-  <span class="sr-only"><%= @sr_text %></span>
+  <span class="spinner-screenreader-text sr-only"><%= @sr_text %></span>
 <% end %>

lib/primer/forms/primer_text_field.ts

@@ -10,6 +10,8 @@ declare global {
     'auto-check-error': AutoCheckErrorEvent
   }
 }
+
+const SCREENREADER_TEXT_CLASSNAME = 'spinner-screenreader-text'
 @controller
 export class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
@@ -97,11 +99,13 @@ export class PrimerTextFieldElement extends HTMLElement {
 
   showLeadingSpinner(): void {
     this.leadingSpinner?.removeAttribute('hidden')
+    this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.removeAttribute('hidden')
     this.leadingVisual?.setAttribute('hidden', '')
   }
 
   hideLeadingSpinner(): void {
     this.leadingSpinner?.setAttribute('hidden', '')
+    this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.setAttribute('hidden', '')
     this.leadingVisual?.removeAttribute('hidden')
   }
 }