This repository was archived by the owner on Feb 21, 2023. It is now read-only.

Commit f0b000e

author

Megan Cole

committed

Add ability to pass custom aria-label to loader

1 parent beddcf5 commit f0b000eCopy full SHA for f0b000e

File tree

+13

-8

lines changed

+13

-8

lines changed

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export default class Example extends React.Component {`
`20`	`20`	`render() {`
`21`	`21`	`return (`
`22`	`22`	`<div>`
`23`		`- <BlockUi tag="div" blocking={this.state.blocking}>`
	`23`	`+ <BlockUi tag="div" blocking={this.state.blocking}ariaLabel="loading results">`
`24`	`24`	`<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>`
`25`	`25`	`<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>`
`26`	`26`	`</BlockUi>`

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -150,6 +150,7 @@ class BlockUi extends Component {`
`150`	`150`
`151`	`151`	const classes = blocking ? `block-ui ${className}` : className;
`152`	`152`	`const renderChilds = !blocking \|\| renderChildren;`
	`153`	`+ const { ariaLabel = 'loading' } = attributes;`
`153`	`154`
`154`	`155`	`return (`
`155`	`156`	`<Tag {...attributes} className={classes} aria-busy={blocking}>`
`@@ -170,7 +171,7 @@ class BlockUi extends Component {`
`170`	`171`	`>`
`171`	`172`	`<div className="block-ui-message">`
`172`	`173`	`{message}`
`173`		`- {React.isValidElement(Loader) ? Loader : <Loader />}`
	`174`	`+ {React.isValidElement(Loader) ? Loader : <Loader ariaLabel={ariaLabel}/>}`
`174`	`175`	`</div>`
`175`	`176`	`</div>`
`176`	`177`	`</div>`

Lines changed: 10 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,17 @@`
`1`	`1`	`import React from 'react';`
`2`		`-`
`3`		`-function Loader() {`
	`2`	`+importPropTypesfrom'prop-types';`
	`3`	`+function Loader({ ariaLabel }) {`
`4`	`4`	`return (`
`5`		`- <div className="loading-indicator">`
`6`		`- <span className="loading-bullet">•</span>{' '}`
`7`		`- <span className="loading-bullet">•</span>{' '}`
`8`		`- <span className="loading-bullet">•</span>`
	`5`	`+ <div className="loading-indicator"aria-label={ariaLabel}>`
	`6`	`+ <span aria-hidden="true"className="loading-bullet">•</span>{' '}`
	`7`	`+ <span aria-hidden="true"className="loading-bullet">•</span>{' '}`
	`8`	`+ <span aria-hidden="true"className="loading-bullet">•</span>`
`9`	`9`	`</div>`
`10`	`10`	`);`
`11`	`11`	`}`
`12`	`12`
	`13`	`+Loader.propTypes = {`
	`14`	`+ ariaLabel: PropTypes.string`
	`15`	`+}`
	`16`	`+`
`13`	`17`	`export default Loader;`

Comments

(0)