fix aria labels

radarlabs · Jun 13, 2024 · 829d82b · 829d82b
1 parent 648f22a
commit 829d82b
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ Radar.initialize('prj_test_pk_...', { /* options */ });
 
 Add the following script in your `html` file
 ```html
-<script src="https://js.radar.com/v4.3.1-beta.1/radar.min.js"></script>
+<script src="https://js.radar.com/v4.3.1-beta.2/radar.min.js"></script>
 ```
 
 Then initialize the Radar SDK
@@ -73,8 +73,8 @@ To create a map, first initialize the Radar SDK with your publishable key. Then
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.3.1-beta.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.3.1-beta.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.3.1-beta.2/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.3.1-beta.2/radar.min.js"></script>
   </head>
 
   <body>
@@ -98,8 +98,8 @@ To create an autocomplete input, first initialize the Radar SDK with your publis
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.3.1-beta.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.3.1-beta.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.3.1-beta.2/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.3.1-beta.2/radar.min.js"></script>
   </head>
 
   <body>
@@ -130,8 +130,8 @@ To power [geofencing](https://radar.com/documentation/geofencing/overview) exper
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.3.1-beta.1/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.3.1-beta.1/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.3.1-beta.2/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.3.1-beta.2/radar.min.js"></script>
   </head>
 
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "radar-sdk-js",
-  "version": "4.3.1-beta.1",
+  "version": "4.3.1-beta.2",
   "description": "Web Javascript SDK for Radar, location infrastructure for mobile and web apps.",
   "homepage": "https://radar.com",
   "type": "module",

diff --git a/src/ui/autocomplete.ts b/src/ui/autocomplete.ts
@@ -132,8 +132,10 @@ class AutocompleteUI {
     // result list element
     this.resultsList = document.createElement('ul');
     this.resultsList.classList.add(CLASSNAMES.RESULTS_LIST);
+    this.resultsList.classList.add('id', CLASSNAMES.RESULTS_LIST);
     this.resultsList.setAttribute('role', 'listbox');
     this.resultsList.setAttribute('aria-live', 'polite');
+    this.resultsList.setAttribute('aria-label', 'Search results');
     setHeight(this.resultsList, this.config);
 
     if (containerEL.nodeName === 'INPUT') {
@@ -167,8 +169,9 @@ class AutocompleteUI {
     }
 
     // set aria roles
+    this.inputField.setAttribute('role', 'combobox');
+    this.inputField.setAttribute('aria-controls', CLASSNAMES.RESULTS_LIST);
     this.inputField.setAttribute('aria-expanded', 'false');
-    this.inputField.setAttribute('aria-control', 'autocomplete-list');
     this.inputField.setAttribute('aria-haspopup', 'listbox');
     this.inputField.setAttribute('aria-autocomplete', 'list');
     this.inputField.setAttribute('aria-activedescendant', '');

diff --git a/src/version.ts b/src/version.ts
@@ -1 +1 @@
-export default '4.3.1-beta.1';
+export default '4.3.1-beta.2';