fix(a11y): Global search not announcing results properly (#40023)

Author: dougfabris

apps/meteor/client/navbar/NavBarSearch/NavBarSearch.tsx

@@ -1,4 +1,4 @@
-import { Box, Icon, TextInput } from '@rocket.chat/fuselage';
+import { Box, Icon, IconButton, TextInput } from '@rocket.chat/fuselage';
 import { useEffectEvent, useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { useCallback, useEffect, useRef } from 'react';
 import { useFocusManager, useOverlayTrigger } from 'react-aria';
@@ -74,7 +74,7 @@ const NavBarSearch = () => {
 
 	return (
 		<FormProvider {...methods}>
-			<Box width='100%' maxWidth='x622' role='search' mi={8} position='relative'>
+			<Box width='100%' maxWidth='x622' role='search' aria-label={t('Search_rooms')} mi={8} position='relative'>
 				<TextInput
 					{...rest}
 					{...triggerProps}
@@ -85,8 +85,15 @@ const NavBarSearch = () => {
 					placeholder={placeholder}
 					ref={mergedRefs}
 					role='combobox'
+					aria-autocomplete='list'
 					small
-					addon={<Icon name={isDirty ? 'cross' : 'magnifier'} size='x20' onClick={handleClearText} />}
+					addon={
+						isDirty ? (
+							<IconButton mini icon='cross' aria-label={t('Clear')} onClick={handleClearText} />
+						) : (
+							<Icon name='magnifier' size='x16' aria-label={t('Search')} />
+						)
+					}
 				/>
 				{state.isOpen && <NavBarSearchListBox state={state} overlayProps={overlayProps} />}
 			</Box>

apps/meteor/client/navbar/NavBarSearch/NavBarSearchListbox.tsx

@@ -11,6 +11,7 @@ import NavBarSearchNoResults from './NavBarSearchNoResults';
 import NavBarSearchRow from './NavBarSearchRow';
 import { useSearchItems } from './hooks/useSearchItems';
 import { useListboxNavigation } from './hooks/useSearchNavigation';
+import ResultsLiveRegion from '../../components/ResultsLiveRegion';
 
 type NavBarSearchListBoxProps = {
 	state: OverlayTriggerState;
@@ -49,22 +50,18 @@ const NavBarSearchListBox = ({ state, overlayProps }: NavBarSearchListBoxProps)
 			display='flex'
 			width='100%'
 			flexDirection='column'
-			aria-live='polite'
-			aria-atomic='true'
-			aria-busy={isLoading}
 		>
+			<ResultsLiveRegion shouldAnnounce={!isLoading} itemCount={items.length} />
 			<CustomScrollbars>
-				<div {...overlayProps} role='listbox' aria-label={t('Channels')} tabIndex={-1} onKeyDown={handleKeyDown}>
+				<div {...overlayProps} role='listbox' aria-label={t('Channels')} aria-busy={isLoading} tabIndex={-1} onKeyDown={handleKeyDown}>
 					{items.length === 0 && !isLoading && <NavBarSearchNoResults />}
 					{items.length > 0 && (
-						<Box color='titles-labels' fontScale='c1' fontWeight='bold' pi={12} mbe={4}>
+						<Box color='titles-labels' fontScale='c1' fontWeight='bold' pi={12} mbe={4} role='presentation' aria-hidden>
 							{filterText ? t('Results') : t('Recent')}
 						</Box>
 					)}
 					{items.map((item) => (
-						<div key={item._id}>
-							<NavBarSearchRow room={item} onClick={handleSelect} />
-						</div>
+						<NavBarSearchRow key={item._id} room={item} onClick={handleSelect} />
 					))}
 				</div>
 			</CustomScrollbars>

packages/i18n/src/locales/en.i18n.json

@@ -3664,7 +3664,6 @@
   "Navigation": "Navigation",
   "Navigation_History": "Navigation History",
   "Navigation_bar": "Navigation bar",
-  "Navigation_bar_description": "Introducing the navigation bar — a higher-level navigation designed to help users quickly find what they need. With its compact design and intuitive organization, this streamlined sidebar optimizes screen space while providing easy access to essential software features and sections.",
   "Never": "Never",
   "New": "New",
   "New_Application": "New Application",

packages/i18n/src/locales/hi-IN.i18n.json

@@ -3075,7 +3075,6 @@
   "Navigation": "मार्गदर्शन",
   "Navigation_History": "नेविगेशन इतिहास",
   "Navigation_bar": "नेविगेशन पट्टी",
-  "Navigation_bar_description": "नेविगेशन बार का परिचय - एक उच्च-स्तरीय नेविगेशन जो उपयोगकर्ताओं को उनकी आवश्यकता के अनुसार शीघ्रता से ढूंढने में मदद करने के लिए डिज़ाइन किया गया है। अपने कॉम्पैक्ट डिज़ाइन और सहज संगठन के साथ, यह सुव्यवस्थित साइडबार आवश्यक सॉफ़्टवेयर सुविधाओं और अनुभागों तक आसान पहुँच प्रदान करते हुए स्क्रीन स्थान को अनुकूलित करता है।",
   "Never": "कभी नहीं",
   "New": "नया",
   "New_Application": "नए आवेदन",

packages/i18n/src/locales/nb.i18n.json

@@ -3645,7 +3645,6 @@
   "Navigation": "Navigasjon",
   "Navigation_History": "Navigasjonshistorikk",
   "Navigation_bar": "Navigasjonslinje",
-  "Navigation_bar_description": "Vi introduserer navigasjonslinjen – en navigasjon på høyere nivå designet for å hjelpe brukere raskt å finne det de trenger. Med sin kompakte design og intuitive organisering, optimaliserer denne strømlinjeformede sidelinjen skjermplass samtidig som den gir enkel tilgang til viktige programvarefunksjoner og -seksjoner.",
   "Never": "Aldri",
   "New": "Ny",
   "New_Application": "Ny applikasjon",

packages/i18n/src/locales/nn.i18n.json

@@ -3407,7 +3407,6 @@
   "Navigation": "Navigasjon",
   "Navigation_History": "Navigasjonshistorikk",
   "Navigation_bar": "Navigasjonslinje",
-  "Navigation_bar_description": "Vi introduserer navigasjonslinjen – en navigasjon på høyere nivå designet for å hjelpe brukere raskt å finne det de trenger. Med sin kompakte design og intuitive organisering, optimaliserer denne strømlinjeformede sidelinjen skjermplass samtidig som den gir enkel tilgang til viktige programvarefunksjoner og -seksjoner.",
   "Never": "Aldri",
   "New": "Ny",
   "New_Application": "Ny applikasjon",

packages/i18n/src/locales/pt-BR.i18n.json

@@ -3455,7 +3455,6 @@
   "Navigation": "Navegação",
   "Navigation_History": "Histórico de navegação",
   "Navigation_bar": "Barra de navegação",
-  "Navigation_bar_description": "Apresentando a barra de navegação - uma navegação de nível superior projetada para ajudar os usuários a encontrar rapidamente o que precisam. Com seu design compacto e organização intuitiva, essa barra lateral simplificada otimiza o espaço da tela e fornece acesso fácil a recursos e seções essenciais do software.",
   "Never": "Nunca",
   "New": "Novo",
   "New_Application": "Novo aplicativo",

packages/i18n/src/locales/sv.i18n.json

@@ -3470,7 +3470,6 @@
   "Navigation": "Navigering",
   "Navigation_History": "Navigeringshistorik",
   "Navigation_bar": "Navigeringsfält",
-  "Navigation_bar_description": "Vi presenterar navigeringsfältet - en navigering på högre nivå som är utformad för att hjälpa användare att snabbt hitta det de behöver. Med sin kompakta design och intuitiva organisation optimerar detta strömlinjeformade sidofält skärmutrymmet samtidigt som det ger enkel åtkomst till viktiga programfunktioner och avsnitt.",
   "Never": "Aldrig",
   "New": "Nytt",
   "New_Application": "Ny applikation",

packages/i18n/src/locales/zh.i18n.json

@@ -3642,7 +3642,6 @@
   "Navigation": "导航",
   "Navigation_History": "浏览历史记录",
   "Navigation_bar": "导航栏",
-  "Navigation_bar_description": "导航栏为更高层级的导航，旨在帮助用户快速找到所需内容。其紧凑设计与直观组织可优化屏幕空间，同时便捷访问关键功能与区域。",
   "Never": "从不",
   "New": "新",
   "New_Application": "新应用",