diff --git a/src/JSPanel.js b/src/JSPanel.js index 27f5177..e03aa59 100644 --- 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 index e509f45..d9d3a81 100644 --- 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 index 4f56b78..d1b3b33 100644 --- 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); } diff --git a/src/panel-style.css b/src/panel-style.css index 0425ea0..efb2de3 100644 --- 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;