Misc ARIA improvements (#2766)

fonsp · Jan 3, 2024 · be464bc · be464bc
1 parent a6a285e
commit be464bc
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) => {