Skip to content

Commit 06c2e50

Browse files
jvoisinjvoisin
authored
refactor(ui): use native <dialog> element instead of custom modal implementation
This simplifies the client-side code and improves accessibility.
1 parent ec93656 commit 06c2e50

File tree

8 files changed

+58
-139
lines changed

8 files changed

+58
-139
lines changed

‎internal/template/templates/common/layout.html‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -126,62 +126,62 @@
126126
<main id="main">
127127
{{template "content" .}}
128128
</main>
129-
<template id="keyboard-shortcuts">
130-
<div id="modal-left">
131-
<button class="btn-close-modal" aria-label="Close">x</button>
132-
<h3 tabindex="-1" id="dialog-title">{{ t "page.keyboard_shortcuts.title" }}</h3>
129+
<dialog id="keyboard-shortcuts-modal" closedby="any">
130+
<form method="dialog">
131+
<button class="btn-close-modal" aria-label="Close" autofocus>x</button>
132+
</form>
133+
<h3 tabindex="-1" id="dialog-title">{{ t "page.keyboard_shortcuts.title" }}</h3>
133134

134-
<div class="keyboard-shortcuts">
135-
<p>{{ t "page.keyboard_shortcuts.subtitle.sections" }}</p>
136-
<ul>
137-
<li>{{ t "page.keyboard_shortcuts.go_to_unread" }} = <strong>g + u</strong></li>
138-
<li>{{ t "page.keyboard_shortcuts.go_to_starred" }} = <strong>g + b</strong></li>
139-
<li>{{ t "page.keyboard_shortcuts.go_to_history" }} = <strong>g + h</strong></li>
140-
<li>{{ t "page.keyboard_shortcuts.go_to_feeds" }} = <strong>g + f</strong></li>
141-
<li>{{ t "page.keyboard_shortcuts.go_to_categories" }} = <strong>g + c</strong></li>
142-
<li>{{ t "page.keyboard_shortcuts.go_to_settings" }} = <strong>g + s</strong></li>
143-
<li>{{ t "page.keyboard_shortcuts.show_keyboard_shortcuts" }} = <strong>?</strong></li>
144-
<li>{{ t "menu.add_feed" }} = <strong>+</strong></li>
145-
</ul>
135+
<div class="keyboard-shortcuts">
136+
<p>{{ t "page.keyboard_shortcuts.subtitle.sections" }}</p>
137+
<ul>
138+
<li>{{ t "page.keyboard_shortcuts.go_to_unread" }} = <strong>g + u</strong></li>
139+
<li>{{ t "page.keyboard_shortcuts.go_to_starred" }} = <strong>g + b</strong></li>
140+
<li>{{ t "page.keyboard_shortcuts.go_to_history" }} = <strong>g + h</strong></li>
141+
<li>{{ t "page.keyboard_shortcuts.go_to_feeds" }} = <strong>g + f</strong></li>
142+
<li>{{ t "page.keyboard_shortcuts.go_to_categories" }} = <strong>g + c</strong></li>
143+
<li>{{ t "page.keyboard_shortcuts.go_to_settings" }} = <strong>g + s</strong></li>
144+
<li>{{ t "page.keyboard_shortcuts.show_keyboard_shortcuts" }} = <strong>?</strong></li>
145+
<li>{{ t "menu.add_feed" }} = <strong>+</strong></li>
146+
</ul>
146147

147-
<p>{{ t "page.keyboard_shortcuts.subtitle.items" }}</p>
148-
<ul>
149-
<li>{{ t "page.keyboard_shortcuts.go_to_previous_item" }} = <strong>p</strong>, <strong>k</strong>, <strong>&#x23F4;</strong></li>
150-
<li>{{ t "page.keyboard_shortcuts.go_to_next_item" }} = <strong>n</strong>, <strong>j</strong>, <strong>&#x23F5;</strong></li>
151-
<li>{{ t "page.keyboard_shortcuts.go_to_feed" }} = <strong>F</strong></li>
152-
<li>{{ t "page.keyboard_shortcuts.go_to_top_item" }} = <strong>g + g</strong></li>
153-
<li>{{ t "page.keyboard_shortcuts.go_to_bottom_item" }} = <strong>G</strong></li>
154-
</ul>
148+
<p>{{ t "page.keyboard_shortcuts.subtitle.items" }}</p>
149+
<ul>
150+
<li>{{ t "page.keyboard_shortcuts.go_to_previous_item" }} = <strong>p</strong>, <strong>k</strong>, <strong>&#x23F4;</strong></li>
151+
<li>{{ t "page.keyboard_shortcuts.go_to_next_item" }} = <strong>n</strong>, <strong>j</strong>, <strong>&#x23F5;</strong></li>
152+
<li>{{ t "page.keyboard_shortcuts.go_to_feed" }} = <strong>F</strong></li>
153+
<li>{{ t "page.keyboard_shortcuts.go_to_top_item" }} = <strong>g + g</strong></li>
154+
<li>{{ t "page.keyboard_shortcuts.go_to_bottom_item" }} = <strong>G</strong></li>
155+
</ul>
155156

156-
<p>{{ t "page.keyboard_shortcuts.subtitle.pages" }}</p>
157-
<ul>
158-
<li>{{ t "page.keyboard_shortcuts.go_to_previous_page" }} = <strong>h</strong></li>
159-
<li>{{ t "page.keyboard_shortcuts.go_to_next_page" }} = <strong>l</strong></li>
160-
</ul>
157+
<p>{{ t "page.keyboard_shortcuts.subtitle.pages" }}</p>
158+
<ul>
159+
<li>{{ t "page.keyboard_shortcuts.go_to_previous_page" }} = <strong>h</strong></li>
160+
<li>{{ t "page.keyboard_shortcuts.go_to_next_page" }} = <strong>l</strong></li>
161+
</ul>
161162

162-
<p>{{ t "page.keyboard_shortcuts.subtitle.actions" }}</p>
163-
<ul>
164-
<li>{{ t "page.keyboard_shortcuts.open_item" }} = <strong>o</strong>, <strong>Enter</strong></li>
165-
<li>{{ t "page.keyboard_shortcuts.open_original" }} = <strong>v</strong></li>
166-
<li>{{ t "page.keyboard_shortcuts.open_original_same_window" }} = <strong>V</strong></li>
167-
<li>{{ t "page.keyboard_shortcuts.open_comments" }} = <strong>c</strong></li>
168-
<li>{{ t "page.keyboard_shortcuts.open_comments_same_window" }} = <strong>C</strong></li>
169-
<li>{{ t "page.keyboard_shortcuts.toggle_read_status_next" }} = <strong>m</strong></li>
170-
<li>{{ t "page.keyboard_shortcuts.toggle_read_status_prev" }} = <strong>M</strong></li>
171-
<li>{{ t "page.keyboard_shortcuts.mark_page_as_read" }} = <strong>A</strong></li>
172-
<li>{{ t "page.keyboard_shortcuts.download_content" }} = <strong>d</strong></li>
173-
<li>{{ t "page.keyboard_shortcuts.toggle_star_status" }} = <strong>f</strong></li>
174-
<li>{{ t "page.keyboard_shortcuts.save_article" }} = <strong>s</strong></li>
175-
<li>{{ t "page.keyboard_shortcuts.toggle_entry_attachments" }} = <strong>a</strong></li>
176-
<li>{{ t "page.keyboard_shortcuts.scroll_item_to_top" }} = <strong>z + t</strong></li>
177-
<li>{{ t "page.keyboard_shortcuts.refresh_all_feeds" }} = <strong>R</strong></li>
178-
<li>{{ t "page.keyboard_shortcuts.remove_feed" }} = <strong>#</strong></li>
179-
<li>{{ t "page.keyboard_shortcuts.go_to_search" }} = <strong>/</strong></li>
180-
<li>{{ t "page.keyboard_shortcuts.close_modal" }} = <strong>Esc</strong></li>
181-
</ul>
182-
</div>
163+
<p>{{ t "page.keyboard_shortcuts.subtitle.actions" }}</p>
164+
<ul>
165+
<li>{{ t "page.keyboard_shortcuts.open_item" }} = <strong>o</strong>, <strong>Enter</strong></li>
166+
<li>{{ t "page.keyboard_shortcuts.open_original" }} = <strong>v</strong></li>
167+
<li>{{ t "page.keyboard_shortcuts.open_original_same_window" }} = <strong>V</strong></li>
168+
<li>{{ t "page.keyboard_shortcuts.open_comments" }} = <strong>c</strong></li>
169+
<li>{{ t "page.keyboard_shortcuts.open_comments_same_window" }} = <strong>C</strong></li>
170+
<li>{{ t "page.keyboard_shortcuts.toggle_read_status_next" }} = <strong>m</strong></li>
171+
<li>{{ t "page.keyboard_shortcuts.toggle_read_status_prev" }} = <strong>M</strong></li>
172+
<li>{{ t "page.keyboard_shortcuts.mark_page_as_read" }} = <strong>A</strong></li>
173+
<li>{{ t "page.keyboard_shortcuts.download_content" }} = <strong>d</strong></li>
174+
<li>{{ t "page.keyboard_shortcuts.toggle_star_status" }} = <strong>f</strong></li>
175+
<li>{{ t "page.keyboard_shortcuts.save_article" }} = <strong>s</strong></li>
176+
<li>{{ t "page.keyboard_shortcuts.toggle_entry_attachments" }} = <strong>a</strong></li>
177+
<li>{{ t "page.keyboard_shortcuts.scroll_item_to_top" }} = <strong>z + t</strong></li>
178+
<li>{{ t "page.keyboard_shortcuts.refresh_all_feeds" }} = <strong>R</strong></li>
179+
<li>{{ t "page.keyboard_shortcuts.remove_feed" }} = <strong>#</strong></li>
180+
<li>{{ t "page.keyboard_shortcuts.go_to_search" }} = <strong>/</strong></li>
181+
<li>{{ t "page.keyboard_shortcuts.close_modal" }} = <strong>Esc</strong></li>
182+
</ul>
183183
</div>
184-
</template>
184+
</dialog>
185185

186186
<template id="icon-read">{{ icon "read" }}</template>
187187
<template id="icon-unread">{{ icon "unread" }}</template>

‎internal/ui/static/css/common.css‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -619,22 +619,11 @@ template {
619619
display: none;
620620
}
621621

622-
#modal-left {
623-
position: fixed;
624-
top: 0;
625-
left: 0;
626-
bottom: 0;
627-
width: 380px;
628-
overflow: auto;
629-
color: var(--modal-color);
630-
background: var(--modal-background);
631-
box-shadow: var(--modal-box-shadow);
632-
padding: 30px 5px 5px;
633-
}
634-
635-
#modal-left h3 {
636-
font-weight: 400;
637-
margin: 0;
622+
dialog {
623+
max-height: none;
624+
height: 100vh;
625+
border: none;
626+
padding: 1%;
638627
}
639628

640629
.btn-close-modal {
@@ -1342,4 +1331,4 @@ footer .elevator {
13421331
.pagination-top .elevator,
13431332
.pagination-entry-top .elevator {
13441333
display: none;
1345-
}
1334+
}

‎internal/ui/static/css/dark.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,6 @@
6262
--panel-border-color: #555;
6363
--panel-color: #9b9b9b;
6464

65-
--modal-background: #333;
66-
--modal-color: #efefef;
67-
--modal-box-shadow: 0 0 10px rgba(82, 168, 236, 0.6);
68-
6965
--pagination-link-color: #aaa;
7066
--pagination-border-color: #333;
7167

‎internal/ui/static/css/light.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,6 @@
6262
--panel-border-color: #ddd;
6363
--panel-color: #333;
6464

65-
--modal-background: #f0f0f0;
66-
--modal-color: #333;
67-
--modal-box-shadow: 2px 0 5px 0 #ccc;
68-
6965
--pagination-link-color: #333;
7066
--pagination-border-color: #ddd;
7167

‎internal/ui/static/css/system.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,6 @@
6161
--panel-border-color: #ddd;
6262
--panel-color: #333;
6363

64-
--modal-background: #f0f0f0;
65-
--modal-color: #333;
66-
--modal-box-shadow: 2px 0 5px 0 #ccc;
67-
6864
--pagination-link-color: #333;
6965
--pagination-border-color: #ddd;
7066

‎internal/ui/static/js/app.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -569,8 +569,7 @@ function initializeFormHandlers() {
569569
* Show the keyboard shortcuts modal.
570570
*/
571571
function showKeyboardShortcutsAction() {
572-
const template = document.getElementById("keyboard-shortcuts");
573-
KeyboardModalHandler.open(template.content, "dialog-title");
572+
document.getElementById("keyboard-shortcuts-modal").showModal();
574573
}
575574

576575
/**
@@ -1215,7 +1214,6 @@ function initializeKeyboardShortcuts() {
12151214

12161215
// UI actions
12171216
keyboardHandler.on("?", showKeyboardShortcutsAction);
1218-
keyboardHandler.on("Escape", () => KeyboardModalHandler.close());
12191217
keyboardHandler.on("a", () => {
12201218
const enclosureElement = document.querySelector('.entry-enclosures');
12211219
if (enclosureElement) {

‎internal/ui/static/js/modal_handler.js‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎internal/ui/static/static.go‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ func GenerateJavascriptBundles(webauthnEnabled bool) error {
123123
"app": {
124124
"js/touch_handler.js",
125125
"js/keyboard_handler.js",
126-
"js/modal_handler.js",
127126
"js/app.js",
128127
},
129128
"service-worker": {

0 commit comments

Comments
 (0)