Merge branch 'dev'

examples/accessible-dropdown/README.md

@@ -85,3 +85,45 @@ Dropdown.initFromPreset();
 | `onListItemClick`    | null or function          | `null`             | Event on dropdown list item click.              |
 | `onOpen`             | null or function          | `null`             | Event on dropdown open.                         |
 | `prefixId`           | string                    | `dropdown`         | Define the prefix id of the component.          |
+
+### Methods
+
+You can interract with the Dropdown component by adding or removing items. See example below.
+
+```html
+<button id="add-item" type="button">Add new item</button>
+
+<div class="dropdown">
+    <span class="dropdown__label">Choose an element</span>
+    <button aria-haspopup="listbox">Book</button>
+    <ul tabindex="-1" role="listbox">
+        <li role="option">Book</li>
+        <li role="option">Movies</li>
+        <li role="option">Music</li>
+        <li role="option">Video games</li>
+        <li role="option">Paint</li>
+    </ul>
+</div>
+```
+
+```js
+import { Dropdown } from '@beapi/be-a11y';
+
+Dropdown.init('.dropdown');
+
+const addButton = document.getElementById('add-item');
+const dropdownInstance = Dropdown.getInstance('.dropdown');
+
+addButton.addEventListener('click', function() {
+  const newListItem = document.createElement('li');
+  newListItem.innerText = 'Dummy';
+
+  dropdownInstance.addItem(newListItem);
+});
+```
+
+| Name             | Params                  | Description                                      |
+|------------------|-------------------------|--------------------------------------------------|
+| `addItem`        | `listItem: HTMLElement` | Adds a new list item to the dropdown.            |
+| `removeItem`     | `listItem: HTMLElement` | Removes a specified list item from the dropdown. |
+| `removeAllItems` | None                    | Removes all list items from the dropdown.        |

examples/accessible-dropdown/index.html

@@ -86,6 +86,24 @@ <h3>Dropdown only for &lt; 1024px devices</h3>
                 <li role="option">Paint</li>
             </ul>
         </div>
+
+        <h3>Action buttons</h3>
+
+        <div id="dropdown-6" class="dropdown">
+            <span class="dropdown__label">Choose an element</span>
+            <button aria-haspopup="listbox">Choose an element</button>
+            <ul tabindex="-1" role="listbox">
+                <li role="option">Book</li>
+                <li role="option">Movies</li>
+                <li role="option">Music</li>
+                <li role="option">Video games</li>
+                <li role="option">Paint</li>
+            </ul>
+        </div>
+
+        <button id="add">Add a dummy item</button>
+        <button id="remove">Remove the first item</button>
+        <button id="remove-all">Remove all items</button>
 
         <h2>Code</h2>
 
@@ -126,10 +144,31 @@ <h2>Code</h2>
                 },
                 '#dropdown-5': {
                     mediaQuery: window.matchMedia('(max-width: 1024px)')
-                }
+                },
+                '#dropdown-6': {},
             }
-            
+
             Dropdown.initFromPreset()
+
+            const addBtn = document.getElementById('add')
+            const removeBtn = document.getElementById('remove')
+            const removeAllBtn = document.getElementById('remove-all')
+            const dropdownInstance = Dropdown.getInstance('#dropdown-6')
+
+            addBtn.addEventListener('click', function() {
+                const listItem = document.createElement('li')
+                listItem.innerText = 'Dummy'
+                dropdownInstance.addItem(listItem)
+            })
+
+            removeBtn.addEventListener('click', function() {
+                dropdownInstance.removeItem(document.getElementById('dropdown-6').querySelectorAll('li')[0])
+            })
+
+            removeAllBtn.addEventListener('click', function() {
+                dropdownInstance.removeAllItems()
+            })
+
         </script>
     </body>
     </html>

package.json

@@ -27,7 +27,7 @@
     "a11Y",
     "accessibility",
     "w3c",
-    "componets",
+    "components",
     "modal",
     "tab",
     "accordion",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@babel/core": "^7.23.3",
     "@babel/preset-env": "^7.23.3",
-    "@playwright/test": "^1.40.0",
+    "@playwright/test": "^1.47.2",
     "@wordpress/stylelint-config": "^20.0.3",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.54.0",