From be464bca4bdbebb9c7ce65db0988499bb832bfd5 Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Wed, 3 Jan 2024 23:40:50 +0100
Subject: [PATCH] Misc ARIA improvements (#2766)

---
 frontend/components/BottomRightPanel.js | 1 +
 frontend/components/ExportBanner.js     | 8 ++++----
 frontend/components/FrontmatterInput.js | 3 ++-
 frontend/components/ProcessTab.js       | 5 ++++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/components/BottomRightPanel.js b/frontend/components/BottomRightPanel.js
index df7c8b2a2c..40fe5ff245 100644
--- a/frontend/components/BottomRightPanel.js
+++ b/frontend/components/BottomRightPanel.js
@@ -123,6 +123,7 @@ export let BottomRightPanel = ({
                         ? null
                         : html`<button
                               class="helpbox-close"
+                              title="Close panel"
                               onClick=${() => {
                                   set_open_tab(null)
                               }}
diff --git a/frontend/components/ExportBanner.js b/frontend/components/ExportBanner.js
index 261ca5c724..f65d4b92a7 100644
--- a/frontend/components/ExportBanner.js
+++ b/frontend/components/ExportBanner.js
@@ -102,7 +102,7 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
                 <div class="export_title">export</div>
                 <!-- no "download" attribute here: we want the jl contents to be shown in a new tab -->
                 <a href=${notebookfile_url} target="_blank" class="export_card" onClick=${(e) => exportNotebook(e, 0)}>
-                    <header><${Triangle} fill="#a270ba" /> Notebook file</header>
+                    <header role="none"><${Triangle} fill="#a270ba" /> Notebook file</header>
                     <section>Download a copy of the <b>.jl</b> script.</section>
                 </a>
                 <a
@@ -115,11 +115,11 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
                         exportNotebook(e, 1)
                     }}
                 >
-                    <header><${Square} fill="#E86F51" /> Static HTML</header>
+                    <header role="none"><${Square} fill="#E86F51" /> Static HTML</header>
                     <section>An <b>.html</b> file for your web page, or to share online.</section>
                 </a>
                 <a href="#" class="export_card" onClick=${() => window.print()}>
-                    <header><${Square} fill="#619b3d" /> PDF</header>
+                    <header role="none"><${Square} fill="#619b3d" /> PDF</header>
                     <section>A static <b>.pdf</b> file for print or email.</section>
                 </a>
                 ${html`
@@ -134,7 +134,7 @@ export const ExportBanner = ({ notebook_id, print_title, open, onClose, notebook
                         }}
                         class="export_card"
                     >
-                        <header><${Circle} fill="#E86F51" /> Record <em>(preview)</em></header>
+                        <header role="none"><${Circle} fill="#E86F51" /> Record <em>(preview)</em></header>
                         <section>Capture the entire notebook, and any changes you make.</section>
                     </a>
                 `}
diff --git a/frontend/components/FrontmatterInput.js b/frontend/components/FrontmatterInput.js
index ee792cb2ac..b0d8061a96 100644
--- a/frontend/components/FrontmatterInput.js
+++ b/frontend/components/FrontmatterInput.js
@@ -79,6 +79,7 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
                         <button
                             class="deletefield"
                             title="Delete field"
+                            aria-label="Delete field"
                             onClick=${() => {
                                 //  TODO
                                 set_frontmatter(
@@ -116,7 +117,7 @@ export const FrontMatterInput = ({ filename, remote_frontmatter, set_remote_fron
             If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and
             social media.
         </p>
-        <div class="card-preview">
+        <div class="card-preview" aria-hidden="true">
             <h2>Preview</h2>
             <${FeaturedCard}
                 entry=${
diff --git a/frontend/components/ProcessTab.js b/frontend/components/ProcessTab.js
index b9785023ca..8da46878e2 100644
--- a/frontend/components/ProcessTab.js
+++ b/frontend/components/ProcessTab.js
@@ -190,6 +190,8 @@ const StatusItem = ({ status_tree, path, my_clock_is_ahead_by, nbpkg, backend_la
         }
     }
 
+    const can_open = Object.values(mystatus.subtasks).length > 0
+
     return path.length === 0
         ? inner
         : html`<pl-status
@@ -199,8 +201,9 @@ const StatusItem = ({ status_tree, path, my_clock_is_ahead_by, nbpkg, backend_la
                   finished,
                   busy,
                   is_open,
-                  can_open: Object.values(mystatus.subtasks).length > 0,
+                  can_open,
               })}
+              aria-expanded=${can_open ? is_open : undefined}
           >
               <div
                   onClick=${(e) => {