Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve image flipper a11y
Browse files Browse the repository at this point in the history
Add more descriptive labels to the controls for example images.
Make the example image a live region.
eatyourgreens committed Oct 25, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent cc00b5e commit c366034
Showing 1 changed file with 7 additions and 4 deletions.
11 changes: 7 additions & 4 deletions app/classifier/tasks/survey/image-flipper.jsx
Original file line number Diff line number Diff line change
@@ -32,10 +32,13 @@ class ImageFlipper extends React.Component {

render() {
return (
<span className="survey-task-image-flipper">
<div
className="survey-task-image-flipper"
>
{this.renderPreload()}
<Thumbnail
alt={`Frame ${this.state.frame}`}
alt={`Example photo ${this.state.frame + 1}`}
aria-live="polite"
src={this.props.images[this.state.frame]}
className="survey-task-image-flipper-image"
width={500}
@@ -49,19 +52,19 @@ class ImageFlipper extends React.Component {
className={`survey-task-image-flipper-pip ${index === this.state.frame ? 'active' : ''}`}
>
<input
aria-label={`Example ${index + 1}`}
type="radio"
name="image-flipper"
autoFocus={index === 0}
checked={index === this.state.frame}
onChange={this.handleFrameChange.bind(this, index)}
/>
{index + 1}
</label>
)
)
}
</div>
</span>
</div>
);
}
}

0 comments on commit c366034

Please sign in to comment.