diff --git a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.ts b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.ts
index 31fece5..33e720b 100644
--- a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.ts
+++ b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.ts
@@ -14,35 +14,59 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import '../../shared/gr-button/gr-button.js';
-import '../gr-key-binding-display/gr-key-binding-display.js';
-import '../../../styles/shared-styles.js';
-import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
-import {PolymerElement} from '@polymer/polymer/polymer-element.js';
-import {htmlTemplate} from './gr-keyboard-shortcuts-dialog_html.js';
-import {KeyboardShortcutMixin, ShortcutSection} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.js';
+import '../../shared/gr-button/gr-button';
+import '../gr-key-binding-display/gr-key-binding-display';
+import '../../../styles/shared-styles';
+import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
+import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
+import {PolymerElement} from '@polymer/polymer/polymer-element';
+import {htmlTemplate} from './gr-keyboard-shortcuts-dialog_html';
+import {
+  KeyboardShortcutMixin,
+  ShortcutSection,
+  ShortcutListener,
+  SectionView,
+} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
+import {property, customElement} from '@polymer/decorators';
 
-/**
- * @extends PolymerElement
- */
-class GrKeyboardShortcutsDialog extends KeyboardShortcutMixin(
-    GestureEventListeners(
-        LegacyElementMixin(PolymerElement))) {
-  static get template() { return htmlTemplate; }
+declare global {
+  interface HTMLElementTagNameMap {
+    'gr-keyboard-shortcuts-dialog': GrKeyboardShortcutsDialog;
+  }
+}
 
-  static get is() { return 'gr-keyboard-shortcuts-dialog'; }
+interface SectionShortcut {
+  section: ShortcutSection;
+  shortcuts?: SectionView;
+}
+
+@customElement('gr-keyboard-shortcuts-dialog')
+export class GrKeyboardShortcutsDialog extends KeyboardShortcutMixin(
+  GestureEventListeners(LegacyElementMixin(PolymerElement))
+) {
+  static get template() {
+    return htmlTemplate;
+  }
+
   /**
    * Fired when the user presses the close button.
    *
    * @event close
    */
 
-  static get properties() {
-    return {
-      _left: Array,
-      _right: Array,
-    };
+  @property({type: Array})
+  _left?: SectionShortcut[];
+
+  @property({type: Array})
+  _right?: SectionShortcut[];
+
+  private keyboardShortcutDirectoryListener: ShortcutListener;
+
+  constructor() {
+    super();
+    this.keyboardShortcutDirectoryListener = this._onDirectoryUpdated.bind(
+      this
+    );
   }
 
   /** @override */
@@ -54,30 +78,36 @@
   /** @override */
   attached() {
     super.attached();
-    this.keyboardShortcutDirectoryListener =
-        this._onDirectoryUpdated.bind(this);
     this.addKeyboardShortcutDirectoryListener(
-        this.keyboardShortcutDirectoryListener);
+      this.keyboardShortcutDirectoryListener
+    );
   }
 
   /** @override */
   detached() {
     super.detached();
     this.removeKeyboardShortcutDirectoryListener(
-        this.keyboardShortcutDirectoryListener);
+      this.keyboardShortcutDirectoryListener
+    );
   }
 
-  _handleCloseTap(e) {
+  _handleCloseTap(e: MouseEvent) {
     e.preventDefault();
     e.stopPropagation();
-    this.dispatchEvent(new CustomEvent('close', {
-      composed: true, bubbles: false,
-    }));
+    this.dispatchEvent(
+      new CustomEvent('close', {
+        composed: true,
+        bubbles: false,
+      })
+    );
   }
 
-  _onDirectoryUpdated(directory) {
-    const left = [];
-    const right = [];
+  _onDirectoryUpdated(directory?: Map<ShortcutSection, SectionView>) {
+    if (!directory) {
+      return;
+    }
+    const left = [] as SectionShortcut[];
+    const right = [] as SectionShortcut[];
 
     if (directory.has(ShortcutSection.EVERYWHERE)) {
       left.push({
@@ -125,6 +155,3 @@
     this.set('_right', right);
   }
 }
-
-customElements.define(GrKeyboardShortcutsDialog.is,
-    GrKeyboardShortcutsDialog);
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 07d59b4..69db96d 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
@@ -204,7 +204,7 @@
   TOGGLE_BLAME = 'TOGGLE_BLAME',
 }
 
-type SectionView = Array<{binding: string[][]; text: string}>;
+export type SectionView = Array<{binding: string[][]; text: string}>;
 
 /**
  * The interface for listener for shortcut events.
@@ -1060,6 +1060,8 @@
   modifierPressed(event: CustomKeyboardEvent): boolean;
   isModifierPressed(event: CustomKeyboardEvent, modifier: Modifier): boolean;
   getKeyboardEvent(e: CustomKeyboardEvent): CustomKeyboardEvent;
+  addKeyboardShortcutDirectoryListener(listener: ShortcutListener): void;
+  removeKeyboardShortcutDirectoryListener(listener: ShortcutListener): void;
 }
 
 export function _testOnly_getShortcutManagerInstance() {