javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(searchbar): screen readers correctly announce the cancel button text (#21049)

Browse Source 
fixes #21013
This commit is contained in:
Liam DeBeasi
2020-04-23 12:15:54 -04:00
committed by GitHub
parent 30a1c89688
commit 15a603b397
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/searchbar/searchbar.tsx
View File

@ -420,24 +420,29 @@ export class Searchbar implements ComponentInterface {
} }
render() { render() {
const { cancelButtonText } = this;
const animated = this.animated && config.getBoolean('animated', true); const animated = this.animated && config.getBoolean('animated', true);
const mode = getIonMode(this); const mode = getIonMode(this);
const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp'); const clearIcon = this.clearIcon || (mode === 'ios' ? 'close-circle' : 'close-sharp');
const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp'); const searchIcon = this.searchIcon || (mode === 'ios' ? 'search-outline' : 'search-sharp');
const shouldShowCancelButton = this.shouldShowCancelButton();
const cancelButton = (this.showCancelButton !== 'never') && ( const cancelButton = (this.showCancelButton !== 'never') && (
<button <button
aria-label="cancel" aria-label={cancelButtonText}
// Screen readers should not announce button if it is not visible on screen
aria-hidden={shouldShowCancelButton ? undefined : 'true'}
type="button" type="button"
tabIndex={mode === 'ios' && !this.shouldShowCancelButton() ? -1 : undefined} tabIndex={mode === 'ios' && !shouldShowCancelButton ? -1 : undefined}
onMouseDown={this.onCancelSearchbar} onMouseDown={this.onCancelSearchbar}
onTouchStart={this.onCancelSearchbar} onTouchStart={this.onCancelSearchbar}
class="searchbar-cancel-button" class="searchbar-cancel-button"
> >
<div> <div aria-hidden="true">
{ mode === 'md' { mode === 'md'
? <ion-icon aria-hidden="true" mode={mode} icon={this.cancelButtonIcon} lazy={false}></ion-icon> ? <ion-icon aria-hidden="true" mode={mode} icon={this.cancelButtonIcon} lazy={false}></ion-icon>
: this.cancelButtonText : cancelButtonText
} }
</div> </div>
</button> </button>
@ -481,7 +486,7 @@ export class Searchbar implements ComponentInterface {
{mode === 'md' && cancelButton} {mode === 'md' && cancelButton}
<ion-icon mode={mode} icon={searchIcon} lazy={false} class="searchbar-search-icon"></ion-icon> <ion-icon aria-hidden="true" mode={mode} icon={searchIcon} lazy={false} class="searchbar-search-icon"></ion-icon>
<button <button
aria-label="reset" aria-label="reset"