me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(cw-button): Add aria controls to CW trigger (#2303)

Browse source 
Add an ID to the CW spoiler input field to give aria-controls a handle on it. Pass that id to the CW trigger button. Modify text icon button component to accept aria controls id value. Add aria-expanded value to text icon button to indicate when it is expanded.
This commit is contained in:
Stephen Burgess 2017-04-23 13:33:44 -05:00 committed by Eugen
parent 7355f7f8f4
commit 38de6907d9
3 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/components/features/compose/components/compose_form.jsx
View file

@ -146,7 +146,7 @@ class ComposeForm extends React.PureComponent {
<div className='compose-form'> <div className='compose-form'>
<Collapsable isVisible={this.props.spoiler} fullHeight={50}> <Collapsable isVisible={this.props.spoiler} fullHeight={50}>
<div className="spoiler-input"> <div className="spoiler-input">
<input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type="text" className="spoiler-input__input" /> <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type="text" className="spoiler-input__input" id='cw-spoiler-input'/>
</div> </div>
</Collapsable> </Collapsable>

7
app/assets/javascripts/components/features/compose/components/text_icon_button.jsx
View file

@ -13,10 +13,10 @@ class TextIconButton extends React.PureComponent {
} }
render () { render () {
const { label, title, active } = this.props; const { label, title, active, ariaControls } = this.props;
return ( return (
<button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} onClick={this.handleClick}> <button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={this.handleClick} aria-controls={ariaControls}>
{label} {label}
</button> </button>
); );
@ -28,7 +28,8 @@ TextIconButton.propTypes = {
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
title: PropTypes.string, title: PropTypes.string,
active: PropTypes.bool, active: PropTypes.bool,
onClick: PropTypes.func.isRequired onClick: PropTypes.func.isRequired,
ariaControls: PropTypes.string
}; };
export default TextIconButton; export default TextIconButton;

3
app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx
View file

@ -10,7 +10,8 @@ const messages = defineMessages({
const mapStateToProps = (state, { intl }) => ({ const mapStateToProps = (state, { intl }) => ({
label: 'CW', label: 'CW',
title: intl.formatMessage(messages.title), title: intl.formatMessage(messages.title),
active: state.getIn(['compose', 'spoiler']) active: state.getIn(['compose', 'spoiler']),
ariaControls: 'cw-spoiler-input'
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({