Skip to content

Commit 506e00d

Browse files
djbenderdjbender
committed
remove non-input grading els from KO nav
fixes: CNVS-33198 test plan: - given a grading scheme - the name of the scheme should not be focusable when tabbing through elements or using any other keyboard-only nav inputs. - given a grading period - the names and dates are not focusable when tabbing through input elements Change-Id: Iea2166f26d855e3b060a35b7b5fe2915534164ac Reviewed-on: https://gerrit.instructure.com/98945 Reviewed-by: Jeremy Neander <jneander@instructure.com> Tested-by: Jenkins Reviewed-by: Keith T. Garner <kgarner@instructure.com> QA-Review: KC Naegle <knaegle@instructure.com> Product-Review: Keith T. Garner <kgarner@instructure.com>
1 parent dd21d79 commit 506e00d

7 files changed

Lines changed: 169 additions & 193 deletions

File tree

‎app/jsx/grading/AccountGradingPeriod.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,16 +106,16 @@ define([
106106
<div className="GradingPeriodList__period">
107107
<div className="GradingPeriodList__period__attributes grid-row">
108108
<div className="GradingPeriodList__period__attribute col-xs-12 col-md-8 col-lg-3">
109-
<span tabIndex="0" ref="title">{this.props.period.title}</span>
109+
<span ref="title">{this.props.period.title}</span>
110110
</div>
111111
<div className="GradingPeriodList__period__attribute col-xs-12 col-md-8 col-lg-3">
112-
<span tabIndex="0" ref="startDate">{I18n.t("Start Date:")} {this.dateWithTimezone(this.props.period.startDate)}</span>
112+
<span ref="startDate">{I18n.t("Start Date:")} {this.dateWithTimezone(this.props.period.startDate)}</span>
113113
</div>
114114
<div className="GradingPeriodList__period__attribute col-xs-12 col-md-8 col-lg-3">
115-
<span tabIndex="0" ref="endDate">{I18n.t("End Date:")} {this.dateWithTimezone(this.props.period.endDate)}</span>
115+
<span ref="endDate">{I18n.t("End Date:")} {this.dateWithTimezone(this.props.period.endDate)}</span>
116116
</div>
117117
<div className="GradingPeriodList__period__attribute col-xs-12 col-md-8 col-lg-3">
118-
<span tabIndex="0" ref="closeDate">{I18n.t("Close Date:")} {this.dateWithTimezone(this.props.period.closeDate)}</span>
118+
<span ref="closeDate">{I18n.t("Close Date:")} {this.dateWithTimezone(this.props.period.closeDate)}</span>
119119
</div>
120120
</div>
121121
<div className="GradingPeriodList__period__actions">

‎app/jsx/grading/GradingPeriodSet.jsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -269,11 +269,13 @@ define([
269269
if (!this.props.readOnly && this.props.permissions.update) {
270270
let disabled = isActionsDisabled(this.state, this.props);
271271
return (
272-
<Button ref="editButton"
273-
variant="icon"
274-
disabled={disabled}
275-
onClick={this.editSet}
276-
title={I18n.t("Edit %{title}", { title: this.props.set.title })}>
272+
<Button
273+
ref="editButton"
274+
variant="icon"
275+
disabled={disabled}
276+
onClick={this.editSet}
277+
title={I18n.t("Edit %{title}", { title: this.props.set.title })}
278+
>
277279
<span className="screenreader-only">
278280
{I18n.t("Edit %{title}", { title: this.props.set.title })}
279281
</span>
@@ -407,13 +409,13 @@ define([
407409
aria-label="Toggle grading period visibility">
408410
<i className={"icon-mini-arrow-" + arrow}/>
409411
</button>
410-
<h2 ref="title" tabIndex="0" className="GradingPeriodSet__title">
412+
<h2 ref="title" className="GradingPeriodSet__title">
411413
{this.props.set.title}
412414
</h2>
413415
</div>
414416
{this.renderEditAndDeleteButtons()}
415417
</div>
416-
<div className="EnrollmentTerms__list" tabIndex="0">
418+
<div className="EnrollmentTerms__list">
417419
{this.termNames()}
418420
</div>
419421
</div>

‎app/jsx/grading/GradingPeriodSetCollection.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,6 @@ define([
3535
});
3636
};
3737

38-
const getShowGradingPeriodSetRef = function(set) {
39-
return "show-grading-period-set-" + set.id;
40-
};
41-
4238
const getEditGradingPeriodSetRef = function(set) {
4339
return "edit-grading-period-set-" + set.id;
4440
};
@@ -75,7 +71,7 @@ define([
7571
componentDidUpdate(prevProps, prevState) {
7672
if (prevState.editSet.id && (prevState.editSet.id !== this.state.editSet.id)) {
7773
let set = {id: prevState.editSet.id};
78-
this.refs[getShowGradingPeriodSetRef(set)].refs.editButton.focus();
74+
this.refs[this.getShowGradingPeriodSetRef(set)].refs.editButton.focus();
7975
}
8076
},
8177

@@ -240,9 +236,9 @@ define([
240236
if (index < 1) {
241237
return this.refs.addSetFormButton;
242238
} else {
243-
const setRef = getShowGradingPeriodSetRef(this.state.sets[index - 1]);
239+
const setRef = this.getShowGradingPeriodSetRef(this.state.sets[index - 1]);
244240
const setToFocus = this.refs[setRef];
245-
return setToFocus.refs.title;
241+
return setToFocus.refs.editButton;
246242
}
247243
},
248244

@@ -295,6 +291,10 @@ define([
295291
this.setState({ editSet: {id: null, saving: false} });
296292
},
297293

294+
getShowGradingPeriodSetRef(set) {
295+
return "show-grading-period-set-" + set.id;
296+
},
297+
298298
renderEditGradingPeriodSetForm(set) {
299299
let cancelCallback = () => {
300300
this.closeEditSetForm(set.id);
@@ -341,7 +341,7 @@ define([
341341
return (
342342
<GradingPeriodSet
343343
key = {set.id}
344-
ref = {getShowGradingPeriodSetRef(set)}
344+
ref = {this.getShowGradingPeriodSetRef(set)}
345345
set = {set}
346346
gradingPeriods = {set.gradingPeriods}
347347
urls = {urls}

‎app/jsx/grading/gradingPeriodTemplate.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ define([
2020

2121
const tabbableDate = (ref, date) => {
2222
let formattedDate = DateHelper.formatDatetimeForDisplay(date);
23-
return <span ref={ref} className="GradingPeriod__Action" tabIndex="0">{ formattedDate }</span>;
23+
return <span ref={ref} className="GradingPeriod__Action">{ formattedDate }</span>;
2424
};
2525

2626
const renderActions = ({ props, onDeleteGradingPeriod }) => {
@@ -117,7 +117,7 @@ define([
117117
return (
118118
<div>
119119
<span className="screenreader-only">{I18n.t("Grading Period Name")}</span>
120-
<span ref="title" tabIndex="0">{this.props.title}</span>
120+
<span ref="title">{this.props.title}</span>
121121
</div>
122122
);
123123
}

‎app/jsx/grading/gradingStandard.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,15 +156,15 @@ function(React, ReactDOM , update, DataRow, $, I18n, _, splitAssetString) {
156156
renderTitle: function() {
157157
if(this.props.editing){
158158
return (
159-
<div className="pull-left" tabIndex="0">
159+
<div className="pull-left">
160160
<input type="text" onChange={this.changeTitle}
161161
name="grading_standard[title]" className="scheme_name" title={I18n.t("Grading standard title")}
162162
value={this.state.editingStandard.title} ref="title"/>
163163
</div>
164164
);
165165
}
166166
return (
167-
<div className="pull-left" tabIndex="0">
167+
<div className="pull-left">
168168
<div className="title" ref="title">
169169
<span className="screenreader-only">{I18n.t("Grading standard title")}</span>
170170
{this.props.standard.title}

‎app/jsx/grading/tabContainer.jsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,23 @@ function(React, ReactDOM, GradingStandardCollection, GradingPeriodCollection, $,
2222
render: function () {
2323
if(this.props.multipleGradingPeriodsEnabled) {
2424
return (
25-
<div>
26-
<div className="ui-tabs-minimal">
27-
<ul>
28-
<li><a href="#grading-periods-tab" className="grading_periods_tab"> {I18n.t('Grading Periods')}</a></li>
29-
<li><a href="#grading-standards-tab" className="grading_standards_tab"> {I18n.t('Grading Schemes')}</a></li>
30-
</ul>
31-
<div ref="gradingPeriods" id="grading-periods-tab">
32-
<GradingPeriodCollection/>
33-
</div>
34-
<div ref="gradingStandards" id="grading-standards-tab">
35-
<GradingStandardCollection/>
36-
</div>
25+
<div className="ui-tabs-minimal">
26+
<ul>
27+
<li><a href="#grading-periods-tab" className="grading_periods_tab"> {I18n.t('Grading Periods')}</a></li>
28+
<li><a href="#grading-standards-tab" className="grading_standards_tab"> {I18n.t('Grading Schemes')}</a></li>
29+
</ul>
30+
<div ref="gradingPeriods" id="grading-periods-tab">
31+
<GradingPeriodCollection/>
32+
</div>
33+
<div ref="gradingStandards" id="grading-standards-tab">
34+
<GradingStandardCollection/>
3735
</div>
3836
</div>
3937
);
4038
} else{
4139
return (
4240
<div ref="gradingStandards">
43-
<h1 tabIndex="0">{I18n.t("Grading Schemes")}</h1>
41+
<h1>{I18n.t("Grading Schemes")}</h1>
4442
<GradingStandardCollection/>
4543
</div>
4644
);

0 commit comments

Comments
 (0)