Commit 24d0d0e

authored

[aria-label-prop] change aria-label to aria-labelledby to eliminate redundancy and make it configurable (#1359)

1 parent e7de262 commit 24d0d0eCopy full SHA for 24d0d0e

File tree

+13

-5

lines changed

packages/react-bootstrap-table2-toolkit
- README.md
- src/search
  - SearchBar.js

+13

-5

lines changed

Lines changed: 3 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,9 @@ Custom the style on input element.`
`80`	`80`	`#### delay = [number]`
`81`	`81`	`milionsecond for debounce user input.`
`82`	`82`
	`83`	`+#### srText = [string]`
	`84`	`+Customize the screen reader text for the search input. (Default: "Search this table")`
	`85`	`+`
`83`	`86`	`### Search Options`
`84`	`87`
`85`	`88`	`#### defaultSearch - [string]`

Lines changed: 10 additions & 5 deletions

Original file line number	Diff line number	Diff line change
`@@ -56,21 +56,24 @@ class SearchBar extends React.Component {`
`56`	`56`	`className,`
`57`	`57`	`style,`
`58`	`58`	`placeholder,`
`59`		`- tableId`
	`59`	`+ tableId,`
	`60`	`+ srText`
`60`	`61`	`} = this.props;`
`61`	`62`
`62`	`63`	`return (`
`63`	`64`	`<label`
`64`	`65`	htmlFor={ `search-bar-${tableId}` }
`65`	`66`	`className="search-label"`
`66`	`67`	`>`
`67`		`- <span className="sr-only">Search this table</span>`
	`68`	+ <span id={ `search-bar-${tableId}-label` } className="sr-only">
	`69`	`+ { srText }`
	`70`	`+ </span>`
`68`	`71`	`<input`
`69`	`72`	`ref={ n => this.input = n }`
`70`	`73`	id={ `search-bar-${tableId}` }
`71`	`74`	`type="text"`
`72`	`75`	`style={ style }`
`73`		`- aria-label="enter text you want to search"`
	`76`	+ aria-labelledby={`search-bar-${tableId}-label`}
`74`	`77`	`onKeyUp={ () => this.onKeyup() }`
`75`	`78`	`onChange={ this.onChangeValue }`
`76`	`79`	className={ `form-control ${className}` }
`@@ -89,7 +92,8 @@ SearchBar.propTypes = {`
`89`	`92`	`style: PropTypes.object,`
`90`	`93`	`delay: PropTypes.number,`
`91`	`94`	`searchText: PropTypes.string,`
`92`		`- tableId: PropTypes.string`
	`95`	`+ tableId: PropTypes.string,`
	`96`	`+ srText: PropTypes.string`
`93`	`97`	`};`
`94`	`98`
`95`	`99`	`SearchBar.defaultProps = {`
`@@ -98,7 +102,8 @@ SearchBar.defaultProps = {`
`98`	`102`	`placeholder: 'Search',`
`99`	`103`	`delay: 250,`
`100`	`104`	`searchText: '',`
`101`		`- tableId: '0'`
	`105`	`+ tableId: '0',`
	`106`	`+ srText: 'Search this table'`
`102`	`107`	`};`
`103`	`108`
`104`	`109`	`export default SearchBar;`

Comments

(0)