Display context menu nicely + little bit of accessibility

JessFairbairn · Feb 16, 2025 · 80ba70f · 80ba70f
1 parent fce6099
commit 80ba70f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/page/TabItems.js b/page/TabItems.js
@@ -37,10 +37,11 @@ export class TabItemList extends HTMLElement {
         }
 
         this.shadowRoot.querySelector("#closeAllButton").onclick = _event => {
-            closeFunction(false)
+            closeFunction(false);
         };
         this.shadowRoot.querySelector("#close-all-including-hidden-button").onclick = _event => {
-            closeFunction(true)
+            shadowRoot.getElementById("context-button").focus();
+            closeFunction(true);
         };
         this.shadowRoot.querySelector("#collapseButton").onclick = this.toggleCollapse;
 

diff --git a/page/style.css b/page/style.css
@@ -2,12 +2,11 @@
 @import url('light-colours.css') (prefers-color-scheme: light);
 
 *, button {
-    font-family: "Fira Sans", Helvetica, sans-serif;
+    font-family: "Fira Sans", Helvetica, sans-serif!important;
 }
-
+ 
 
 .cool-list {
-
     padding: 0.5em;
 }
 
@@ -18,18 +17,18 @@
 }
 
 
-/* .cool-list li:nth-child(odd) {
+.cool-list li:nth-child(odd) {
     background-color: var(--group-background-colour);
-} */
+}
 
 .cool-list > li, .cool-list > .tab-item {
-    /* background-color: var(--alternate-row-colour); */
+    background-color: var(--alternate-row-colour);
     background-color: var(--group-background-colour);
 }
 
 .cool-list ul > li {
     background-color: var(--alternate-row-colour);
-}
+} */
 
 
 .cool-list, ul.cool-list{

diff --git a/page/templates.html b/page/templates.html
@@ -97,6 +97,10 @@
             padding-top: 2px; /*not super important but makes the chevron not too high*/
         }
 
+        #menuWrapper {
+            position: relative;
+        }
+
         menu {
             display: none;
             background-color: grey;
@@ -117,9 +121,10 @@
         menu button {
             border: 0;
             padding: 0.5em;
+            min-width: 10em;
         }
 
-        a#context-button:active menu, menu:focus-within, menu.visible {
+        #context-button:active~menu, menu:focus-within, menu.visible {
             display: block;
             position: absolute;
         }
@@ -138,20 +143,16 @@
         }
     </style>
     <div class="flex-bar"><slot></slot>: <slot name="number"></slot>
-        <a id="context-button" href="#">
+        <button id="context-button" href="#">
             <span>⋯</span>
-            <menu>
-                <li><button id="close-all-including-hidden-button">
+        </button>
+        <div id="menuWrapper">
+            <menu id="contextMenu" role="menu">
+                <li><button id="close-all-including-hidden-button" role="menuitem">
                     Close all including hidden
                 </button></li>
             </menu>
-        </a>
-
-        <!-- <div class="menu-wrapper">
-            <menu>
-                <button>test</button>
-            </menu>
-        </div> -->
+        </div>
         <button
         id="collapseButton"
         title="Toggle list of tabs in category"