Merge "A11y - Shortcuts tables in dialog"
diff --git a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_html.ts b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_html.ts
index 0a75104..251e30f 100644
--- a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_html.ts
+++ b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_html.ts
@@ -20,6 +20,7 @@
<style include="shared-styles">
.key {
background-color: var(--chip-background-color);
+ color: var(--primary-text-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
display: inline-block;
diff --git a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_html.ts b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_html.ts
index 1860f38..3576dfe 100644
--- a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_html.ts
+++ b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_html.ts
@@ -30,21 +30,39 @@
display: flex;
padding: 0 var(--spacing-xxl) var(--spacing-xxl);
}
+ .column {
+ flex: 50%;
+ }
header {
align-items: center;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
}
- table:last-of-type {
- margin-left: var(--spacing-xxl);
+ table caption {
+ font-weight: var(--font-weight-bold);
+ padding-top: var(--spacing-l);
+ text-align: left;
+ }
+ tr {
+ height: 32px;
}
td {
padding: var(--spacing-xs) 0;
}
- td:first-child {
+ td:first-child,
+ th:first-child {
padding-right: var(--spacing-m);
text-align: right;
+ width: 160px;
+ color: var(--deemphasized-text-color);
+ }
+ td:second-child {
+ min-width: 200px;
+ }
+ th {
+ color: var(--deemphasized-text-color);
+ text-align: left;
}
.header {
font-weight: var(--font-weight-bold);
@@ -59,33 +77,19 @@
<gr-button link="" on-click="_handleCloseTap">Close</gr-button>
</header>
<main>
- <table>
- <tbody>
- <template is="dom-repeat" items="[[_left]]">
- <tr>
- <td></td>
- <td class="header">[[item.section]]</td>
- </tr>
- <template is="dom-repeat" items="[[item.shortcuts]]" as="shortcut">
+ <div class="column">
+ <template is="dom-repeat" items="[[_left]]">
+ <table>
+ <caption>
+ [[item.section]]
+ </caption>
+ <thead>
<tr>
- <td>
- <gr-key-binding-display binding="[[shortcut.binding]]">
- </gr-key-binding-display>
- </td>
- <td>[[shortcut.text]]</td>
+ <th>Key</th>
+ <th>Action</th>
</tr>
- </template>
- </template>
- </tbody>
- </table>
- <template is="dom-if" if="[[_right]]">
- <table>
- <tbody>
- <template is="dom-repeat" items="[[_right]]">
- <tr>
- <td></td>
- <td class="header">[[item.section]]</td>
- </tr>
+ </thead>
+ <tbody>
<template is="dom-repeat" items="[[item.shortcuts]]" as="shortcut">
<tr>
<td>
@@ -95,10 +99,36 @@
<td>[[shortcut.text]]</td>
</tr>
</template>
- </template>
- </tbody>
- </table>
- </template>
+ </tbody>
+ </table>
+ </template>
+ </div>
+ <div class="column">
+ <template is="dom-repeat" items="[[_right]]">
+ <table>
+ <caption>
+ [[item.section]]
+ </caption>
+ <thead>
+ <tr>
+ <th>Key</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <template is="dom-repeat" items="[[item.shortcuts]]" as="shortcut">
+ <tr>
+ <td>
+ <gr-key-binding-display binding="[[shortcut.binding]]">
+ </gr-key-binding-display>
+ </td>
+ <td>[[shortcut.text]]</td>
+ </tr>
+ </template>
+ </tbody>
+ </table>
+ </template>
+ </div>
</main>
<footer></footer>
`;
diff --git a/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts b/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
index 7aade93..9744bc9 100644
--- a/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
+++ b/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
@@ -129,7 +129,7 @@
export enum ShortcutSection {
ACTIONS = 'Actions',
DIFFS = 'Diffs',
- EVERYWHERE = 'Everywhere',
+ EVERYWHERE = 'Global Shortcuts',
FILE_LIST = 'File list',
NAVIGATION = 'Navigation',
REPLY_DIALOG = 'Reply dialog',
