r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Finish adding aria labels

Browse source
This commit is contained in:
Cassie Tarakajian 2020-05-05 19:08:45 -04:00
parent cee22c3277
commit c708af1465
3 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
client/modules/User/components/Collection.jsx
View file

@ -53,9 +53,10 @@ const ShareURL = ({ value }) => {
<button
className="collection-share__button"
onClick={() => setShowURL(!showURL)}
aria-label="Show collection share URL"
>
<span>Share</span>
<DropdownArrowIcon className="collection-share__arrow" />
<DropdownArrowIcon className="collection-share__arrow" focusable="false" aria-hidden="true" />
</button>
{ showURL &&
<div className="collection__share-dropdown">
@ -97,8 +98,9 @@ class CollectionItemRowBase extends React.Component {
<button
className="collection-row__remove-button"
onClick={this.handleSketchRemove}
aria-label="Remove sketch from collection"
>
<RemoveIcon title="Remove" />
<RemoveIcon focusable="false" aria-hidden="true" />
</button>
</td>
</tr>);
@ -295,21 +297,43 @@ class Collection extends React.Component {
return null;
}
_getButtonLabel = (fieldName, displayName) => {
const { field, direction } = this.props.sorting;
let buttonLabel;
if (field !== fieldName) {
if (field === 'name') {
buttonLabel = `Sort by ${displayName} ascending.`;
} else {
buttonLabel = `Sort by ${displayName} descending.`;
}
} else if (direction === SortingActions.DIRECTION.ASC) {
buttonLabel = `Sort by ${displayName} descending.`;
} else {
buttonLabel = `Sort by ${displayName} ascending.`;
}
return buttonLabel;
}
_renderFieldHeader(fieldName, displayName) {
const { field, direction } = this.props.sorting;
const headerClass = classNames({
'sketches-table__header': true,
'sketches-table__header--selected': field === fieldName
});
const buttonLabel = this._getButtonLabel(fieldName, displayName);
return (
<th scope="col">
<button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
<button
className="sketch-list__sort-button"
onClick={() => this.props.toggleDirectionForField(fieldName)}
aria-label={buttonLabel}
>
<span className={headerClass}>{displayName}</span>
{field === fieldName && direction === SortingActions.DIRECTION.ASC &&
<ArrowUpIcon />
<ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
}
{field === fieldName && direction === SortingActions.DIRECTION.DESC &&
<ArrowDownIcon />
<ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
}
</button>
</th>

2
client/modules/User/components/GithubButton.jsx
View file

@ -9,7 +9,7 @@ function GithubButton(props) {
className="github-button"
href="/auth/github"
>
<GithubIcon className="github-icon" />
<GithubIcon className="github-icon" role="img" aria-label="GitHub Logo" focusable="false" />
<span>{props.buttonText}</span>
</a>
);

2
client/modules/User/components/GoogleButton.jsx
View file

@ -9,7 +9,7 @@ function GoogleButton(props) {
className="google-button"
href="/auth/google/"
>
<GoogleIcon className="google-icon" />
<GoogleIcon className="google-icon" role="img" aria-label="Google Logo" focusable="false" />
<span>{props.buttonText}</span>
</a>
);