Merge branch 'release/1.4.3' into main

BeAPI · Sep 14, 2023 · 9f79355 · 9f79355
2 parents db29552 + a13f910
commit 9f79355
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.4.3 - 2023-09-14
+
+- Add `mediaQuery` option to Accordion component
+- Replace all `matchMedia` options with `mediaQuery`
+
 ## 1.4.2 - 2023-07-03
 
 - Slider, infinite mode position

diff --git a/examples/accessible-accordion/index.html b/examples/accessible-accordion/index.html
@@ -627,6 +627,108 @@ <h4>
                 </fieldset>
             </div>
         </div>
+
+        <h3>Accordion but only for &lt; 600px devices</h3>
+
+        <div id="accordion-demo-7" class="accordion">
+            <h4>
+                <button class="accordion__trigger" aria-expanded="true">
+                    <span class="accordion__title">
+                        Personal Information
+                    </span>
+                </button>
+            </h4>
+            <div class="accordion__panel" role="region">
+                <fieldset>
+                    <p>
+                        <label for="cufc1-6">Name<span aria-hidden="true">*</span>:</label>
+                        <input type="text" value="" name="Name" id="cufc1-6" class="required" aria-required="true">
+                    </p>
+                    <p>
+                        <label for="cufc2-6">Email<span aria-hidden="true">*</span>:</label>
+                        <input type="text" value="" name="Email" id="cufc2-6" aria-required="true">
+                    </p>
+                    <p>
+                        <label for="cufc3-6">Phone:</label>
+                        <input type="text" value="" name="Phone" id="cufc3-6">
+                    </p>
+                    <p>
+                        <label for="cufc4-6">Extension:</label>
+                        <input type="text" value="" name="Ext" id="cufc4-6">
+                    </p>
+                    <p>
+                        <label for="cufc5-6">Country:</label>
+                        <input type="text" value="" name="Country" id="cufc5-6">
+                    </p>
+                    <p>
+                        <label for="cufc6-6">City/Province:</label>
+                        <input type="text" value="" name="City_Province" id="cufc6-6">
+                    </p>
+                </fieldset>
+            </div>
+            <h4>
+                <button aria-expanded="false" class="accordion__trigger">
+                    <span class="accordion__title">
+                        Billing Address
+                    </span>
+                </button>
+            </h4>
+            <div class="accordion__panel" role="region" style="display: none;">
+                <fieldset>
+                    <p>
+                        <label for="b-add1-6">Address 1:</label>
+                        <input type="text" name="b-add1-6" id="b-add1-4">
+                    </p>
+                    <p>
+                        <label for="b-add2-6">Address 2:</label>
+                        <input type="text" name="b-add2-6" id="b-add2-6">
+                    </p>
+                    <p>
+                        <label for="b-city-6">City:</label>
+                        <input type="text" name="b-city-6" id="b-city-6">
+                    </p>
+                    <p>
+                        <label for="b-state-4">State:</label>
+                        <input type="text" name="b-state-6" id="b-state-6">
+                    </p>
+                    <p>
+                        <label for="b-zip-6">Zip Code:</label>
+                        <input type="text" name="b-zip-6" id="b-zip-6">
+                    </p>
+                </fieldset>
+            </div>
+            <h4>
+                <button aria-expanded="false" class="accordion__trigger">
+                    <span class="accordion__title">
+                        Shipping Address
+                    </span>
+                </button>
+            </h4>
+            <div class="accordion__panel" role="region" style="display: none;">
+                <fieldset>
+                    <p>
+                        <label for="m-add1-6">Address 1:</label>
+                        <input type="text" name="m-add1-6" id="m-add1-6">
+                    </p>
+                    <p>
+                        <label for="m-add2-6">Address 2:</label>
+                        <input type="text" name="m-add2-6" id="m-add2-6">
+                    </p>
+                    <p>
+                        <label for="m-city-6">City:</label>
+                        <input type="text" name="m-city-6" id="m-city-6">
+                    </p>
+                    <p>
+                        <label for="m-state-6">State:</label>
+                        <input type="text" name="m-state-6" id="m-state-6">
+                    </p>
+                    <p>
+                        <label for="m-zip-6">Zip Code:</label>
+                        <input type="text" name="m-zip-6" id="m-zip-6">
+                    </p>
+                </fieldset>
+            </div>
+        </div>
 
         <h2>Code</h2>
 
@@ -658,8 +760,11 @@ <h2>Code</h2>
                         alert(`${panel.id} opened`)
                     }
                 },
+                '#accordion-demo-7': {
+                    mediaQuery: window.matchMedia('(max-width: 599px)'),
+                },
             }
-            
+
             Accordion.initFromPreset()
         </script>
     </body>

diff --git a/examples/accessible-dropdown/README.md b/examples/accessible-dropdown/README.md
@@ -61,7 +61,7 @@ Dropdown.preset = {
     automaticSelection: true,
   },
   '#dropdown-2': {
-    matchMedia: window.matchMedia('(min-width: 1024px)'),
+    mediaQuery: window.matchMedia('(min-width: 1024px)'),
   },
 };
 
@@ -79,7 +79,7 @@ Dropdown.initFromPreset();
 | `buttonSelector`     | string                    | `button`           | Button selector.                                |
 | `labelSelector`      | string                    | `.dropdown__label` | Label selector.                                 |
 | `listSelector`       | string                    | `ul`               | Listbox selector.                               |
-| `matchMedia`         | null or matchMedia object | `null`             | Set dropdown for a specific media query.        |
+| `mediaQuery`         | null or matchMedia object | `null`             | Set dropdown for a specific media query.        |
 | `onChange`           | null or function          | `null`             | Event on dropdown change.                       |
 | `onClose`            | null or function          | `null`             | Event on dropdown close.                        |
 | `onListItemClick`    | null or function          | `null`             | Event on dropdown list item click.              |

diff --git a/examples/accessible-dropdown/index.html b/examples/accessible-dropdown/index.html
@@ -125,7 +125,7 @@ <h2>Code</h2>
                     },
                 },
                 '#dropdown-5': {
-                    matchMedia: window.matchMedia('(max-width: 1024px)')
+                    mediaQuery: window.matchMedia('(max-width: 1024px)')
                 }
             }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@beapi/be-a11y",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Collection of usefull accessible components",
   "repository": {
     "type": "git",

diff --git a/src/classes/Accordion.js b/src/classes/Accordion.js
@@ -1,6 +1,7 @@
 import AbstractDomElement from './AbstractDomElement.js'
 import DOMAnimations from '../utils/DOMAnimations.js'
 import { randomId } from '../utils/helpers.js'
+import { ThrottledEvent } from 'oneloop.js'
 
 /**
  * Accordion class
@@ -15,20 +16,36 @@ class Accordion extends AbstractDomElement {
       return instance
     }
 
+    const { mediaQuery } = this._settings
+
+    this.active = false
     this.focus = false
+    this._onResizeHandler = onResize.bind(this)
     this.handleButtonBlur = this.handleButtonBlur.bind(this)
     this.handleButtonFocus = this.handleButtonFocus.bind(this)
     this.handleButtonClick = this.handleButtonClick.bind(this)
     this.handleKeydown = this.handleKeydown.bind(this)
-    this.init()
+
+    new ThrottledEvent(window, 'resize').add('resize', this._onResizeHandler)
+    this._onResizeHandler()
+
+    if (Boolean(mediaQuery && mediaQuery.matches) || !mediaQuery) {
+      this.init()
+    } else {
+      this.destroy()
+    }
   }
 
   /**
    * Initialization
+   *
    * @returns {void}
+   *
    * @author Milan Ricoul
    */
   init() {
+    this.active = true
+
     const el = this._element
     const { closedDefault, panelSelector, prefixId, triggerSelector } = this._settings
     const triggers = el.querySelectorAll(triggerSelector)
@@ -50,6 +67,7 @@ class Accordion extends AbstractDomElement {
 
       trigger.id = `${prefixId}-${id}-${i}`
       trigger.setAttribute('aria-controls', `${prefixId}-${id}-panel-${i}`)
+      trigger.setAttribute('aria-expanded', `${index === 0 ? 'true' : 'false'}`)
     })
 
     // Set id and ARIA attributes to the panel
@@ -61,17 +79,58 @@ class Accordion extends AbstractDomElement {
       panel.id = `${prefixId}-${id}-panel-${i}`
       panel.setAttribute('aria-labelledby', `${prefixId}-${id}-${i}`)
 
+      if (index !== 0) {
+        panel.style.display = 'none'
+      }
+
       if (closedDefault) {
         this.close(panel)
       }
     })
 
+    // Add events
     this.applyToSelectors(triggers, (trigger) => trigger.addEventListener('click', this.handleButtonClick))
     this.applyToSelectors(triggers, (trigger) => trigger.addEventListener('focus', this.handleButtonFocus))
     this.applyToSelectors(triggers, (trigger) => trigger.addEventListener('blur', this.handleButtonBlur))
     document.addEventListener('keydown', this.handleKeydown)
   }
 
+  /**
+   * Destroy component
+   *
+   * @returns {void}
+   *
+   * @author Milan Ricoul
+   */
+  destroy() {
+    this.active = false
+
+    const el = this._element
+    const { panelSelector, triggerSelector } = this._settings
+    const triggers = el.querySelectorAll(triggerSelector)
+    const panels = el.querySelectorAll(panelSelector)
+
+    // Remove id and ARIA attributes from the trigger
+    this.applyToSelectors(triggers, (trigger) => {
+      trigger.removeAttribute('id')
+      trigger.removeAttribute('aria-controls')
+      trigger.removeAttribute('aria-expanded')
+    })
+
+    // Remove id and ARIA attributes from the panel
+    this.applyToSelectors(panels, (panel) => {
+      panel.removeAttribute('id')
+      panel.removeAttribute('aria-labelledby')
+      panel.removeAttribute('style')
+    })
+
+    // Remove events
+    this.applyToSelectors(triggers, (trigger) => trigger.removeEventListener('click', this.handleButtonClick))
+    this.applyToSelectors(triggers, (trigger) => trigger.removeEventListener('focus', this.handleButtonFocus))
+    this.applyToSelectors(triggers, (trigger) => trigger.removeEventListener('blur', this.handleButtonBlur))
+    document.addEventListener('keydown', this.handleKeydown)
+  }
+
   /**
    * Execute a function for every elements in node list
    * @param {NodeList} selectors node list
@@ -292,11 +351,29 @@ class Accordion extends AbstractDomElement {
   }
 }
 
+/**
+ * Events
+ *
+ * @returns {void}
+ *
+ * @author Milan Ricoul
+ */
+function onResize() {
+  const { mediaQuery } = this._settings
+
+  if (!this.active && ((mediaQuery && mediaQuery.matches) || !mediaQuery)) {
+    this.init()
+  } else if (this.active && mediaQuery && !mediaQuery.matches) {
+    this.destroy()
+  }
+}
+
 Accordion.defaults = {
   allowMultiple: false,
   closedDefault: false,
   forceExpand: true,
   hasAnimation: false,
+  mediaQuery: null,
   onOpen: null,
   onClose: null,
   panelSelector: '.accordion__panel',

diff --git a/src/classes/Dropdown.js b/src/classes/Dropdown.js
@@ -14,7 +14,8 @@ class Dropdown extends AbstractDomElement {
       return instance
     }
 
-    const { matchMedia } = this._settings
+    const { mediaQuery } = this._settings
+
     this.opened = false
     this.active = false
     this.focusedElement = null
@@ -27,7 +28,7 @@ class Dropdown extends AbstractDomElement {
     this._resize.add('resize', this._onResize)
     this._defineId = defineId.bind(this)
 
-    if (Boolean(matchMedia && matchMedia.matches) || !matchMedia) {
+    if (Boolean(mediaQuery && mediaQuery.matches) || !mediaQuery) {
       this.init()
     } else {
       this.destroy()
@@ -119,6 +120,7 @@ class Dropdown extends AbstractDomElement {
 
     if (!this.active) {
       const el = this._element
+
       this.button = el.querySelector(buttonSelector)
       this.label = el.querySelector(labelSelector)
       this.list = el.querySelector(listSelector)
@@ -159,11 +161,11 @@ class Dropdown extends AbstractDomElement {
    * @author Milan Ricoul
    */
   refresh() {
-    const { matchMedia } = this._settings
+    const { mediaQuery } = this._settings
 
-    if (!this.active && ((matchMedia && matchMedia.matches) || !matchMedia)) {
+    if (!this.active && ((mediaQuery && mediaQuery.matches) || !mediaQuery)) {
       this.init()
-    } else if (this.active && matchMedia && !matchMedia.matches) {
+    } else if (this.active && mediaQuery && !mediaQuery.matches) {
       this.destroy()
     }
   }
@@ -375,6 +377,7 @@ class Dropdown extends AbstractDomElement {
 
 /**
  * On screen resize
+ *
  * @author Milan Ricoul
  */
 function onResize() {
@@ -383,7 +386,9 @@ function onResize() {
 
 /**
  * Set id to the modal dialog
+ *
  * @author Milan Ricoul
+ *
  * @returns {string}
  */
 function defineId() {
@@ -403,7 +408,7 @@ Dropdown.defaults = {
   labelSelector: '.dropdown__label',
   listClassName: 'dropdown__list',
   listSelector: 'ul',
-  matchMedia: null,
+  mediaQuery: null,
   onChange: null,
   onClose: null,
   onListItemClick: null,