Merge pull request #75 from edx/jkantor/a11y-2

fix(a11y): add select aria-labels, row headers

package.json

@@ -25,67 +25,67 @@
   },
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.3",
-    "@edx/frontend-auth": "^1.2.1",
+    "@edx/frontend-auth": "^1.3.0",
     "@edx/frontend-component-footer": "^1.0.0",
-    "@edx/paragon": "^3.7.2",
+    "@edx/paragon": "^3.8.3",
     "babel-polyfill": "^6.26.0",
-    "classnames": "^2.2.5",
-    "email-prop-type": "^1.1.5",
+    "classnames": "^2.2.6",
+    "email-prop-type": "^1.1.7",
     "font-awesome": "^4.7.0",
     "history": "^4.7.2",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.2",
     "query-string": "^5.1.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-redux": "^5.0.7",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-redux": "^5.1.1",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "^3.7.2",
-    "redux-devtools-extension": "^2.13.2",
+    "redux-devtools-extension": "^2.13.7",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0",
-    "whatwg-fetch": "^2.0.3"
+    "redux-thunk": "^2.3.0",
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
-    "autoprefixer": "^9.4.2",
-    "axios-mock-adapter": "^1.15.0",
+    "autoprefixer": "^9.4.5",
+    "axios-mock-adapter": "^1.16.0",
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.0",
-    "babel-loader": "^7.1.2",
+    "babel-eslint": "^8.2.6",
+    "babel-jest": "^22.4.4",
+    "babel-loader": "^7.1.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "codecov": "^3.0.0",
-    "css-loader": "^0.28.9",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "es-check": "^2.0.2",
-    "eslint-config-edx": "^4.0.3",
-    "fetch-mock": "^6.3.0",
+    "codecov": "^3.1.0",
+    "css-loader": "^0.28.11",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "es-check": "^2.3.0",
+    "eslint-config-edx": "^4.0.4",
+    "fetch-mock": "^6.5.2",
     "file-loader": "^1.1.9",
     "html-webpack-harddisk-plugin": "^0.2.0",
-    "html-webpack-plugin": "^3.0.3",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
     "image-webpack-loader": "^4.2.0",
-    "jest": "^22.4.0",
+    "jest": "^22.4.4",
     "mini-css-extract-plugin": "^0.4.0",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.11.0",
     "postcss-loader": "^3.0.0",
-    "react-dev-utils": "^5.0.0",
-    "react-test-renderer": "^16.2.0",
-    "redux-mock-store": "^1.5.1",
+    "react-dev-utils": "^5.0.3",
+    "react-test-renderer": "^16.7.0",
+    "redux-mock-store": "^1.5.3",
     "sass-loader": "^6.0.6",
-    "semantic-release": "^15.10.7",
-    "style-loader": "^0.20.2",
-    "travis-deploy-once": "^5.0.9",
-    "webpack": "^4.25.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.0",
-    "webpack-merge": "^4.1.1"
+    "semantic-release": "^15.13.3",
+    "style-loader": "^0.20.3",
+    "travis-deploy-once": "^5.0.11",
+    "webpack": "^4.28.4",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-merge": "^4.2.1"
   },
   "jest": {
     "setupFiles": [
@@ -106,6 +106,7 @@
     ],
     "transformIgnorePatterns": [
       "/node_modules/(?!(@edx/paragon)/).*/"
-    ]
+    ],
+    "testURL": "http://localhost"
   }
 }

src/components/Gradebook/gradebook.scss

@@ -68,6 +68,10 @@
         padding-left: 170px;
     }
 
+    .table tbody th {
+        font-weight: normal;
+    }
+
     .link-style {
         color: #0075b4;
         &:hover, &:focus {

src/components/Gradebook/index.jsx

@@ -244,7 +244,7 @@ export default class Gradebook extends React.Component {
               href={this.lmsInstructorDashboardUrl(this.props.match.params.courseId)}
               className="mb-3"
             >
-              {'<< Back to Dashboard'}
+              <span aria-hidden="true">{'<< '}</span> {'Back to Dashboard'}
             </a>
             <h1>Gradebook</h1>
             <h3> {this.props.match.params.courseId}</h3>
@@ -261,8 +261,8 @@ export default class Gradebook extends React.Component {
             <hr />
             <div className="d-flex justify-content-between" >
               <div>
-                <div>
-                  Score View:
+                <div role="radiogroup" aria-labelledby="score-view-group-label">
+                  <span id="score-view-group-label">Score View:</span>
                   <span>
                     <input
                       id="score-view-percent"
@@ -294,6 +294,7 @@ export default class Gradebook extends React.Component {
                     </span>
                     <InputSelect
                       name="assignment-types"
+                      ariaLabel="Assignment Types"
                       value={this.mapSelectedTrackEntry(this.props.selectedAssignmentType)}
                       options={this.mapAssignmentTypeEntries(this.props.assignmnetTypes)}
                       onChange={this.updateAssignmentTypes}
@@ -306,6 +307,7 @@ export default class Gradebook extends React.Component {
                   </span>
                   <InputSelect
                     name="Tracks"
+                    ariaLabel="Tracks"
                     disabled={this.props.tracks.length === 0}
                     value={this.mapSelectedTrackEntry(this.props.selectedTrack)}
                     options={this.mapTracksEntries(this.props.tracks)}
@@ -313,6 +315,7 @@ export default class Gradebook extends React.Component {
                   />
                   <InputSelect
                     name="Cohorts"
+                    ariaLabel="Cohorts"
                     disabled={this.props.cohorts.length === 0}
                     value={this.mapSelectedCohortEntry(this.props.selectedCohort)}
                     options={this.mapCohortsEntries(this.props.cohorts)}
@@ -347,6 +350,7 @@ export default class Gradebook extends React.Component {
                 tableSortable
                 defaultSortDirection="asc"
                 defaultSortedColumn="username"
+                rowHeaderColumnKey="username"
               />
             </div>
             {PageButtons(this.props)}