more accessibility

Author: SharonStrats

src/widgets/peopleSearch.ts

@@ -133,13 +133,21 @@ export const createPeopleSearch = function (
   warmupHint.style.color = '#666'
   warmupHint.textContent = 'Warming up contacts…'
 
+  const liveStatus = searchForm.appendChild(dom.createElement('div'))
+  liveStatus.className = 'people-search-sr-only'
+  liveStatus.setAttribute('role', 'status')
+  liveStatus.setAttribute('aria-live', 'polite')
+
     const discoveredPeople = new Map<string, PersonEntry>()
     const personRows = new Map<string, HTMLDivElement>()
     const status = searchDiv.appendChild(dom.createElement('p'))
     status.style.margin = '5px 0'
     status.style.color = '#666'
-    status.setAttribute('role', 'status')
-    status.setAttribute('aria-live', 'polite')
+
+  const setStatusText = function (text: string) {
+    status.textContent = text
+    liveStatus.textContent = text
+  }
 
     let activeRow: HTMLDivElement | null = null
 
@@ -163,6 +171,9 @@ export const createPeopleSearch = function (
       if (activeRow) {
         activeRow.style.backgroundColor = '#f0f0f0'
         activeRow.setAttribute('aria-selected', 'true')
+        if (typeof activeRow.scrollIntoView === 'function') {
+          activeRow.scrollIntoView({ block: 'nearest' })
+        }
         if (activeRow.id) {
           searchInput.setAttribute('aria-activedescendant', activeRow.id)
         }
@@ -527,7 +538,8 @@ export const createPeopleSearch = function (
     }
 
     discoveryStarted = true
-    status.textContent = 'Searching...'
+    searchDiv.setAttribute('aria-busy', 'true')
+    setStatusText('Searching...')
     warmupHint.style.display = 'block'
 
     discoveryPromise = (async function () {
@@ -563,15 +575,16 @@ export const createPeopleSearch = function (
       }
     })()
       .catch(() => {
-        status.textContent = 'Unable to load contacts.'
+        setStatusText('Unable to load contacts.')
       })
       .finally(() => {
         discoveryStarted = false
+        searchDiv.setAttribute('aria-busy', 'false')
         warmupHint.style.display = 'none'
         if (discoveredPeople.size === 0) {
-          status.textContent = me ? 'No contacts found.' : 'Sign in to search contacts.'
+          setStatusText(me ? 'No contacts found.' : 'Sign in to search contacts.')
         } else {
-          status.textContent = ''
+          setStatusText('')
         }
       })
 
@@ -584,7 +597,7 @@ export const createPeopleSearch = function (
 
     const visibleCount = updateVisibleRows(query.trim())
     if (!me) {
-      status.textContent = 'Sign in to search contacts.'
+      setStatusText('Sign in to search contacts.')
       return
     }
 
@@ -595,13 +608,13 @@ export const createPeopleSearch = function (
     if (searchId !== activeSearchId) return
 
     if (visibleCount > 0) {
-      status.textContent = discoveryStarted ? 'Searching...' : ''
+      setStatusText(discoveryStarted ? 'Searching...' : '')
       return
     }
 
-    status.textContent = discoveryStarted
+    setStatusText(discoveryStarted
       ? 'Searching...'
-      : 'No contacts match that name.'
+      : 'No contacts match that name.')
   }
 
   const onInputHandler = function () {
@@ -622,12 +635,31 @@ export const createPeopleSearch = function (
   const onKeyDownHandler = function (event: KeyboardEvent) {
     const visibleRows = getVisibleRows()
 
+    if (event.key === 'Tab') {
+      setActiveRow(null)
+      setDropdownOpen(false)
+      return
+    }
+
     if (event.key === 'Escape') {
       setActiveRow(null)
       setDropdownOpen(false)
       return
     }
 
+    if (event.key === 'Home' || event.key === 'End') {
+      if (visibleRows.length === 0) {
+        return
+      }
+      event.preventDefault()
+      if (searchDiv.style.display === 'none') {
+        setDropdownOpen(true)
+      }
+      const targetIndex = event.key === 'Home' ? 0 : visibleRows.length - 1
+      setActiveRow(visibleRows[targetIndex])
+      return
+    }
+
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault()
       if (searchDiv.style.display === 'none') {
@@ -639,7 +671,7 @@ export const createPeopleSearch = function (
       const currentIndex = activeRow ? visibleRows.indexOf(activeRow) : -1
       const nextIndex = event.key === 'ArrowDown'
         ? Math.min(currentIndex + 1, visibleRows.length - 1)
-        : Math.max(currentIndex - 1, 0)
+        : (currentIndex <= 0 ? visibleRows.length - 1 : currentIndex - 1)
       setActiveRow(visibleRows[nextIndex])
       return
     }

test/unit/widgets/peopleSearch.test.ts

@@ -244,6 +244,7 @@ describe('createPeopleSearch', () => {
     const input = form.querySelector('input') as HTMLInputElement
     const label = form.querySelector('label') as HTMLLabelElement
     const dropdown = form.querySelector('.people-search-dropdown') as HTMLDivElement
+    const liveRegion = form.querySelector('div[role="status"]') as HTMLDivElement
 
     expect(label).not.toBeNull()
     expect(label.textContent).toBe('Search for people')
@@ -253,11 +254,14 @@ describe('createPeopleSearch', () => {
     expect(input.getAttribute('aria-labelledby')).toBe(label.id)
     expect(input.getAttribute('aria-controls')).toBe(dropdown.id)
     expect(input.getAttribute('aria-expanded')).toBe('false')
+    expect(liveRegion).not.toBeNull()
+    expect(typeof liveRegion.textContent).toBe('string')
 
     await openDropdown(form)
 
     const personRow = rowFor(form, 'https://alice.example/profile/card#me')
     expect(dropdown.getAttribute('role')).toBe('listbox')
+    expect(dropdown.getAttribute('aria-busy')).toBe('false')
     expect(input.getAttribute('aria-expanded')).toBe('true')
     expect(personRow?.getAttribute('role')).toBe('option')
     expect(personRow?.id).toContain('-option-')
@@ -294,16 +298,21 @@ describe('createPeopleSearch', () => {
     const input = form.querySelector('input') as HTMLInputElement
     const dropdown = form.querySelector('.people-search-dropdown') as HTMLDivElement
     const aliceRow = rowFor(form, 'https://alice.example/profile/card#me') as HTMLDivElement
+    const bobRow = rowFor(form, 'https://bob.example/profile/card#me') as HTMLDivElement
 
     keyDown(input, 'ArrowDown')
     expect(input.getAttribute('aria-activedescendant')).toBe(aliceRow.id)
     expect(aliceRow.getAttribute('aria-selected')).toBe('true')
 
+    keyDown(input, 'ArrowUp')
+    expect(input.getAttribute('aria-activedescendant')).toBe(bobRow.id)
+    expect(bobRow.getAttribute('aria-selected')).toBe('true')
+
     keyDown(input, 'Enter')
     expect(onClickHandler).toHaveBeenCalledTimes(1)
     expect(onClickHandler).toHaveBeenCalledWith({
-      name: 'Alice Example',
-      webId: 'https://alice.example/profile/card#me',
+      name: 'Bob Stone',
+      webId: 'https://bob.example/profile/card#me',
       relationshipLabel: 'Contact'
     })
     expect(dropdown.style.display).toBe('none')
@@ -315,6 +324,50 @@ describe('createPeopleSearch', () => {
     expect(input.getAttribute('aria-expanded')).toBe('false')
   })
 
+  it('supports Home/End navigation and closes on Tab', async () => {
+    mockReadAddressBook.mockResolvedValue({
+      contacts: [
+        {
+          uri: 'https://pod.example/contacts/1#this',
+          name: 'Alice Example'
+        },
+        {
+          uri: 'https://pod.example/contacts/2#this',
+          name: 'Bob Stone'
+        }
+      ]
+    })
+
+    const kb = makeKb({
+      contactWebIdsByCardUri: {
+        'https://pod.example/contacts/1#this': 'https://alice.example/profile/card#me',
+        'https://pod.example/contacts/2#this': 'https://bob.example/profile/card#me'
+      }
+    })
+    const me = new NamedNode('https://user-11.example/profile/card#me')
+
+    const form = createPeopleSearch(document, kb as any, me)
+    document.body.appendChild(form)
+
+    await openDropdown(form)
+
+    const input = form.querySelector('input') as HTMLInputElement
+    const dropdown = form.querySelector('.people-search-dropdown') as HTMLDivElement
+    const aliceRow = rowFor(form, 'https://alice.example/profile/card#me') as HTMLDivElement
+    const bobRow = rowFor(form, 'https://bob.example/profile/card#me') as HTMLDivElement
+
+    keyDown(input, 'End')
+    expect(input.getAttribute('aria-activedescendant')).toBe(bobRow.id)
+
+    keyDown(input, 'Home')
+    expect(input.getAttribute('aria-activedescendant')).toBe(aliceRow.id)
+
+    keyDown(input, 'Tab')
+    expect(dropdown.style.display).toBe('none')
+    expect(input.getAttribute('aria-expanded')).toBe('false')
+    expect(input.getAttribute('aria-activedescendant')).toBeNull()
+  })
+
   it('matches names by tokenized, case-insensitive words', async () => {
     mockReadAddressBook.mockResolvedValue({
       contacts: [
@@ -427,4 +480,19 @@ describe('createPeopleSearch', () => {
 
     expect(dropdown.textContent).toContain('No contacts match that name.')
   })
+
+  it('updates hidden live status text for no-match state', async () => {
+    const kb = makeKb()
+    const me = new NamedNode('https://user-10.example/profile/card#me')
+
+    const form = createPeopleSearch(document, kb as any, me)
+    document.body.appendChild(form)
+
+    const liveRegion = form.querySelector('div[role="status"]') as HTMLDivElement
+
+    await openDropdown(form)
+    await setSearchQuery(form, 'no-person-will-match-this')
+
+    expect(liveRegion.textContent).toContain('No contacts match that name.')
+  })
 })