Use details/summary to display keyboard hints in calendar modal #105
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| todayButton: string; | ||
| yearSelect: string; | ||
| keyboardHint: string; | ||
| keyboardKeyTab: string; |
There was a problem hiding this comment.
There is a missing type here for keyboardKeyShift
| todayButton: "Show today", | ||
| yearSelect: "Select year", | ||
| keyboardHint: "Keyboard commands", | ||
| keyboardKeyTab: "Tab", |
There was a problem hiding this comment.
Missing translation here for keyboardKeyShift
| </svg> | ||
| {this.labels.keyboardHint} | ||
| </button> | ||
| <details class="{this.getClassName("keyboard-shortcuts")}"> |
There was a problem hiding this comment.
A syntax error here, it should be
<details class={this.getClassName("keyboard-shortcuts")}>
(without the quotes)
| </button> | ||
| <details class="{this.getClassName("keyboard-shortcuts")}"> | ||
| <summary> | ||
| <span class="{this.getClassName("keyboard-hint")}"> |
There was a problem hiding this comment.
Same here:
<span class={this.getClassName("keyboard-hint")}>
| {this.labels.keyboardHint} | ||
| </span> | ||
| </summary> | ||
| <table class="{this.getClassName("keyboard-shortcuts-table")}"> |
There was a problem hiding this comment.
Same here:
<table class={this.getClassName("keyboard-shortcuts-table")}>
| <td> | ||
| <kbd>{this.labels.keyboardKeyArrowright}</kbd> | ||
| </td> | ||
| <td>{this.labels.keyboardShortcutArrowRight}</td> |
There was a problem hiding this comment.
This does not match the translation key which uses lower key, causes a Typescript error:
keyboardShortcutArrowright
|
|
||
| .inclusive-dates-calendar__keyboard-hint { | ||
| color: var(--secondary-color); | ||
| display: flex; |
There was a problem hiding this comment.
The <summary> icon does not align.
But we might do something like this:
display: inline-flex;
transform: translateY(2px);
Adds the keyboard shortcuts table as shown in the documentation to the calendar modal in a details element, using the original button as the summary toggle.
Includes new strings for every key, keyboard shortcut description, and the "Key, Action" table headers.