remove logs and style buttons interactivity

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

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/components/MethodSelector/MethodSelector.js b/src/components/MethodSelector/MethodSelector.js
@@ -52,8 +52,22 @@ const radioBoxStyle = css`
     padding: 14px 12px;
     background-color: inherit;
     color: inherit;
+
+    ${isOfflineDocsBuild &&
+    `
+      border-color: ${palette.gray.base};
+      box-shadow: none;
+    `}
   }
 
+  ${isOfflineDocsBuild &&
+  `
+    &[aria-selected=true] div {
+      border-color: transparent;
+      box-shadow: 0 0 0 3px ${palette.green.dark1};
+    }
+  `}
+
   :not(:last-of-type) {
     margin: 0;
   }
@@ -154,6 +168,7 @@ const MethodSelector = ({ nodeData: { children } }) => {
                 className={cx(radioBoxStyle)}
                 value={`${id}-${index}`}
                 checked={selectedMethod === id}
+                aria-selected={isOfflineDocsBuild ? index === 0 : 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
@@ -9,25 +9,28 @@ function bindMethodSelectorUI() {
 
         // find the radio box inputs within button group and bind action
         const buttons = buttonGroup?.querySelectorAll('input') ?? [];
-        console.log('buttons');
-        console.log(buttons);
 
         // find all the content within method selectors
         const contentDivs =
           methodSelectorComponent.parentElement?.querySelectorAll('.offline-method-selector-content') ?? [];
 
+        // find all the labels to style for selected
+        const labels = methodSelectorComponent.querySelectorAll('label');
+
         // for each input, find value `{name}-{index}` ie.  `driver-0`
         // find data-testid=[method-option-content-{name}] and show
         for (let idx = 0; idx < buttons.length; idx++) {
           const button = buttons[idx];
           button.addEventListener('click', (e) => {
-            console.log('click');
-            const id = (button.getAttribute('value') || '').split('-')[0];
-            console.log('id ', id);
+            const id = (e.currentTarget.getAttribute('value') || '').split('-')[0];
             const targetTestId = 'method-option-content-' + id;
+            const parentLabel = button.parentElement;
             for (const contentDiv of contentDivs) {
               contentDiv.setAttribute('aria-expanded', targetTestId === contentDiv.getAttribute('data-testid'));
             }
+            for (const label of labels) {
+              label.setAttribute('aria-selected', label.isSameNode(parentLabel));
+            }
           });
         }
       }