From 4dbe84bb3c373cbb4d3aee678f31415da02a31fd Mon Sep 17 00:00:00 2001
From: Booteille <booteille@protonmail.com>
Date: Tue, 10 Dec 2024 09:56:08 +0100
Subject: [PATCH] Improve modal accessibility

---
 themes/default/templates/layouts/default.html.ep | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/themes/default/templates/layouts/default.html.ep b/themes/default/templates/layouts/default.html.ep
index 8c80c5f..2547711 100644
--- a/themes/default/templates/layouts/default.html.ep
+++ b/themes/default/templates/layouts/default.html.ep
@@ -123,12 +123,12 @@
       % }
       </main>
 
-      <div id="modal-language-selector" class="modal">
+      <div id="modal-language-selector" class="modal" role="dialog" aria-labelledby="modal-language-selector-title" tabindex="-1">
         <div class="modal-background"></div>
         <div class="modal-card">
           <header class="modal-card-head is-shadowless">
             <p class="modal-card-title">
-              <%= l('Languages') %>
+              <span id="modal-language-selector-title"><%= l('Languages') %></span>
               <button class="delete is-pulled-right" aria-label="close"></button>
             </p>
           </header>
@@ -193,6 +193,7 @@
           // Functions to open and close a modal
           const openModal = ($el) => {
             $el.classList.add("is-active");
+            $el.focus();
           };
 
           const closeModal = ($el) => {