svelte-typeahead 4.4.0 → 4.4.1

package/CHANGELOG.md

@@ -5,6 +5,10 @@ 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).
 
+## [4.4.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.4.1) - 2022-11-12
+
+- replace `aria-owns` with `aria-controls` to resolve `a11y-role-has-required-aria-props` warning
+
 ## [4.4.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.4.0) - 2022-11-08
 
 **Features**

package/lib/index.js

@@ -1139,7 +1139,7 @@
     	value: /*value*/ ctx[0]
     });
 
-    // (248:4) {#if showResults}
+    // (247:4) {#if showResults}
     function create_if_block_1(ctx) {
     	let each_1_anchor;
     	let current;
@@ -1223,7 +1223,7 @@
     	};
     }
 
-    // (267:41)              
+    // (266:41)              
     function fallback_block(ctx) {
     	let html_tag;
     	let raw_value = /*result*/ ctx[47].string + "";
@@ -1249,7 +1249,7 @@
     	};
     }
 
-    // (249:6) {#each results as result, index}
+    // (248:6) {#each results as result, index}
     function create_each_block(ctx) {
     	let li;
     	let t;
@@ -1357,7 +1357,7 @@
     	};
     }
 
-    // (273:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+    // (272:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
     function create_if_block(ctx) {
     	let div;
     	let current;
@@ -1422,7 +1422,7 @@
     	let t1;
     	let ul_aria_labelledby_value;
     	let ul_id_value;
-    	let div_aria_owns_value;
+    	let div_aria_controls_value;
     	let div_id_value;
     	let current;
     	let mounted;
@@ -1501,7 +1501,7 @@
     			attr(div, "data-svelte-typeahead", "");
     			attr(div, "role", "combobox");
     			attr(div, "aria-haspopup", "listbox");
-    			attr(div, "aria-owns", div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"));
+    			attr(div, "aria-controls", div_aria_controls_value = "" + (/*id*/ ctx[2] + "-listbox"));
     			attr(div, "aria-expanded", /*showResults*/ ctx[7]);
     			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
     			attr(div, "class", "svelte-1t4elht");
@@ -1612,8 +1612,8 @@
     				attr(ul, "id", ul_id_value);
     			}
 
-    			if (!current || dirty[0] & /*id*/ 4 && div_aria_owns_value !== (div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"))) {
-    				attr(div, "aria-owns", div_aria_owns_value);
+    			if (!current || dirty[0] & /*id*/ 4 && div_aria_controls_value !== (div_aria_controls_value = "" + (/*id*/ ctx[2] + "-listbox"))) {
+    				attr(div, "aria-controls", div_aria_controls_value);
     			}
 
     			if (!current || dirty[0] & /*showResults*/ 128) {

package/lib/index.mjs

@@ -1133,7 +1133,7 @@ const get_default_slot_context = ctx => ({
 	value: /*value*/ ctx[0]
 });
 
-// (248:4) {#if showResults}
+// (247:4) {#if showResults}
 function create_if_block_1(ctx) {
 	let each_1_anchor;
 	let current;
@@ -1217,7 +1217,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (267:41)              
+// (266:41)              
 function fallback_block(ctx) {
 	let html_tag;
 	let raw_value = /*result*/ ctx[47].string + "";
@@ -1243,7 +1243,7 @@ function fallback_block(ctx) {
 	};
 }
 
-// (249:6) {#each results as result, index}
+// (248:6) {#each results as result, index}
 function create_each_block(ctx) {
 	let li;
 	let t;
@@ -1351,7 +1351,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (273:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+// (272:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
 function create_if_block(ctx) {
 	let div;
 	let current;
@@ -1416,7 +1416,7 @@ function create_fragment(ctx) {
 	let t1;
 	let ul_aria_labelledby_value;
 	let ul_id_value;
-	let div_aria_owns_value;
+	let div_aria_controls_value;
 	let div_id_value;
 	let current;
 	let mounted;
@@ -1495,7 +1495,7 @@ function create_fragment(ctx) {
 			attr(div, "data-svelte-typeahead", "");
 			attr(div, "role", "combobox");
 			attr(div, "aria-haspopup", "listbox");
-			attr(div, "aria-owns", div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"));
+			attr(div, "aria-controls", div_aria_controls_value = "" + (/*id*/ ctx[2] + "-listbox"));
 			attr(div, "aria-expanded", /*showResults*/ ctx[7]);
 			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
 			attr(div, "class", "svelte-1t4elht");
@@ -1606,8 +1606,8 @@ function create_fragment(ctx) {
 				attr(ul, "id", ul_id_value);
 			}
 
-			if (!current || dirty[0] & /*id*/ 4 && div_aria_owns_value !== (div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"))) {
-				attr(div, "aria-owns", div_aria_owns_value);
+			if (!current || dirty[0] & /*id*/ 4 && div_aria_controls_value !== (div_aria_controls_value = "" + (/*id*/ ctx[2] + "-listbox"))) {
+				attr(div, "aria-controls", div_aria_controls_value);
 			}
 
 			if (!current || dirty[0] & /*showResults*/ 128) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.4.0",
+  "version": "4.4.1",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",

package/src/Typeahead.svelte

@@ -175,13 +175,12 @@
   }}
 />
 
-<!-- svelte-ignore a11y-role-has-required-aria-props -->
 <div
   data-svelte-typeahead
   bind:this={comboboxRef}
   role="combobox"
   aria-haspopup="listbox"
-  aria-owns="{id}-listbox"
+  aria-controls="{id}-listbox"
   class:dropdown={results.length > 0}
   aria-expanded={showResults}
   id="{id}-typeahead"