ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix screenreader focus on numbers in sidebar 

fixes MC-230

Test Plan:
-Create a blueprint course
-Create a seperate course
-Add an associated course to the blueprint course
-Turn on screenreader and focus on the sidebar
-Notice that the number isn't focusable with the screenreader
-the number of associations is listed when focusing on button
-Repeat with unsynced changes

Change-Id: Iac0bc1130ad1f378e7a5c7dee356cf226a25e874
Reviewed-on: https://gerrit.instructure.com/114274
Tested-by: Jenkins
Reviewed-by: Felix Milea-Ciobanu <fmileaciobanu@instructure.com>
QA-Review: David Tan <dtan@instructure.com>
Product-Review: Felix Milea-Ciobanu <fmileaciobanu@instructure.com>
This commit is contained in:
Rachel Bengochea 2017-06-05 13:59:12 -06:00 committed by Felix Milea-Ciobanu
parent b2701b6150
commit 8968936afc
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/jsx/blueprint_courses/components/CourseSidebar.js
View File

@ -16,7 +16,7 @@
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import I18n from 'i18n!blueprint_settings'
import I18n from 'i18n!blueprint_course_sidebar'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
@ -27,6 +27,7 @@ import Button from 'instructure-ui/lib/components/Button'
import Typography from 'instructure-ui/lib/components/Typography'
import Spinner from 'instructure-ui/lib/components/Spinner'
import Tooltip from 'instructure-ui/lib/components/Tooltip'
import PresentationContent from 'instructure-ui/lib/components/PresentationContent'
import propTypes from '../propTypes'
import actions from '../actions'
@ -254,6 +255,7 @@ export default class CourseSidebar extends Component {
return (
<div className="bcs__row">
<Button
aria-label={I18n.t({ one: 'There is 1 Unsynced Change', other: 'There are %{count} Unsynced Changes' }, { count: this.props.unsyncedChanges.length })}
id="mcUnsyncedChangesBtn"
ref={(c) => { this.unsyncedChangesBtn = c }}
variant="link"
@ -261,7 +263,9 @@ export default class CourseSidebar extends Component {
>
<Typography>{I18n.t('Unsynced Changes')}</Typography>
</Button>
<Typography><span className="bcs__row-right-content">{this.props.unsyncedChanges.length}</span></Typography>
<PresentationContent>
<Typography><span className="bcs__row-right-content">{this.props.unsyncedChanges.length}</span></Typography>
</PresentationContent>
<MigrationOptions />
</div>
)
@ -273,12 +277,22 @@ export default class CourseSidebar extends Component {
maybeRenderAssociations () {
if (!this.props.canManageCourse) return null
const isSyncing = MigrationStates.isLoadingState(this.props.migrationStatus) || this.props.isLoadingBeginMigration
const length = this.props.associations.length
const button = (
<div className="bcs__row bcs__row__associations">
<Button disabled={isSyncing} id="mcSidebarAsscBtn" ref={(c) => { this.asscBtn = c }} variant="link" onClick={this.handleAssociationsClick}>
<Button
aria-label={I18n.t({ one: 'There is 1 Association', other: 'There are %{count} Associations' }, { count: length })}
disabled={isSyncing}
id="mcSidebarAsscBtn"
ref={(c) => { this.asscBtn = c }}
variant="link"
onClick={this.handleAssociationsClick}
>
<Typography>{I18n.t('Associations')}</Typography>
</Button>
<Typography><span className="bcs__row-right-content">{this.props.associations.length}</span></Typography>
<PresentationContent>
<Typography><span className="bcs__row-right-content">{length}</span></Typography>
</PresentationContent>
</div>
)