diff --git a/packages/__docs__/src/Nav/index.tsx b/packages/__docs__/src/Nav/index.tsx index 4dec675caf..b5ae6784ec 100644 --- a/packages/__docs__/src/Nav/index.tsx +++ b/packages/__docs__/src/Nav/index.tsx @@ -34,6 +34,7 @@ import { capitalizeFirstLetter } from '@instructure/ui-utils' import { NavToggle } from '../NavToggle' import type { NavProps, NavState } from './props' +import { Alert } from '@instructure/ui-alerts' class Nav extends Component { _themeId: string @@ -45,7 +46,8 @@ class Nav extends Component { this.state = { query: null, expandedSections: this.setExpandedSections(false, props.sections), - userToggling: false + userToggling: false, + announcement: null } this._themeId = '__themes' @@ -79,15 +81,53 @@ class Nav extends Component { this.state.expandedSections ) + if (!value && this.state.queryStr) { + this.announceResults(-1) + } + clearTimeout(this.searchTimeout!) this.searchTimeout = setTimeout(() => { + this.setState( + { + query: value ? new RegExp(value, 'i') : null, + queryStr: value, + expandedSections, + userToggling: false + }, + () => { + if (value) { + this.announceResults(this.countSearchResults()) + } + } + ) + }, 500) + } + + announceResults(count: number) { + const message = + count === -1 + ? 'Search cleared' + : count === 0 + ? 'No results' + : `${count} ${count === 1 ? 'result' : 'results'} available below` + setTimeout(() => { this.setState({ - query: value ? new RegExp(value, 'i') : null, - queryStr: value, - expandedSections, - userToggling: false + announcement: message }) - }, 500) + }, 1000) + } + + countSearchResults(): number { + const { sections } = this.props + let count = 0 + Object.keys(sections).forEach((sectionId) => { + const uniqueDocs = this.matchingDocsInSection(sectionId).filter( + (docId: any, index: any, array: string | any[]) => + array.indexOf(docId) === index + ) + count += uniqueDocs.length + }) + return count } handleToggleSection = (sectionId: string, expanded: boolean) => { @@ -469,6 +509,15 @@ class Nav extends Component { elementRef={this.textInputRef} /> + + document.getElementById('flash-messages') as HTMLElement + } + liveRegionPoliteness="polite" + screenReaderOnly + > + {this.state.announcement} + {hasMatches && matches} diff --git a/packages/__docs__/src/Nav/props.ts b/packages/__docs__/src/Nav/props.ts index 487bc44281..3d2cb54201 100644 --- a/packages/__docs__/src/Nav/props.ts +++ b/packages/__docs__/src/Nav/props.ts @@ -59,6 +59,7 @@ type NavState = { expandedSections: Record userToggling: boolean queryStr?: string + announcement: string | null } export type { NavProps, NavState } export { allowedProps, propTypes }