diff --git a/src/components/MethodSelector/MethodSelector.js b/src/components/MethodSelector/MethodSelector.js index 994e173f6..6cd0c9e56 100644 --- 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} diff --git a/src/utils/head-scripts/offline-ui/method-selector.js b/src/utils/head-scripts/offline-ui/method-selector.js index 93cfb6fe3..8d7e41271 100644 --- 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);