fix(): bug fixes

ThomasGysemans · Apr 13, 2021 · cd76eae · cd76eae
1 parent 6a102f8
commit cd76eae
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/src/JSPanel.js b/src/JSPanel.js
@@ -1,6 +1,6 @@
 "use strict";
 /**
- * @class Creates a panel that follows the digital accessibility recommendations
+ * @class Creates a panel that follows the digital accessibility recommendations.
  */
 class JSPanel {
     /**
@@ -19,9 +19,9 @@ class JSPanel {
         this.button = button;
         this.options = options;
         this.panel_uniqueid = "jspanel-" + this._rand(0, 1000000);
+        this._buildPanel();
         this.button.setAttribute("aria-expanded", "false");
         this.button.setAttribute("aria-controls", this.panel_uniqueid);
-        this._buildPanel();
     }
     /**
      * Builds the panel.
@@ -117,7 +117,7 @@ class JSPanel {
                 this._closePanel();
             }
             else {
-                this.button.setAttribute("expanded", "true");
+                this.button.setAttribute("aria-expanded", "true");
                 this.panel.classList.remove("panel-hidden");
             }
         }
@@ -128,7 +128,7 @@ class JSPanel {
      */
     _closePanel() {
         if (this.button && this.panel) {
-            this.button.setAttribute("expanded", "false");
+            this.button.setAttribute("aria-expanded", "false");
             this.panel.classList.add("panel-hidden");
         }
     }
@@ -173,6 +173,7 @@ class JSPanel {
      * Builds an item.
      * @param {{title:string,icon?:string,fontawesome_icon?:string,onclick?:Function,separator?:boolean}} item The item to build.
      * @returns {HTMLElement} The item as an HTML element.
+     * @private
      */
     _buildItem(item) {
         if (item.separator) {

diff --git a/src/JSPanel.ts b/src/JSPanel.ts
@@ -165,7 +165,7 @@ class JSPanel {
             if (this._isOpened()) {
                 this._closePanel();
             } else {
-                this.button.setAttribute("expanded", "true");
+                this.button.setAttribute("aria-expanded", "true");
                 this.panel.classList.remove("panel-hidden");
             }
         }
@@ -177,7 +177,7 @@ class JSPanel {
      */
     private _closePanel(): void {
         if (this.button && this.panel) {
-            this.button.setAttribute("expanded", "false");
+            this.button.setAttribute("aria-expanded", "false");
             this.panel.classList.add("panel-hidden");
         }
     }

diff --git a/src/example.html b/src/example.html
@@ -41,13 +41,13 @@
             cursor: pointer;
             background-color: #fff;
             border: 1px solid #dfe3eb;
-            box-shadow: 1px 2px 3px rgba(204, 204, 204, 0.75);
+            box-shadow: 0 0 3px rgba(204, 204, 204, 0.75);
             color: #303030;
             font-size: 22px;
             transition: transform 200ms ease;
         }
 
-        #panel-controller.visible {
+        #panel-controller[aria-expanded="true"] {
             transform: rotate(45deg);
         }
     </style>

diff --git a/src/panel-style.css b/src/panel-style.css
@@ -63,7 +63,8 @@
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-    width: 80%;
+    display: block;
+    width: 100%;
     text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;