fix(components): stop bubbling for processed a11y arrow key events

webex · Mar 22, 2022 · 85c5738 · 85c5738
1 parent 615fdff
commit 85c5738
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 0 deletions.
diff --git a/src/components/WebexSettings/Tabs.jsx b/src/components/WebexSettings/Tabs.jsx
@@ -42,11 +42,13 @@ export default function Tabs({
 
   const handleKeyUp = (event) => {
     if (event.key === 'ArrowLeft') {
+      event.stopPropagation(); // prevent other navigation
       const prevTabIndex = (selectedTabIndex + tabs.length - 1) % tabs.length;
 
       setTabChangedWithKey(true);
       onSelect(tabs[prevTabIndex].key);
     } else if (event.key === 'ArrowRight') {
+      event.stopPropagation(); // prevent other navigation
       const nextTabIndex = (selectedTabIndex + 1) % tabs.length;
 
       setTabChangedWithKey(true);

diff --git a/src/components/generic/OptionsList/Option.jsx b/src/components/generic/OptionsList/Option.jsx
@@ -37,9 +37,11 @@ export default function Option({
 
     if (event.key === 'ArrowUp') {
       event.preventDefault(); // prevent page scrolling
+      event.stopPropagation(); // prevent other navigation
       toFocus = ref.current.previousElementSibling;
     } else if (event.key === 'ArrowDown') {
       event.preventDefault(); // prevent page scrolling
+      event.stopPropagation(); // prevent other navigation
       toFocus = ref.current.nextElementSibling;
     } else if (event.key === 'Enter') {
       onSelect(option, true);

diff --git a/src/components/inputs/Checkbox/Checkbox.jsx b/src/components/inputs/Checkbox/Checkbox.jsx
@@ -48,9 +48,11 @@ export default function Checkbox({
       onChange(!selected);
     } else if (event.key === 'ArrowUp') {
       event.preventDefault(); // prevent page scrolling
+      event.stopPropagation(); // prevent other navigation
       toFocus = ref.current.previousElementSibling;
     } else if (event.key === 'ArrowDown') {
       event.preventDefault(); // prevent page scrolling
+      event.stopPropagation(); // prevent other navigation
       toFocus = ref.current.nextElementSibling;
     }
 

diff --git a/src/components/inputs/Dropdown/Dropdown.jsx b/src/components/inputs/Dropdown/Dropdown.jsx
@@ -81,6 +81,7 @@ export default function Dropdown({
       collapse();
     } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault(); // prevent page scrolling
+      event.stopPropagation(); // prevent other navigation
       expand(true);
     }
   };

diff --git a/src/components/inputs/RadioButton/RadioButton.jsx b/src/components/inputs/RadioButton/RadioButton.jsx
@@ -47,9 +47,11 @@ export default function RadioButton({
       onChange(!selected);
     } else if (event.key === 'ArrowUp') {
       event.preventDefault(); // prevent page scrolling
+      event.stopPropagation(); // prevent other navigation
       toFocus = ref.current.previousElementSibling;
     } else if (event.key === 'ArrowDown') {
       event.preventDefault(); // prevent page scrolling
+      event.stopPropagation(); // prevent other navigation
       toFocus = ref.current.nextElementSibling;
     }