Skip padding columns on change list page for a11y

Also add aria-label for star column.

Change-Id: Ie2a058a9d4ec9706019d469e4cc3a420ce25fed9
This commit is contained in:
Tao Zhou
2020-05-25 11:54:29 +02:00
parent 18978de37d
commit 31804da837
2 changed files with 17 additions and 7 deletions

View File

@@ -117,7 +117,7 @@ export const htmlTemplate = html`
<style include="gr-change-list-styles">
/* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
</style>
<td class="cell leftPadding"></td>
<td aria-hidden="true" class="cell leftPadding"></td>
<td class="cell star" hidden$="[[!showStar]]" hidden="">
<gr-change-star change="{{change}}"></gr-change-star>
</td>

View File

@@ -52,8 +52,13 @@ export const htmlTemplate = html`
<template is="dom-if" if="[[changeSection.name]]">
<tbody>
<tr class="groupHeader">
<td class="leftPadding"></td>
<td class="star" hidden$="[[!showStar]]" hidden=""></td>
<td aria-hidden="true" class="leftPadding"></td>
<td
aria-hidden="true"
class="star"
hidden$="[[!showStar]]"
hidden=""
></td>
<td
class="cell"
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"
@@ -74,8 +79,8 @@ export const htmlTemplate = html`
<tbody class="groupContent">
<template is="dom-if" if="[[_isEmpty(changeSection)]]">
<tr class="noChanges">
<td class="leftPadding"></td>
<td class="star" hidden$="[[!showStar]]" hidden=""></td>
<td aria-hidden="true" class="leftPadding"></td>
<td aria-hidden="true" class="star" hidden></td>
<td
class="cell"
colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"
@@ -91,8 +96,13 @@ export const htmlTemplate = html`
</template>
<template is="dom-if" if="[[!_isEmpty(changeSection)]]">
<tr class="groupTitle">
<td class="leftPadding"></td>
<td class="star" hidden$="[[!showStar]]" hidden=""></td>
<td aria-hidden="true" class="leftPadding"></td>
<td
aria-label="Star status column"
class="star"
hidden$="[[!showStar]]"
hidden=""
></td>
<td class="number" hidden$="[[!showNumber]]" hidden="">#</td>
<template is="dom-repeat" items="[[changeTableColumns]]" as="item">
<td