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

…3011)
primer · Aug 19, 2024 · 9507093 · 9507093
1 parent adcdddd
commit 9507093
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/khaki-waves-lie.md b/.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
diff --git a/app/components/primer/alpha/select_panel_element.ts b/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
  }

diff --git a/app/components/primer/beta/spinner.html.erb b/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 %>
diff --git a/lib/primer/forms/primer_text_field.ts b/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')
  }
 }