improve destroy across all component

docs/guide/dropdown.md

@@ -30,14 +30,14 @@ If you are using a `ul` as a dropdown, it will use, by default, the `menu` mode
 
 ```html
 <!-- Menu dropdown -->
-<div class="c-dropdown">
+<nav class="c-dropdown" aria-label="My superb dropdown menu">
   <a class="c-dropdown-trigger" aria-controls="my-dropdown">Item 1 - Dropdown Menu</a>
   <ul class="c-dropdown-container" id="my-dropdown">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
   </ul>
-</div>
+</nav>
 ```
 
 ## Accessibility

packages/core/src/components/_parent.ts

@@ -135,6 +135,7 @@ export default abstract class Parent {
    */
   public destroy() {
     this.emitEvent('destroy')
+    this.el.classList.remove(`c-${this.name}--a11y`)
     this.destroyEvents()
   }
 

packages/core/src/components/collapse.ts

@@ -21,6 +21,8 @@ export default class Collapse extends Parent {
   private expanded = false
   private collapsing = false
   private timeout: number | undefined = undefined
+  private showClass = 'c-collapse--show'
+  private collapsingClass = 'c-collapse--collapsing'
 
   constructor(el: HTMLElement | string, options: CollapseOptions = {}) {
     super(el, options)
@@ -30,7 +32,7 @@ export default class Collapse extends Parent {
 
   public init() {
     this.name = 'collapse'
-    this.expanded = this.el.classList.contains('c-collapse--show')
+    this.expanded = this.el.classList.contains(this.showClass)
     this.update()
     super.init()
   }
@@ -84,15 +86,15 @@ export default class Collapse extends Parent {
     this.expanded = true
     if (this.hasTransition) {
       this.collapsing = true
-      this.el.classList.add('c-collapse--collapsing')
+      this.el.classList.add(this.collapsingClass)
       const height = this.el.scrollHeight
       this.el.style.height = `${height}px`
       this.onCollapse()
     }
     else {
       this.emitEvent('shown')
     }
-    this.el.classList.add('c-collapse--show')
+    this.el.classList.add(this.showClass)
     this.update()
   }
 
@@ -107,14 +109,14 @@ export default class Collapse extends Parent {
       // eslint-disable-next-line no-unused-expressions
       this.el.offsetHeight // reflow
       this.collapsing = true
-      this.el.classList.add('c-collapse--collapsing')
+      this.el.classList.add(this.collapsingClass)
       this.el.style.height = '0px'
       this.onCollapse()
     }
     else {
       this.emitEvent('hidden')
     }
-    this.el.classList.remove('c-collapse--show')
+    this.el.classList.remove(this.showClass)
 
     this.update()
   }
@@ -124,7 +126,7 @@ export default class Collapse extends Parent {
     this.emitEvent(this.expanded ? 'show' : 'hide')
 
     this.timeout = window.setTimeout(() => {
-      this.el.classList.remove('c-collapse--collapsing')
+      this.el.classList.remove(this.collapsingClass)
       this.collapsing = false
       this.el.style.height = ''
 
@@ -149,4 +151,12 @@ export default class Collapse extends Parent {
   private get hasTransition() {
     return getTransitionDuration(this.el) !== 0
   }
+
+  public destroy(): void {
+    this.el.classList.remove(this.collapsingClass)
+    this.triggers.forEach((trigger) => {
+      trigger.removeAttribute('aria-expanded')
+    })
+    super.destroy()
+  }
 }

packages/core/src/components/drag.ts

@@ -139,6 +139,8 @@ export default class Drag extends Parent {
 
   public destroy() {
     this.resizeObserver?.disconnect()
+    this.el.classList.remove(this.draggingClass)
+    this.el.classList.remove(this.draggableClass)
     super.destroy()
   }
 }

packages/core/src/components/drilldown.ts

@@ -42,6 +42,9 @@ export default class Drilldown extends Parent {
   private resizeObserver?: ResizeObserver
   private mutationObserver?: MutationObserver
 
+  private delayCssVar = '--c-drilldown-delay'
+  private hiddenData = 'data-c-hidden'
+
   constructor(el: HTMLElement | string, options: DrilldownOptions = {}) {
     super(el, options)
     if (this.isInitializable)
@@ -207,7 +210,7 @@ export default class Drilldown extends Parent {
 
     this.wrapper.style.transform = `translateX(-${this.level * 100}%)`
     const delay = getTransitionDuration(this.wrapper)
-    this.wrapper.style.setProperty('--c-drilldown-delay', `${delay}ms`)
+    this.wrapper.style.setProperty(this.delayCssVar, `${delay}ms`)
     this.disableFocusElements()
 
     if (reloadItems) {
@@ -285,7 +288,7 @@ export default class Drilldown extends Parent {
   private disableFocusElements() {
     const elsBeenDisable = this.el.querySelectorAll('[data-c-hidden]')
     elsBeenDisable.forEach((el) => {
-      el.removeAttribute('data-c-hidden')
+      el.removeAttribute(this.hiddenData)
       el.removeAttribute('tabindex')
     })
 
@@ -298,7 +301,7 @@ export default class Drilldown extends Parent {
       if (menu === this.currentEl)
         return
 
-      item.setAttribute('data-c-hidden', 'true')
+      item.setAttribute(this.hiddenData, 'true')
       item.setAttribute('tabindex', '-1')
     })
   }
@@ -369,6 +372,39 @@ export default class Drilldown extends Parent {
   public destroy() {
     this.mutationObserver?.disconnect()
     this.resizeObserver?.disconnect()
+    this.wrapper?.removeAttribute('role')
+    this.wrapper?.removeAttribute('aria-multiselectable')
+    this.wrapper?.removeAttribute('aria-orientation')
+    this.wrapper?.querySelectorAll('.c-drilldown-menu').forEach((menu) => {
+      menu.removeAttribute('role')
+    })
+
+    const items = this.el.querySelectorAll('.c-drilldown-menu > li')
+    items.forEach((item) => {
+      item.removeAttribute('role')
+    })
+
+    const backs = this.el.querySelectorAll('.c-drilldown-back')
+    const nexts = this.el.querySelectorAll('.c-drilldown-next')
+    backs.forEach((back) => {
+      back.removeAttribute('role')
+    })
+    nexts.forEach((next) => {
+      next.removeAttribute('role')
+      next.removeAttribute('aria-expanded')
+      if (!next.getAttribute('aria-controls')) {
+        const menu = next.parentElement?.querySelector('.c-drilldown-menu')
+        next.removeAttribute('aria-controls')
+        menu?.removeAttribute('id')
+      }
+    })
+    const elsBeenDisable = this.el.querySelectorAll('[data-c-hidden]')
+    elsBeenDisable.forEach((el) => {
+      el.removeAttribute(this.hiddenData)
+      el.removeAttribute('tabindex')
+    })
+
+    this.wrapper?.style.removeProperty(this.delayCssVar)
     super.destroy()
   }
 }

packages/core/src/components/dropdown.ts

@@ -282,6 +282,22 @@ export default class Dropdown extends Parent {
 
   public destroy() {
     this.mutationObserver?.disconnect()
+    if (this.triggerEl) {
+      if (this.triggerEl.tagName !== 'BUTTON')
+        this.triggerEl.removeAttribute('role')
+      this.triggerEl.removeAttribute('aria-controls')
+    }
+    if (this.type === 'menu' && this.menuEl) {
+      this.menuEl?.removeAttribute('role')
+      const lis = this.menuEl.querySelectorAll(':scope > li')
+      lis.forEach((li) => {
+        li.removeAttribute('role')
+      })
+      const actions = this.menuEl.querySelectorAll(':scope > li > button, :scope > li > a')
+      actions.forEach((action) => {
+        action.removeAttribute('role')
+      })
+    }
     super.destroy()
   }
 }

packages/core/src/components/marquee.ts

@@ -43,6 +43,19 @@ export default class Marquee extends Parent {
   private clones: Element[] = []
   private fillMultiplier = 1
 
+  private keyboardClass = 'c-marquee--keyboard'
+  private pauseClass = 'c-marquee--pause'
+  private behaviorAlternateClass = 'c-marquee--behavior-alternate'
+  private behaviorScrollClass = 'c-marquee--behavior-scroll'
+  private directionLeftClass = 'c-marquee--direction-left'
+  private directionRightClass = 'c-marquee--direction-right'
+  private directionTopClass = 'c-marquee--direction-top'
+  private directionBottomClass = 'c-marquee--direction-bottom'
+  private fillClass = 'c-marquee--fill'
+  private startCssVar = '--c-marquee-start'
+  private endCssVar = '--c-marquee-end'
+  private durationCssVar = '--c-marquee-duration'
+
   constructor(el: HTMLElement | string, options: MarqueeOptions = {}) {
     super(el, options)
     if (this.isInitializable)
@@ -101,7 +114,7 @@ export default class Marquee extends Parent {
     this.registerEvent({
       id: 'addKeyboardClass',
       function: () => {
-        this.el.classList.add('c-marquee--keyboard')
+        this.el.classList.add(this.keyboardClass)
       },
       event: 'keydown',
       el: this.el,
@@ -118,7 +131,7 @@ export default class Marquee extends Parent {
           )
         )
           return
-        this.el.classList.remove('c-marquee--keyboard')
+        this.el.classList.remove(this.keyboardClass)
       },
       event: 'focusout',
       el: this.el,
@@ -158,13 +171,13 @@ export default class Marquee extends Parent {
     }
 
     this.el.style.setProperty(
-      '--c-marquee-duration',
+      this.durationCssVar,
       duration,
     )
 
     // Fill
     this.el.classList.toggle(
-      'c-marquee--fill',
+      this.fillClass,
       this.opts?.fill === true,
     )
 
@@ -178,11 +191,11 @@ export default class Marquee extends Parent {
 
     // Behavior
     this.el.classList.toggle(
-      'c-marquee--behavior-alternate',
+      this.behaviorAlternateClass,
       this.opts?.behavior === 'alternate',
     )
     this.el.classList.toggle(
-      'c-marquee--behavior-scroll',
+      this.behaviorScrollClass,
       this.opts?.behavior !== 'alternate',
     )
 
@@ -195,36 +208,34 @@ export default class Marquee extends Parent {
 
     if (this.opts.fill) {
       this.el.style.setProperty(
-        '--c-marquee-start',
+        this.startCssVar,
         `0`,
       )
       this.el.style.setProperty(
-        '--c-marquee-end',
+        this.endCssVar,
         `-${Math.ceil(this.containerSize)}px`,
       )
     }
     else {
       this.el.style.setProperty(
-        '--c-marquee-end',
+        this.endCssVar,
         `${Math.ceil(this.elSize)}px`,
       )
     }
   }
 
   public play() {
-    this.el.classList.remove('c-marquee--pause')
+    this.el.classList.remove(this.pauseClass)
     this.emitEvent('play')
   }
 
   public pause() {
-    this.el.classList.add('c-marquee--pause')
+    this.el.classList.add(this.pauseClass)
     this.emitEvent('pause')
   }
 
-  public destroy() {
-    this.mutationObserver?.disconnect()
-    this.resizeObserver?.disconnect()
-    super.destroy()
+  public get isPaused() {
+    return this.el.classList.contains(this.pauseClass)
   }
 
   private fill(fillMultiplier: number) {
@@ -253,4 +264,24 @@ export default class Marquee extends Parent {
       })
     }
   }
+
+  public destroy() {
+    this.mutationObserver?.disconnect()
+    this.resizeObserver?.disconnect()
+    this.clones.forEach(clone => clone.remove())
+    this.el.removeAttribute('tabindex')
+    this.el.classList.remove(this.pauseClass)
+    this.el.classList.remove(this.keyboardClass)
+    this.el.classList.remove(this.behaviorAlternateClass)
+    this.el.classList.remove(this.behaviorScrollClass)
+    this.el.classList.remove(this.directionLeftClass)
+    this.el.classList.remove(this.directionRightClass)
+    this.el.classList.remove(this.directionTopClass)
+    this.el.classList.remove(this.directionBottomClass)
+    this.el.classList.remove(this.fillClass)
+    this.el.style.removeProperty(this.startCssVar)
+    this.el.style.removeProperty(this.endCssVar)
+    this.el.style.removeProperty(this.durationCssVar)
+    super.destroy()
+  }
 }