A11y - add headings for comments
Headings need to be short. Current format
Unresolved? Draft? Comment Thread by author
Change-Id: I2da820881cfaf646cc2919b3075e3f684d4ff7d4
diff --git a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts
index cf8a0ed..2408a26 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread.ts
@@ -41,6 +41,7 @@
import {computeDisplayPath} from '../../../utils/path-list-util';
import {computed, customElement, observe, property} from '@polymer/decorators';
import {
+ AccountDetailInfo,
CommentRange,
ConfigInfo,
NumericChangeId,
@@ -62,6 +63,7 @@
import {StorageLocation} from '../../../services/storage/gr-storage';
import {TokenHighlightLayer} from '../../diff/gr-diff-builder/token-highlight-layer';
import {anyLineTooLong} from '../../diff/gr-diff/gr-diff-utils';
+import {getUserName} from '../../../utils/display-name-util';
const UNRESOLVED_EXPAND_COUNT = 5;
const NEWLINE_PATTERN = /\n/g;
@@ -200,6 +202,9 @@
@property({type: Boolean})
showCommentContext = false;
+ @property({type: Object})
+ _selfAccount?: AccountDetailInfo;
+
get keyBindings() {
return {
'e shift+e': '_handleEKey',
@@ -239,6 +244,9 @@
};
this.syntaxLayer.setEnabled(!!prefs.syntax_highlighting);
});
+ this.restApiService.getAccount().then(account => {
+ this._selfAccount = account;
+ });
this._setInitialExpandedState();
}
@@ -743,6 +751,17 @@
this._projectConfig = config;
});
}
+
+ _computeAriaHeading(_orderedComments: UIComment[]) {
+ const firstComment = _orderedComments[0];
+ const author = firstComment?.author ?? this._selfAccount;
+ const lastComment = _orderedComments[_orderedComments.length - 1] || {};
+ const status = [
+ lastComment.unresolved ? 'Unresolved' : '',
+ isDraft(lastComment) ? 'Draft' : '',
+ ].join(' ');
+ return `${status} Comment thread by ${getUserName(undefined, author)}`;
+ }
}
declare global {
diff --git a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread_html.ts b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread_html.ts
index 1f0ce3d..b6e44f6 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment-thread/gr-comment-thread_html.ts
@@ -129,6 +129,9 @@
</div>
</template>
<div id="container">
+ <h3 class="assistive-tech-only">
+ [[_computeAriaHeading(_orderedComments)]]
+ </h3>
<div class$="[[_computeHostClass(unresolved, isRobotComment)]] comment-box">
<template
id="commentList"
