fix the tests + use VisuallyHidden component to insert accessible text

Author: severo

src/components/Spinner.tsx

@@ -1,8 +1,14 @@
 import { useConfig } from '../hooks/useConfig.js'
 import { cn } from '../lib/utils.js'
 import styles from '../styles/Spinner.module.css'
+import VisuallyHidden from './VisuallyHidden.js'
 
-export default function Spinner() {
+export default function Spinner({ text }: {text?: string}) {
   const { customClass } = useConfig()
-  return <div className={cn(styles.spinner, customClass?.spinner)}></div>
+  const spinnerText = text ?? 'Loading...'
+  return <div
+    className={cn(styles.spinner, customClass?.spinner)}
+    role='status'
+    aria-live='polite'
+  ><VisuallyHidden>{spinnerText}</VisuallyHidden></div>
 }

test/components/Folder.test.tsx

@@ -58,8 +58,9 @@ describe('Folder Component', () => {
     const source = getHyperparamSource('', { endpoint })
     assert(source?.kind === 'directory')
 
-    const { container } = await act(() => render(<Folder source={source} />))
-    expect(container.querySelector('.spinner')).toBeTruthy()
+    const { getByText } = await act(() => render(<Folder source={source} />))
+    const spinner = getByText('Loading...')
+    expect(spinner).toBeDefined()
   })
 
   it('handles file listing errors', async () => {

test/components/Spinner.test.tsx

@@ -1,12 +1,32 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 import { describe, expect, it } from 'vitest'
-import { Spinner } from '../../src/index.js'
+import { ConfigProvider, Spinner } from '../../src/index.js'
 
 describe('Spinner Component', () => {
   it('renders with base and additional class names', () => {
-    const { container } = render(<Spinner className="extra" />)
-    expect(container.firstElementChild?.classList).toContain('spinner')
-    expect(container.firstElementChild?.classList).toContain('extra')
+    const { container } = render(
+      <ConfigProvider value={{ customClass: { spinner: 'extra' } }}>
+        <Spinner/>
+      </ConfigProvider>
+    )
+    const classNames = [...container.firstElementChild?.classList.values() ?? []]
+    // Vite generates class names for CSS modules that look like _spinner_c053a8
+    expect(classNames.some(className => className.startsWith('_spinner_'))).toBe(true)
+    expect(classNames).toContain('extra')
+  })
+  it('is accessible as a role=status element', () => {
+    const { container } = render( <Spinner/> )
+    expect(container.firstElementChild?.getAttribute('role')).toBe('status')
+    expect(container.firstElementChild?.getAttribute('aria-live')).toBe('polite')
+  })
+  it('contains an accessible text for screen readers', () => {
+    const { getByText } = render( <Spinner/> )
+    expect(getByText('Loading...')).toBeDefined()
+  })
+  it('let pass a custom accessible text for screen readers', () => {
+    const text = 'Fetching data'
+    const { getByText } = render( <Spinner text={text}/> )
+    expect(getByText(text)).toBeDefined()
   })
 })