@nys-cui/cui-section 0.1.3 → 0.2.1

package/package.json

@@ -6,7 +6,7 @@
     },
     "main": "./dist/js/section.js",
     "type": "module",
-    "version": "0.1.3",
+    "version": "0.2.1",
     "scripts": {
         "clean": "rm -rf ./dist",
         "build": "npm run clean && cui --dep",

package/src/section.js

@@ -40,7 +40,7 @@ export default class CUI_SECTION extends HTMLElement {
 
                 sTemplate += `
                     <div class="header-controls">
-                        <button type="button" id="collapse-control">
+                        <button type="button" id="collapse-control" aria-controls="container">
                             <cui-icon src="caret-down" base="${this.sIconBasePath}"></cui-icon>
                         </button>
                     </div>`;
@@ -50,7 +50,7 @@ export default class CUI_SECTION extends HTMLElement {
 
                 sTemplate += `
                     <div class="header-controls">
-                        <button type="button" id="collapse-control">
+                        <button type="button" id="collapse-control" aria-controls="container">
                             <cui-icon src="caret-down"></cui-icon>
                         </button>
                     </div>`;
@@ -76,12 +76,15 @@ export default class CUI_SECTION extends HTMLElement {
 
             // mark the section as "currently not collapsed"
             dContainer.setAttribute('data-collapsed', 'false');
+            dContainer.setAttribute('aria-expanded', 'true');
 
             // remove this event listener so it only gets triggered once
             dContainer.removeEventListener('transitionend', transitionEnd, this);
 
         }
 
+        dContainer.removeAttribute('aria-expanded');
+
         this.bLock = true;
 
         var sectionHeight = dContainer.scrollHeight;
@@ -101,12 +104,15 @@ export default class CUI_SECTION extends HTMLElement {
 
             // mark the section as "currently collapsed"
             dContainer.setAttribute('data-collapsed', 'true');
+            dContainer.setAttribute('aria-expanded', 'false');
 
             dContainer.style.height = "";
 
             dContainer.removeEventListener('transitionend', transitionEnd, true);
         }
 
+        dContainer.removeAttribute('aria-expanded');
+
         // get the height of the dContainer's inner content, regardless of its actual size
         var sectionHeight = dContainer.scrollHeight;
         
@@ -137,6 +143,16 @@ export default class CUI_SECTION extends HTMLElement {
 
     }
 
+    animationstart() {
+
+        console.log("Animation started");
+    }
+
+    animationend() {
+
+        console.log("Animation ended");
+    }
+
     connectedCallback() {
 
         this.state = {
@@ -159,9 +175,17 @@ export default class CUI_SECTION extends HTMLElement {
         this.sdSectionTitle = this.shadowRoot.querySelector(`#section-title`);
         this.sdContentsContainer = this.shadowRoot.querySelector(`#container`);
 
+        if (this.bCollapsed) {
+            this.sdContentsContainer.setAttribute('aria-expanded', 'false');
+        }
+        else {
+            this.sdContentsContainer.setAttribute('aria-expanded', 'true');
+        }
+        
+
         this.sdSectionTitle.appendChild(document.createTextNode(this.state.sTitle));
 
-       if (!this.state.bHideControls) {
+        if (!this.state.bHideControls) {
 
             this.sdSectionCollapseControl = this.shadowRoot.querySelector(`#collapse-control`);
 
@@ -173,6 +197,7 @@ export default class CUI_SECTION extends HTMLElement {
 
                     this.sdSectionCollapseControl.classList.add('collapsed');
                     this.sdContentsContainer.setAttribute('data-collapsed', "true");
+                    this.sdContentsContainer.setAttribute('aria-expanded', "false");
                 }
 
                 this.sdSectionCollapseControl.addEventListener('click', () => {

package/src/section.scss

@@ -72,6 +72,9 @@
                 height: 0;
             }
 
+            &[aria-expanded="false"] {
+                display: none;
+            }
             
         }
     }