development/github-desktop
development/github-desktop
1
0
Fork 0
mirror of https://github.com/desktop/desktop synced 2024-10-31 05:19:03 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add aria-live message when input is cleared via the clear button

Browse source
This commit is contained in:
Sergio Padrino 2023-09-02 18:59:22 +02:00
parent 461e625aa3
commit b0aa81c607
1 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/src/ui/lib/text-box.tsx
View file

@ -4,6 +4,7 @@ import { createUniqueId, releaseUniqueId } from './id-pool'
import { showContextualMenu } from '../../lib/menu-item' import { showContextualMenu } from '../../lib/menu-item'
import { Octicon } from '../octicons' import { Octicon } from '../octicons'
import * as OcticonSymbol from '../octicons/octicons.generated' import * as OcticonSymbol from '../octicons/octicons.generated'
import { AriaLiveContainer } from '../accessibility/aria-live-container'
export interface ITextBoxProps { export interface ITextBoxProps {
/** The label for the input field. */ /** The label for the input field. */
@ -111,6 +112,11 @@ interface ITextBoxState {
* Text to display in the underlying input element * Text to display in the underlying input element
*/ */
readonly value?: string readonly value?: string
/**
* Input just cleared via clear button.
*/
readonly valueCleared: boolean
} }
/** An input element with app-standard styles. */ /** An input element with app-standard styles. */
@ -121,7 +127,7 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
const friendlyName = this.props.label || this.props.placeholder const friendlyName = this.props.label || this.props.placeholder
const inputId = createUniqueId(`TextBox_${friendlyName}`) const inputId = createUniqueId(`TextBox_${friendlyName}`)
this.setState({ inputId, value: this.props.value }) this.setState({ inputId, value: this.props.value, valueCleared: false })
} }
public componentWillUnmount() { public componentWillUnmount() {
@ -177,7 +183,9 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
private onChange = (event: React.FormEvent<HTMLInputElement>) => { private onChange = (event: React.FormEvent<HTMLInputElement>) => {
const value = event.currentTarget.value const value = event.currentTarget.value
this.setState({ value }, () => { // Even when the new value is '', we don't want to render the aria-live
// message saying "input cleared", so we set valueCleared to false.
this.setState({ value, valueCleared: false }, () => {
if (this.props.onValueChanged) { if (this.props.onValueChanged) {
this.props.onValueChanged(value) this.props.onValueChanged(value)
} }
@ -191,7 +199,7 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
this.inputElement.value = '' this.inputElement.value = ''
this.setState({ value: '' }, () => { this.setState({ value: '', valueCleared: true }, () => {
if (this.props.onValueChanged) { if (this.props.onValueChanged) {
this.props.onValueChanged('') this.props.onValueChanged('')
} }
@ -299,10 +307,17 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
{this.props.displayClearButton && {this.props.displayClearButton &&
this.state.value !== undefined && this.state.value !== undefined &&
this.state.value !== '' && ( this.state.value !== '' && (
<button className="clear-button" onClick={this.clearSearchText}> <button
className="clear-button"
aria-label="Clear"
onClick={this.clearSearchText}
>
<Octicon symbol={OcticonSymbol.x} /> <Octicon symbol={OcticonSymbol.x} />
</button> </button>
)} )}
{this.state.valueCleared && (
<AriaLiveContainer message="Input cleared" />
)}
</div> </div>
) )
} }