basic digital accessibility

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.1.0] - April 23, 2021
+
+Better digital accessibility.
+
 ## [1.0.2] - April 19, 2021
 
 New options for the items:

src/JSPanel.js

@@ -119,6 +119,10 @@ class JSPanel {
             else {
                 this.button.setAttribute("aria-expanded", "true");
                 this.panel.classList.remove("panel-hidden");
+                // Digital accessibility
+                const all_items = this.panel.querySelectorAll("li");
+                if (all_items && all_items[0])
+                    all_items[0].focus();
             }
         }
     }
@@ -182,6 +186,7 @@ class JSPanel {
         }
         else {
             const li = this._createEl("li");
+            li.setAttribute("tabindex", "0");
             if ((item.icon && !item.fontawesome_icon) || (item.icon && item.fontawesome_icon)) {
                 const icon = this._createEl("img", { attributes: [["src", item.icon]] });
                 li.appendChild(icon);

src/JSPanel.ts

@@ -170,6 +170,11 @@ class JSPanel {
             } else {
                 this.button.setAttribute("aria-expanded", "true");
                 this.panel.classList.remove("panel-hidden");
+
+                // Digital accessibility
+
+                const all_items = this.panel.querySelectorAll("li");
+                if (all_items && all_items[0]) all_items[0].focus();
             }
         }
     }
@@ -236,6 +241,7 @@ class JSPanel {
             return div;
         } else {
             const li = this._createEl("li");
+            li.setAttribute("tabindex", "0");
 
             if ((item.icon && !item.fontawesome_icon) || (item.icon && item.fontawesome_icon)) {
                 const icon = this._createEl("img", { attributes: [["src", item.icon]] });

src/example.html

@@ -37,7 +37,6 @@
             height: 55px;
             border-radius: 50%;
             border: none;
-            outline: none;
             cursor: pointer;
             background-color: #fff;
             border: 1px solid #dfe3eb;
@@ -70,7 +69,7 @@ <h1>Look the button right there, here, you see it ?</h1>
                 { title: "My Profile", fontawesome_icon: "far fa-user", onclick: () => console.log("clicked on profile") },
                 { title: "Settings", fontawesome_icon: "fas fa-cog", onclick: () => console.log("clicked on settings") },
                 { separator: true, },
-                { title: "Close", fontawesome_icon: "far fa-window-close", className: "js-modal", attributes: [["data-modal", "#truc"]], onclick: () => console.log("clicked on close") },
+                { title: "Close", fontawesome_icon: "far fa-window-close", onclick: () => console.log("clicked on close") },
             ],
         });
     </script>

src/panel-style.css

@@ -56,6 +56,10 @@
     color: var(--panel-hover-item-color, #385074);
 }
 
+.jspanel li:focus {
+    outline: auto;
+}
+
 /* the title of the item */
 .jspanel li span {
     pointer-events: none;