diff options
| author | Stephen Burgess <stephenburgess8@gmail.com> | 2017-04-23 13:33:44 -0500 |
|---|---|---|
| committer | Eugen <eugen@zeonfederated.com> | 2017-04-23 20:33:44 +0200 |
| commit | 995f0ad51ca2d151291ff827c7e0b2378ff0e108 (patch) | |
| tree | d39e9c1263aea26b86eb12c2b486071e25a059f6 /app/assets/javascripts/components | |
| parent | 948dd26931f450d42322c32a3eb9d97eccb69d4d (diff) | |
feat(cw-button): Add aria controls to CW trigger (#2303)
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.
Diffstat (limited to 'app/assets/javascripts/components')
3 files changed, 7 insertions, 5 deletions
diff --git a/app/assets/javascripts/components/features/compose/components/compose_form.jsx b/app/assets/javascripts/components/features/compose/components/compose_form.jsx index c5ff8a5bd..c148dded5 100644 --- a/app/assets/javascripts/components/features/compose/components/compose_form.jsx +++ b/app/assets/javascripts/components/features/compose/components/compose_form.jsx @@ -146,7 +146,7 @@ class ComposeForm extends React.PureComponent { <div className='compose-form'> <Collapsable isVisible={this.props.spoiler} fullHeight={50}> <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> </Collapsable> diff --git a/app/assets/javascripts/components/features/compose/components/text_icon_button.jsx b/app/assets/javascripts/components/features/compose/components/text_icon_button.jsx index edf413e87..4252596c2 100644 --- a/app/assets/javascripts/components/features/compose/components/text_icon_button.jsx +++ b/app/assets/javascripts/components/features/compose/components/text_icon_button.jsx @@ -13,10 +13,10 @@ class TextIconButton extends React.PureComponent { } render () { - const { label, title, active } = this.props; + const { label, title, active, ariaControls } = this.props; 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} </button> ); @@ -28,7 +28,8 @@ TextIconButton.propTypes = { label: PropTypes.string.isRequired, title: PropTypes.string, active: PropTypes.bool, - onClick: PropTypes.func.isRequired + onClick: PropTypes.func.isRequired, + ariaControls: PropTypes.string }; export default TextIconButton; diff --git a/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx b/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx index 61ac32b85..c54904b60 100644 --- a/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx +++ b/app/assets/javascripts/components/features/compose/containers/spoiler_button_container.jsx @@ -10,7 +10,8 @@ const messages = defineMessages({ const mapStateToProps = (state, { intl }) => ({ label: 'CW', title: intl.formatMessage(messages.title), - active: state.getIn(['compose', 'spoiler']) + active: state.getIn(['compose', 'spoiler']), + ariaControls: 'cw-spoiler-input' }); const mapDispatchToProps = dispatch => ({ |