Use details/summary to display keyboard hints in calendar modal #105
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -46,6 +46,31 @@ export type InclusiveDatesCalendarLabels = { | |||
| todayButton: string; | |||
| yearSelect: string; | |||
| keyboardHint: string; | |||
| keyboardKeyTab: string; | |||
There was a problem hiding this comment.
There is a missing type here for keyboardKeyShift
| @@ -62,6 +87,31 @@ const defaultLab 10000 els: InclusiveDatesCalendarLabels = { | |||
| 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
| @@ -322,12 +322,9 @@ inclusive-dates *:focus-visible { | |||
| } | |||
|
|
|||
| .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.