Improve a11y of rows in the file list
Screen readers read a lot of junk for file rows. This is an attempt to
reduce this a little bit.
By adding an `aria-label` to the row <div> we hope that screen readers
will first read that as a summary before going into the details of all
the cells of that row.
We are also reducing the noise for the file status of each file. In a
standard change view it should read "Modified" instead of
"Modified between patchset PARENT and patchset 3".
Release-Notes: skip
Google-Bug-Id: b/254516540
Change-Id: Ie264c02dabb56e7630a9b2ae76dff028dbad1ea0
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts
index b83f8d0..60fb735 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.ts
@@ -1051,6 +1051,7 @@
data-file=${JSON.stringify(patchSetFile)}
tabindex="-1"
role="row"
+ aria-label=${file.__path}
>
<!-- endpoint: change-view-file-list-content-prepend -->
${when(showPrependedDynamicColumns, () =>
@@ -1169,12 +1170,18 @@
private renderFileStatusLeft(path?: string) {
if (this.filesLeftBase.length === 0) return nothing;
+ const arrow = html`
+ <gr-icon
+ icon="arrow_right_alt"
+ class="file-status-arrow"
+ aria-label="then"
+ ></gr-icon>
+ `;
// no path means "header row"
const psNum = this.patchRange?.basePatchNum;
if (!path) {
return html`
- ${this.renderDivWithTooltip(`${psNum}`, `Patchset ${psNum}`)}
- <gr-icon icon="arrow_right_alt" class="file-status-arrow"></gr-icon>
+ ${this.renderDivWithTooltip(`${psNum}`, `Patchset ${psNum}`)} ${arrow}
`;
}
if (isMagicPath(path)) return nothing;
@@ -1191,7 +1198,7 @@
.status=${status}
.labelPostfix=${postfix}
></gr-file-status>
- <gr-icon icon="arrow_right_alt" class="file-status-arrow"></gr-icon>
+ ${arrow}
`;
}
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts
index d920634..1d32ed1 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list_test.ts
@@ -69,7 +69,7 @@
fileInfo: FileInfo = {}
): NormalizedFileInfo[] {
const files = Array(count).fill({});
- return files.map((_, idx) => normalize(fileInfo, `'/file${idx}`));
+ return files.map((_, idx) => normalize(fileInfo, `path/file${idx}`));
}
suite('gr-file-list tests', () => {
@@ -174,20 +174,23 @@
fileRows?.[0],
/* HTML */ `<div
class="file-row row"
- data-file='{"path":"'/file0"}'
+ data-file='{"path":"path/file0"}'
role="row"
tabindex="-1"
+ aria-label="path/file0"
>
<div class="status" role="gridcell">
<gr-file-status></gr-file-status>
</div>
<span class="path" role="gridcell">
<a class="pathLink">
- <span class="fullFileName" title="'/file0">
- <span class="newFilePath"> '/ </span>
+ <span class="fullFileName" title="path/file0">
+ <span class="newFilePath"> path/ </span>
<span class="fileName"> file0 </span>
</span>
- <span class="truncatedFileName" title="'/file0"> …/file0 </span>
+ <span class="truncatedFileName" title="path/file0">
+ …/file0
+ </span>
<gr-copy-clipboard hideinput=""> </gr-copy-clipboard>
</a>
</span>
@@ -247,7 +250,7 @@
aria-label="Expand file"
class="show-hide"
data-expand="true"
- data-path="'/file0"
+ data-path="path/file0"
role="switch"
tabindex="0"
>
@@ -273,11 +276,13 @@
/* HTML */ `
<span class="path" role="gridcell">
<a class="pathLink">
- <span class="fullFileName" title="'/file0">
- <span class="newFilePath"> '/ </span>
+ <span class="fullFileName" title="path/file0">
+ <span class="newFilePath"> path/ </span>
<span class="fileName"> file0 </span>
</span>
- <span class="truncatedFileName" title="'/file0"> …/file0 </span>
+ <span class="truncatedFileName" title="path/file0">
+ …/file0
+ </span>
<gr-copy-clipboard hideinput=""> </gr-copy-clipboard>
</a>
</span>
@@ -289,11 +294,13 @@
/* HTML */ `
<span class="path" role="gridcell">
<a class="pathLink">
- <span class="fullFileName" title="'/file1">
- <span class="matchingFilePath"> '/ </span>
+ <span class="fullFileName" title="path/file1">
+ <span class="matchingFilePath"> path/ </span>
<span class="fileName"> file1 </span>
</span>
- <span class="truncatedFileName" title="'/file1"> …/file1 </span>
+ <span class="truncatedFileName" title="path/file1">
+ …/file1
+ </span>
<gr-copy-clipboard hideinput=""> </gr-copy-clipboard>
</a>
</span>
@@ -312,7 +319,11 @@
/* HTML */ `
<div class="extended status" role="gridcell">
<gr-file-status></gr-file-status>
- <gr-icon class="file-status-arrow" icon="arrow_right_alt"></gr-icon>
+ <gr-icon
+ aria-label="then"
+ class="file-status-arrow"
+ icon="arrow_right_alt"
+ ></gr-icon>
<gr-file-status></gr-file-status>
</div>
`
@@ -371,7 +382,11 @@
<gr-tooltip-content has-tooltip="" title="Patchset 1">
<div class="content">1</div>
</gr-tooltip-content>
- <gr-icon class="file-status-arrow" icon="arrow_right_alt"></gr-icon>
+ <gr-icon
+ aria-label="then"
+ class="file-status-arrow"
+ icon="arrow_right_alt"
+ ></gr-icon>
<gr-tooltip-content has-tooltip="" title="Patchset 2">
<div class="content">2</div>
</gr-tooltip-content>
diff --git a/polygerrit-ui/app/elements/shared/gr-file-status/gr-file-status.ts b/polygerrit-ui/app/elements/shared/gr-file-status/gr-file-status.ts
index 578eda4..943f4de 100644
--- a/polygerrit-ui/app/elements/shared/gr-file-status/gr-file-status.ts
+++ b/polygerrit-ui/app/elements/shared/gr-file-status/gr-file-status.ts
@@ -10,7 +10,7 @@
import '../gr-tooltip-content/gr-tooltip-content';
import '../gr-icon/gr-icon';
-function statusString(status: FileInfoStatus) {
+function statusString(status?: FileInfoStatus) {
if (!status) return '';
switch (status) {
case FileInfoStatus.ADDED:
@@ -115,15 +115,17 @@
private renderStatus() {
const classes = ['status', this.status];
- return html`<gr-tooltip-content title=${this.computeLabel()} has-tooltip>
- <div
- class=${classes.join(' ')}
- tabindex="0"
- aria-label=${this.computeLabel()}
+ return html`
+ <gr-tooltip-content
+ title=${this.computeLabel()}
+ has-tooltip
+ aria-label=${statusString(this.status)}
>
- ${this.renderIconOrLetter()}
- </div>
- </gr-tooltip-content>`;
+ <div class=${classes.join(' ')} aria-hidden="true">
+ ${this.renderIconOrLetter()}
+ </div>
+ </gr-tooltip-content>
+ `;
}
private renderIconOrLetter() {
@@ -135,13 +137,15 @@
private renderNewlyChanged() {
if (!this.newlyChanged) return;
- return html`<gr-tooltip-content title=${this.computeLabel()} has-tooltip>
- <gr-icon
- icon="new_releases"
- class="size-16"
- aria-label=${this.computeLabel()}
- ></gr-icon>
- </gr-tooltip-content>`;
+ return html`
+ <gr-tooltip-content
+ title=${this.computeLabel()}
+ has-tooltip
+ aria-label="newly"
+ >
+ <gr-icon icon="new_releases" class="size-16"></gr-icon>
+ </gr-tooltip-content>
+ `;
}
private computeLabel() {
diff --git a/polygerrit-ui/app/elements/shared/gr-file-status/gr-file-status_test.ts b/polygerrit-ui/app/elements/shared/gr-file-status/gr-file-status_test.ts
index 3bf877e..555b237 100644
--- a/polygerrit-ui/app/elements/shared/gr-file-status/gr-file-status_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-file-status/gr-file-status_test.ts
@@ -28,8 +28,8 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <gr-tooltip-content has-tooltip="" title="">
- <div class="status" aria-label="" tabindex="0"><span></span></div>
+ <gr-tooltip-content has-tooltip="" title="" aria-label="">
+ <div class="status" aria-hidden="true"><span></span></div>
</gr-tooltip-content>
`
);
@@ -40,8 +40,8 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <gr-tooltip-content has-tooltip="" title="Added">
- <div class="A status" aria-label="Added" tabindex="0">
+ <gr-tooltip-content has-tooltip="" title="Added" aria-label="Added">
+ <div class="A status" aria-hidden="true">
<span>A</span>
</div>
</gr-tooltip-content>
@@ -54,15 +54,19 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <gr-tooltip-content has-tooltip="" title="Newly Added">
- <gr-icon
- icon="new_releases"
- class="size-16"
- aria-label="Newly Added"
- ></gr-icon>
+ <gr-tooltip-content
+ has-tooltip=""
+ title="Newly Added"
+ aria-label="newly"
+ >
+ <gr-icon icon="new_releases" class="size-16"></gr-icon>
</gr-tooltip-content>
- <gr-tooltip-content has-tooltip="" title="Newly Added">
- <div class="A status" aria-label="Newly Added" tabindex="0">
+ <gr-tooltip-content
+ has-tooltip=""
+ title="Newly Added"
+ aria-label="Added"
+ >
+ <div class="A status" aria-hidden="true">
<span>A</span>
</div>
</gr-tooltip-content>
