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.

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 c5ff8a5bdc2604778b04ed1a8919cab3d6b7bd76..c148dded54574fb2f011df3d22557f41ec53d21c 100644 (file)
--- 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 edf413e874965043bcc70884654a10d103a1679f..4252596c2b38ffb7301b868e8eb9a4ea4ad4a53f 100644 (file)
--- 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 61ac32b857d19c04668cdf9be16130f60ea15942..c54904b60ab40e2658d6ae6864c4f00c1377b362 100644 (file)
--- 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 => ({