aria selected should work on load

mongodb · Dec 26, 2024 · f0c5498 · f0c5498
1 parent 03971bb
commit f0c5498
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/MethodSelector/MethodSelector.js b/src/components/MethodSelector/MethodSelector.js
@@ -168,7 +168,7 @@ const MethodSelector = ({ nodeData: { children } }) => {
                 className={cx(radioBoxStyle)}
                 value={`${id}-${index}`}
                 checked={selectedMethod === id}
-                aria-selected={isOfflineDocsBuild ? index === 0 : null}
+                aria-selected={isOfflineDocsBuild ? selectedMethod === id : null}
               >
                 {title}
               </RadioBox>

diff --git a/src/utils/head-scripts/offline-ui/method-selector.js b/src/utils/head-scripts/offline-ui/method-selector.js
@@ -18,7 +18,7 @@ function bindMethodSelectorUI() {
         const labels = methodSelectorComponent.querySelectorAll('label');
 
         // for each input, find value `{name}-{index}` ie.  `driver-0`
-        // find data-testid=[method-option-content-{name}] and show
+        // find content div with data-testid=[method-option-content-{name}] and show that content div
         for (let idx = 0; idx < buttons.length; idx++) {
           const button = buttons[idx];
           button.addEventListener('click', (e) => {
@@ -33,6 +33,9 @@ function bindMethodSelectorUI() {
             }
           });
         }
+
+        // on load, set first label as active
+        labels[0]?.setAttribute('aria-selected', true);
       }
     } catch (e) {
       console.error(e);