Add various aria labels and a11y features to PG
1) Added aria-label to account-dropdown avatar
2) Added aria-label to change-star
3) Added computed aria-label to issue number
4) No action required
5) Added aria-label to remove reviewer button
6) No action required
7) Added aria-label to checkboxes
8) Added computed aria-label to file status marker
9) Added aria-label to file line +- markers
10) Solved by agable@
11) No longer an issue with unrelated changes to comments
Feature: Issue 4279
Change-Id: If735f369bae5d1e867c664a4d55d11664bbc5196
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
index 873acddc..c606395 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -250,11 +250,17 @@
<div class="container" hidden$="{{_loading}}">
<div class="header">
<span class="header-title">
- <gr-change-star id="changeStar"
+ <gr-change-star
+ id="changeStar"
change="{{_change}}" hidden$="[[!_loggedIn]]"></gr-change-star>
- <a href$="[[_computeChangePermalink(_change._number)]]">[[_change._number]]</a><!--
- --><template is="dom-if" if="[[_changeStatus]]">
- ([[_changeStatus]]<!--
+ <a
+ aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]"
+ href$="[[_computeChangePermalink(_change._number)]]">[[_change._number]]</a><!--
+ --><template is="dom-if" if="[[_changeStatus]]"><!--
+ --> (<!--
+ --><span
+ aria-label$="Change status: [[_changeStatus]]"
+ tabindex="0">[[_changeStatus]]</span><!--
--><template
is="dom-if"
if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]">
@@ -264,10 +270,9 @@
commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]"
server-config="[[serverConfig]]"></gr-commit-info><!--
--></template><!--
- -->)<!--
- --></template><!--
- -->:
- [[_change.subject]]
+ -->)<!--
+ --></template><!--
+ -->: [[_change.subject]]
</span>
</div>
<section class="changeInfo">
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
index 20ef2e2..6bd0a8b 100644
--- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
+++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.js
@@ -1015,5 +1015,9 @@
},
_computeReplyDisabled: function() { return false; },
+
+ _computeChangePermalinkAriaLabel: function(changeNum) {
+ return 'Change ' + changeNum;
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
index ae51654..bb9cf15 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -236,9 +236,11 @@
<div class="reviewed" hidden$="[[!_loggedIn]]" hidden>
<input type="checkbox" checked$="[[_computeReviewed(file, _reviewed)]]"
data-path$="[[file.__path]]" on-change="_handleReviewedChange"
- class="reviewed">
+ class="reviewed" aria-label="Reviewed checkbox">
</div>
- <div class$="[[_computeClass('status', file.__path)]]">
+ <div class$="[[_computeClass('status', file.__path)]]"
+ tabindex="0"
+ aria-label$="[[_computeFileStatusLabel(file.status)]]">
[[_computeFileStatus(file.status)]]
</div>
<a class$="[[_computePathClass(file.__expanded)]]"
@@ -272,10 +274,18 @@
file.__path)]]
</div>
<div class$="[[_computeClass('stats', file.__path)]]">
- <span class="added" hidden$=[[file.binary]]>
+ <span
+ class="added"
+ tabindex="0"
+ aria-label$="[[file.lines_inserted]] lines added"
+ hidden$=[[file.binary]]>
+[[file.lines_inserted]]
</span>
- <span class="removed" hidden$=[[file.binary]]>
+ <span
+ class="removed"
+ tabindex="0"
+ aria-label$="[[file.lines_deleted]] lines removed"
+ hidden$=[[file.binary]]>
-[[file.lines_deleted]]
</span>
<span class$="[[_computeBinaryClass(file.size_delta)]]"
@@ -307,18 +317,28 @@
</template>
<div class="row totalChanges">
<div class="total-stats" hidden$="[[_hideChangeTotals]]">
- <span class="added">+[[_patchChange.inserted]]</span>
- <span class="removed">-[[_patchChange.deleted]]</span>
+ <span
+ class="added"
+ tabindex="0"
+ aria-label$="[[_patchChange.inserted]] lines added">
+ +[[_patchChange.inserted]]
+ </span>
+ <span
+ class="removed"
+ tabindex="0"
+ aria-label$="[[_patchChange.deleted]] lines removed">
+ -[[_patchChange.deleted]]
+ </span>
</div>
</div>
<div class="row totalChanges">
<div class="total-stats" hidden$="[[_hideBinaryChangeTotals]]">
- <span class="added">
+ <span class="added" aria-label="Total lines added">
[[_formatBytes(_patchChange.size_delta_inserted)]]
[[_formatPercentage(_patchChange.total_size,
_patchChange.size_delta_inserted)]]
</span>
- <span class="removed">
+ <span class="removed" aria-label="Total lines removed">
[[_formatBytes(_patchChange.size_delta_deleted)]]
[[_formatPercentage(_patchChange.total_size,
_patchChange.size_delta_deleted)]]
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.js b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.js
index a1f88b6..ec463b6 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.js
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.js
@@ -19,6 +19,14 @@
var COMMIT_MESSAGE_PATH = '/COMMIT_MSG';
+ var FileStatus = {
+ A: 'Added',
+ C: 'Copied',
+ D: 'Deleted',
+ R: 'Renamed',
+ W: 'Rewritten',
+ };
+
Polymer({
is: 'gr-file-list',
@@ -650,5 +658,11 @@
return (rev && rev.description) ?
rev.description.substring(0, PATCH_DESC_MAX_LENGTH) : '';
},
+
+ _computeFileStatusLabel: function(status) {
+ var statusCode = this._computeFileStatus(status);
+ return FileStatus.hasOwnProperty(statusCode) ?
+ FileStatus[statusCode] : 'Status Unknown';
+ },
});
})();
diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html
index 07c922a..015cfc5 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html
+++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html
@@ -41,7 +41,7 @@
horizontal-align="right">
<span hidden$="[[_hasAvatars]]" hidden>[[account.name]]</span>
<gr-avatar account="[[account]]" hidden$="[[!_hasAvatars]]" hidden
- image-size="56"></gr-avatar>
+ image-size="56" aria-label="Account avatar"></gr-avatar>
</gr-dropdown>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
</template>
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
index fc06b8c..ddfdae7 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html
@@ -73,7 +73,9 @@
<gr-account-link account="[[account]]"></gr-account-link>
<gr-button
id="remove"
- hidden$="[[!removable]]" hidden
+ hidden$="[[!removable]]"
+ hidden
+ aria-label="Remove"
class$="remove [[_getBackgroundClass(transparentBackground)]]"
on-tap="_handleRemoveTap">×</gr-button>
</div>
diff --git a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
index 93bf5ee..03be4bb 100644
--- a/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
+++ b/polygerrit-ui/app/elements/shared/gr-change-star/gr-change-star.html
@@ -42,7 +42,10 @@
fill: #ffac33;
}
</style>
- <button class$="[[_computeStarClass(change.starred)]]" on-tap="toggleStar">
+ <button
+ class$="[[_computeStarClass(change.starred)]]"
+ aria-label="Change star"
+ on-tap="toggleStar">
<!-- Public Domain image from the Noun Project: https://thenounproject.com/search/?q=star&i=25969 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M26.439,95.601c-5.608,2.949-9.286,0.276-8.216-5.968l4.5-26.237L3.662,44.816c-4.537-4.423-3.132-8.746,3.137-9.657 l26.343-3.829L44.923,7.46c2.804-5.682,7.35-5.682,10.154,0l11.78,23.87l26.343,3.829c6.27,0.911,7.674,5.234,3.138,9.657 L77.277,63.397l4.501,26.237c1.07,6.244-2.608,8.916-8.216,5.968L50,83.215L26.439,95.601z"></path></svg>
</button>
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
index bd90eb4..32cff2a 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -23,8 +23,7 @@
display: inline-flex;
}
input,
- label,
- .container {
+ label {
width: 100%;
}
input {
@@ -45,17 +44,17 @@
text-decoration: underline;
}
</style>
- <input
- is="iron-input"
- id="input"
- hidden$="[[!editing]]"
- on-keydown="_handleInputKeydown"
- bind-value="{{_inputText}}">
- <label
- hidden$="[[editing]]"
- class$="[[_computeLabelClass(readOnly, value, placeholder)]]"
- title$="[[_computeLabel(value, placeholder)]]"
- on-tap="_open">[[_computeLabel(value, placeholder)]]</label>
+ <input
+ is="iron-input"
+ id="input"
+ hidden$="[[!editing]]"
+ on-keydown="_handleInputKeydown"
+ bind-value="{{_inputText}}">
+ <label
+ hidden$="[[editing]]"
+ class$="[[_computeLabelClass(readOnly, value, placeholder)]]"
+ title$="[[_computeLabel(value, placeholder)]]"
+ on-tap="_open">[[_computeLabel(value, placeholder)]]</label>
</template>
<script src="gr-editable-label.js"></script>
</dom-module>
diff --git a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
index eb604f7..f3e83f9 100644
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js
@@ -45,6 +45,10 @@
_inputText: String,
},
+ hostAttributes: {
+ tabindex: '0',
+ },
+
_usePlaceholder: function(value, placeholder) {
return (!value || !value.length) && placeholder;
},
