fix some a11y issues with buttons on files page

some aria properties were camel-cased instead of hyphenated React will pass through data-* and aria-* attributes. It doesn't do the camel-case conversion that it does for other html attributes fixes CNVS-31800 and other similar bugs on the page test plan: - make sure the cancel button when renaming a file reads properly with a "cancel" label - make sure the text input when renaming a file reads properly - make sure the screenreader-only checkbox for selecting a file reads properly - make sure the upload button reads properly - make sure the view button in the toolbar when an file/folder is selected has an aria-disabled attribute that matches the disabled state of the button. Change-Id: I9115700800578d7ed297896239a61cc9764e196a Reviewed-on: https://gerrit.instructure.com/90120 Tested-by: Jenkins Reviewed-by: Felix Milea-Ciobanu <[email protected]> QA-Review: Jahnavi Yetukuri <[email protected]> Product-Review: Jon Willesen <[email protected]>
kazhuyo · Sep 15, 2016 · ea847e0 · ea847e0
1 parent b907f6e
commit ea847e0
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/app/jsx/files/FolderChild.jsx b/app/jsx/files/FolderChild.jsx
@@ -54,18 +54,18 @@ define([
               ref='newName'
               className='ic-Input ef-edit-name-form__input'
               placeholder={I18n.t('name', 'Name')}
-              ariaLabel={I18n.t('folder_name', 'Folder Name')}
+              aria-label={I18n.t('folder_name', 'Folder Name')}
               defaultValue={this.props.model.displayName()}
               maxLength='255'
               onKeyUp={function (event){ if (event.keyCode === 27) {this.cancelEditingName()} }.bind(this)}
             />
             <button
               type="button"
               className="Button ef-edit-name-form__button ef-edit-name-cancel"
-              ariaLabel={I18n.t('cancel', 'Cancel')}
               onClick={this.cancelEditingName}
             >
-              <i className='icon-x' />
+              <i className='icon-x' aria-hidden />
+              <span className='screenreader-only'>{I18n.t('cancel', 'Cancel')}</span>
             </button>
           </div>
         </form>
@@ -140,7 +140,6 @@ define([
         <label className= {keyboardCheckboxClass} role= 'gridcell'>
           <input
             type= 'checkbox'
-            ariaLabel= {selectCheckboxLabel}
             onFocus= {function(){ this.setState({hideKeyboardCheck: false})}.bind(this)}
             onBlur = {function () {this.setState({hideKeyboardCheck: true})}.bind(this)}
             className = {keyboardCheckboxClass}

diff --git a/app/jsx/files/Toolbar.jsx b/app/jsx/files/Toolbar.jsx
@@ -251,7 +251,6 @@ define([
               role= 'button'
               aria-label= {selectedItemIsFolder ? I18n.t('Viewing folders is not available') : I18n.t('View')}
               dataTooltip= ''
-              ariaDisabled= {!this.showingButtons || selectedItemIsFolder}
               disabled= {!this.showingButtons || selectedItemIsFolder}
               tabIndex= {selectedItemIsFolder ? -1 : 0}
             >

diff --git a/app/jsx/files/UploadButton.jsx b/app/jsx/files/UploadButton.jsx
@@ -48,10 +48,9 @@ define([
         <button
           type= 'button'
           className= 'btn btn-primary btn-upload'
-          ariaLabel= {I18n.t('Upload')}
           onClick= {this.handleAddFilesClick}
         >
-          <i className='icon-upload'/>&nbsp;
+          <i className='icon-upload' aria-hidden />&nbsp;
           <span className= {this.hiddenPhoneClassname()} >
             { I18n.t('Upload') }
           </span>