chore(deps): enable a11y in Biome and update all dependencies (#471)

ghiscoding · web-flow · commit d74f7ebe271f · 2026-03-03T01:39:54.000-05:00
diff --git a/biome.json b/biome.json
@@ -57,7 +57,6 @@
             "!**/node_modules/**"
         ],
         "rules": {
-            "a11y": "off",
             "correctness": {
                 "useImportExtensions": {
                   "options": {
diff --git a/package.json b/package.json
@@ -56,13 +56,13 @@
     "pnpm": "10.x"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.2",
-    "@lerna-lite/cli": "^4.11.2",
-    "@lerna-lite/publish": "^4.11.2",
-    "@lerna-lite/watch": "^4.11.2",
+    "@biomejs/biome": "^2.4.5",
+    "@lerna-lite/cli": "^4.11.3",
+    "@lerna-lite/publish": "^4.11.3",
+    "@lerna-lite/watch": "^4.11.3",
     "@playwright/test": "^1.58.2",
-    "@types/node": "^24.10.13",
-    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "@types/node": "^24.11.0",
+    "conventional-changelog-conventionalcommits": "^9.2.0",
     "cross-env": "catalog:",
     "npm-run-all2": "^8.0.4",
     "remove-glob": "catalog:",
diff --git a/packages/demo/src/examples/example08.html b/packages/demo/src/examples/example08.html
@@ -17,7 +17,10 @@ <h2 class="bd-title">
         </span>
       </span>
     </h2>
-    <div class="demo-subtitle">Use <code>data</code>as data source.</div>
+    <div class="demo-subtitle">
+      Use <code>data</code>as data source. Also note when using <code>data</code>, you could also use any type of HTML container element.
+      For example a span, a div or event an input (e.g. the last one below is targeting a span)
+    </div>
   </div>
 </div>
 
@@ -49,6 +52,6 @@ <h2 class="bd-title">
   <div class="mb-3 row">
     <label class="col-sm-2">Group Array </label>
 
-    <div class="col-sm-10"><select id="group" class="full-width" multiple></select></div>
+    <div class="col-sm-10"><span id="group" class="full-width"></span></div>
   </div>
 </div>
diff --git a/packages/demo/src/examples/example08.ts b/packages/demo/src/examples/example08.ts
@@ -92,6 +92,7 @@ export default class Example {
 
     this.ms5 = multipleSelect('#group', {
       dataTest: 'select5',
+      single: false,
       data: [
         {
           type: 'optgroup',
diff --git a/packages/demo/src/examples/example13.html b/packages/demo/src/examples/example13.html
@@ -29,9 +29,9 @@ <h2 class="bd-title">
     <label class="col-sm-2">Create </label>
 
     <div class="col-sm-10">
-      <button id="destroyBtn" class="btn btn-danger btn-sm">Destroy</button>
-      <button id="createBtn" class="btn btn-primary btn-sm">Dynamically Create</button>
-      <button id="modifyBtn" class="btn btn-outline-secondary btn-sm">Modify Data</button>
+      <button id="destroyBtn" type="button" class="btn btn-danger btn-sm">Destroy</button>
+      <button id="createBtn" type="button" class="btn btn-primary btn-sm">Dynamically Create</button>
+      <button id="modifyBtn" type="button" class="btn btn-outline-secondary btn-sm">Modify Data</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/main.html b/packages/demo/src/main.html
@@ -6,7 +6,7 @@
     </a>
     <div class="github-button-container">
       <a href="https://github.com/ghiscoding/multiple-select-vanilla">
-        <img src="https://img.shields.io/github/stars/ghiscoding/multiple-select-vanilla?style=social">
+        <img src="https://img.shields.io/github/stars/ghiscoding/multiple-select-vanilla?style=social" alt="GitHub stars">
       </a>
     </div>
     <button
diff --git a/packages/demo/src/methods/methods01.html b/packages/demo/src/methods/methods01.html
@@ -23,7 +23,7 @@ <h2 class="bd-title">
   <div class="mb-3 row">
     <label class="col-sm-2">Methods </label>
 
-    <div class="col-sm-10"><button id="getOptions" class="btn btn-secondary">getOptions</button></div>
+    <div class="col-sm-10"><button id="getOptions" type="button" class="btn btn-secondary">getOptions</button></div>
   </div>
 
   <div class="mb-3 row">
diff --git a/packages/demo/src/methods/methods02.html b/packages/demo/src/methods/methods02.html
@@ -26,8 +26,8 @@ <h2 class="bd-title">
     <label class="col-sm-2">Methods </label>
 
     <div class="col-sm-5">
-      <button id="refreshOptions" class="btn btn-secondary">refreshOptions</button>
-      <button id="setDarkMode" class="btn btn-secondary">Toggle Dark Mode</button>
+      <button id="refreshOptions" type="button" class="btn btn-secondary">refreshOptions</button>
+      <button id="setDarkMode" type="button" class="btn btn-secondary">Toggle Dark Mode</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/methods/methods03.html b/packages/demo/src/methods/methods03.html
@@ -27,10 +27,10 @@ <h2 class="bd-title">
     <label class="col-sm-2">Methods </label>
 
     <div class="col-sm-10">
-      <button id="setSelectsBtn" class="btn btn-secondary">SetSelects</button>
-      <button id="getSelectsBtn" class="btn btn-secondary">GetSelects</button>
-      <button id="setSelectsBtn2" class="btn btn-secondary">SetSelects by 'text'</button>
-      <button id="getSelectsBtn2" class="btn btn-secondary">GetSelects by 'text'</button>
+      <button id="setSelectsBtn" type="button" class="btn btn-secondary">SetSelects</button>
+      <button id="getSelectsBtn" type="button" class="btn btn-secondary">GetSelects</button>
+      <button id="setSelectsBtn2" type="button" class="btn btn-secondary">SetSelects by 'text'</button>
+      <button id="getSelectsBtn2" type="button" class="btn btn-secondary">GetSelects by 'text'</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/methods/methods04.html b/packages/demo/src/methods/methods04.html
@@ -26,8 +26,8 @@ <h2 class="bd-title">
     <label class="col-sm-2">Methods </label>
 
     <div class="col-sm-10">
-      <button id="enableBtn" class="btn btn-secondary">Enable</button>
-      <button id="disableBtn" class="btn btn-secondary">Disable</button>
+      <button id="enableBtn" type="button" class="btn btn-secondary">Enable</button>
+      <button id="disableBtn" type="button" class="btn btn-secondary">Disable</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/methods/methods05.html b/packages/demo/src/methods/methods05.html
@@ -27,8 +27,8 @@ <h2 class="bd-title">
     <label class="col-sm-2">Methods </label>
 
     <div class="col-sm-10">
-      <button id="openBtn" class="btn btn-secondary">Open</button>
-      <button id="closeBtn" class="btn btn-secondary">Close</button>
+      <button id="openBtn" type="button" class="btn btn-secondary">Open</button>
+      <button id="closeBtn" type="button" class="btn btn-secondary">Close</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/methods/methods06.html b/packages/demo/src/methods/methods06.html
@@ -27,8 +27,8 @@ <h2 class="bd-title">
     <label class="col-sm-2">Methods </label>
 
     <div class="col-sm-10">
-      <button id="checkBtn" class="btn btn-secondary">Check</button>
-      <button id="uncheckBtn" class="btn btn-secondary">Uncheck</button>
+      <button id="checkBtn" type="button" class="btn btn-secondary">Check</button>
+      <button id="uncheckBtn" type="button" class="btn btn-secondary">Uncheck</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/methods/methods07.html b/packages/demo/src/methods/methods07.html
@@ -27,8 +27,8 @@ <h2 class="bd-title">
     <label class="col-sm-2">Methods </label>
 
     <div class="col-sm-10">
-      <button id="checkAllBtn" class="btn btn-secondary">Check All</button>
-      <button id="uncheckAllBtn" class="btn btn-secondary">Uncheck All</button>
+      <button id="checkAllBtn" type="button" class="btn btn-secondary">Check All</button>
+      <button id="uncheckAllBtn" type="button" class="btn btn-secondary">Uncheck All</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/methods/methods08.html b/packages/demo/src/methods/methods08.html
@@ -23,7 +23,7 @@ <h2 class="bd-title">
   <div class="mb-3 row">
     <label class="col-sm-2">Methods </label>
 
-    <div class="col-sm-10"><button id="checkInvert" class="btn btn-secondary">Check Invert</button></div>
+    <div class="col-sm-10"><button id="checkInvert" type="button" class="btn btn-secondary">Check Invert</button></div>
   </div>
 
   <div class="mb-3 row">
diff --git a/packages/demo/src/methods/methods09.html b/packages/demo/src/methods/methods09.html
@@ -26,8 +26,8 @@ <h2 class="bd-title">
     <label class="col-sm-2">Methods </label>
 
     <div class="col-sm-10">
-      <button id="focusBtn" class="btn btn-secondary">Focus</button>
-      <button id="blurBtn" class="btn btn-secondary">Blur</button>
+      <button id="focusBtn" type="button" class="btn btn-secondary">Focus</button>
+      <button id="blurBtn" type="button" class="btn btn-secondary">Blur</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/methods/methods10.html b/packages/demo/src/methods/methods10.html
@@ -44,7 +44,7 @@ <h2 class="bd-title">
 
   <div class="mb-3 row">
     <label class="col-sm-2"></label>
-    <div class="col-sm-10"><button id="refreshAdd" class="btn btn-secondary">Add + Refresh</button></div>
+    <div class="col-sm-10"><button id="refreshAdd" type="button" class="btn btn-secondary">Add + Refresh</button></div>
   </div>
 
   <div class="mb-3 row">
diff --git a/packages/demo/src/methods/methods11.html b/packages/demo/src/methods/methods11.html
@@ -24,8 +24,8 @@ <h2 class="bd-title">
     <label class="col-sm-2">Methods </label>
 
     <div class="col-sm-10">
-      <button id="destroyBtn" class="btn btn-danger">Destroy</button>
-      <button id="buildBtn" class="btn btn-primary">Build</button>
+      <button id="destroyBtn" type="button" class="btn btn-danger">Destroy</button>
+      <button id="buildBtn" type="button" class="btn btn-primary">Build</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/methods/methods12.html b/packages/demo/src/methods/methods12.html
@@ -23,7 +23,7 @@ <h2 class="bd-title">
   <div class="mb-3 row">
     <label class="col-sm-2">Methods</label>
 
-    <div class="col-sm-10"><button id="getData" class="btn btn-secondary">getData</button></div>
+    <div class="col-sm-10"><button id="getData" type="button" class="btn btn-secondary">getData</button></div>
   </div>
 
   <div class="mb-3 row">
diff --git a/packages/demo/src/methods/methods13.html b/packages/demo/src/methods/methods13.html
@@ -23,10 +23,10 @@ <h2 class="bd-title">
   <div class="mb-3 row">
     <label class="col-sm-2">Methods</label>
     <div class="col-sm-10">
-      <button id="setData-basic" class="btn btn-secondary">setData (basic array)</button>
-      <button id="setData-object" class="btn btn-secondary">setData (object)</button>
-      <button id="setData-string" class="btn btn-secondary">setData (string array)</button>
-      <button id="setData-group" class="btn btn-secondary">setData (group array)</button>
+      <button id="setData-basic" type="button" class="btn btn-secondary">setData (basic array)</button>
+      <button id="setData-object" type="button" class="btn btn-secondary">setData (object)</button>
+      <button id="setData-string" type="button" class="btn btn-secondary">setData (string array)</button>
+      <button id="setData-group" type="button" class="btn btn-secondary">setData (group array)</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/options/options27.html b/packages/demo/src/options/options27.html
@@ -26,8 +26,8 @@ <h2 class="bd-title">
     <label class="col-sm-4"> Enable/Disable <code>renderOptionLabelAsHtml</code>option </label>
 
     <div class="col-sm-8">
-      <button id="enableRenderHtml" class="btn btn-primary">Enable renderOptionLabelAsHtml</button>
-      <button id="disableRenderHtml" class="btn btn-secondary">Disable renderOptionLabelAsHtml</button>
+      <button id="enableRenderHtml" type="button" class="btn btn-primary">Enable renderOptionLabelAsHtml</button>
+      <button id="disableRenderHtml" type="button" class="btn btn-secondary">Disable renderOptionLabelAsHtml</button>
     </div>
   </div>
 
diff --git a/packages/demo/src/options/options38.html b/packages/demo/src/options/options38.html
@@ -30,7 +30,7 @@ <h2 class="bd-title">
     <div class="mb-3 row">
       <label class="col-sm-2">Methods </label>
 
-      <div class="col-sm-5"><button id="setDarkMode" class="btn btn-secondary">Toggle Dark Mode</button></div>
+      <div class="col-sm-5"><button id="setDarkMode" type="button" class="btn btn-secondary">Toggle Dark Mode</button></div>
     </div>
 
     <div class="mb-3 row">
diff --git a/packages/demo/src/options/options42.html b/packages/demo/src/options/options42.html
@@ -32,7 +32,7 @@ <h2 class="bd-title">
 
     <div class="col-sm-10 d-flex align-items-center gap-2">
       <input id="serverdelay" type="number" value="1000" step="100" style="height: 34px; width: 100px;">
-      <button id="resetlazy" class="btn btn-outline-secondary btn-sm">Reset Lazy Load</button>
+      <button id="resetlazy" type="button" class="btn btn-outline-secondary btn-sm">Reset Lazy Load</button>
     </div>
   </div>
 
diff --git a/packages/multiple-select-vanilla/package.json b/packages/multiple-select-vanilla/package.json
@@ -66,12 +66,12 @@
     "@types/trusted-types": "^2.0.7"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.24",
+    "autoprefixer": "^10.4.27",
     "cross-env": "catalog:",
     "cssnano": "^7.1.2",
-    "esbuild": "^0.27.2",
+    "esbuild": "^0.27.3",
     "native-copyfiles": "catalog:",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
     "remove-glob": "catalog:",
     "sass": "catalog:",
diff --git a/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts b/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts
@@ -76,7 +76,7 @@ export class MultipleSelectInstance {
   }
 
   constructor(
-    protected elm: HTMLSelectElement,
+    protected elm: HTMLInputElement | HTMLSelectElement | HTMLSpanElement,
     options?: Partial<Omit<MultipleSelectOption, 'onHardDestroy' | 'onAfterHardDestroy'>>,
   ) {
     this.options = Object.assign({}, Constants.DEFAULTS, this.elm.dataset, options) as MultipleSelectOption;
@@ -185,7 +185,7 @@ export class MultipleSelectInstance {
 
     // single or multiple
     if (this.options.single === undefined) {
-      this.options.single = !this.elm.multiple;
+      this.options.single = !(this.elm as HTMLSelectElement).multiple;
     }
 
     // restore class and title from select element
@@ -262,7 +262,7 @@ export class MultipleSelectInstance {
 
     insertAfter(this.elm, this.parentElm);
 
-    if (this.elm.disabled) {
+    if ((this.elm as HTMLSelectElement).disabled) {
       this.choiceElm.classList.add('disabled');
       this.choiceElm.disabled = true;
     }
@@ -1572,14 +1572,16 @@ export class MultipleSelectInstance {
     }
 
     // set selects to select
-    const selectedValues = this.getSelects();
-    if (this.options.single) {
-      this.elm.value = selectedValues.length ? (selectedValues[0] as string) : '';
-    } else {
-      // when multiple values could be set, we need to loop through each
-      Array.from(this.elm.options).forEach(option => {
-        option.selected = selectedValues.some(val => val === option.value);
-      });
+    if (this.elm instanceof HTMLSelectElement) {
+      const selectedValues = this.getSelects();
+      if (this.options.single) {
+        this.elm.value = selectedValues.length ? (selectedValues[0] as string) : '';
+      } else {
+        // when multiple values could be set, we need to loop through each
+        Array.from(this.elm.options).forEach(option => {
+          option.selected = selectedValues.some(val => val === option.value);
+        });
+      }
     }
 
     // trigger <select> change event
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -92,6 +92,7 @@ export default class Example {`
`92`	`92`
`93`	`93`	`this.ms5 = multipleSelect('#group', {`
`94`	`94`	`dataTest: 'select5',`
	`95`	`+ single: false,`
`95`	`96`	`data: [`
`96`	`97`	`{`
`97`	`98`	`type: 'optgroup',`