Desktop: Resolves #11621: Accessibility: Add status update after upda…

…te (#11634)
laurent22 · Jan 20, 2025 · 157ad2c · 157ad2c
1 parent 0ac710e
commit 157ad2c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/packages/app-desktop/gui/NoteList/NoteList2.tsx b/packages/app-desktop/gui/NoteList/NoteList2.tsx
@@ -201,7 +201,9 @@ const NoteList = (props: Props) => {
 
 	const renderEmptyList = () => {
 		if (props.notes.length) return null;
-		return <div className="emptylist">{getEmptyFolderMessage(props.folders, props.selectedFolderId)}</div>;
+		// Role status is necessary for the screenreader to announce that the list is empty, since when there are
+		// zero items there is not list to render
+		return <div className="emptylist" role="status">{getEmptyFolderMessage(props.folders, props.selectedFolderId)}</div>;
 	};
 
 	const renderFiller = (key: string, style: React.CSSProperties) => {
@@ -306,6 +308,7 @@ const NoteList = (props: Props) => {
 			onKeyUp={onKeyUp}
 			onDrop={onDrop}
 			onContextMenu={onContainerContextMenu}
+			id='notes-list'
 		>
 			{renderEmptyList()}
 			{renderFiller('top', topFillerStyle)}

diff --git a/packages/app-desktop/gui/SearchBar/SearchBar.tsx b/packages/app-desktop/gui/SearchBar/SearchBar.tsx
@@ -174,6 +174,7 @@ function SearchBar(props: Props) {
 				onKeyDown={onKeyDown}
 				onSearchButtonClick={onSearchButtonClick}
 				searchStarted={searchStarted}
+				aria-controls='notes-list'
 			/>
 		</Root>
 	);

diff --git a/packages/app-desktop/gui/lib/SearchInput/SearchInput.tsx b/packages/app-desktop/gui/lib/SearchInput/SearchInput.tsx
@@ -51,6 +51,7 @@ interface Props {
 	searchStarted: boolean;
 	placeholder?: string;
 	disabled?: boolean;
+	'aria-controls'?: string;
 }
 
 export interface OnChangeEvent {
@@ -79,6 +80,7 @@ export default function(props: Props) {
 				onKeyDown={props.onKeyDown}
 				spellCheck={false}
 				disabled={props.disabled}
+				aria-controls={props['aria-controls']}
 			/>
 			<SearchButton
 				aria-label={iconLabel}