fix(storefront): BCTHEME-447 extend keyboard support for radio buttons

bigcommerce · Apr 7, 2021 · 6f8957c · 6f8957c
1 parent dc9d19e
commit 6f8957c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # Changelog
 
 ## Draft
-
+- Added keyboard support on radio buttons. [#2028](https://github.com/bigcommerce/cornerstone/pull/2028)
 ## 5.3.0 (03-25-2021)
 - Remove AddThis for social sharing, replace with provider sharing links. [#1997](https://github.com/bigcommerce/cornerstone/pull/1997)
 - IE11 - Clicking on Search Does Not Display Search Bar. [#2017](https://github.com/bigcommerce/cornerstone/pull/2017)

diff --git a/assets/js/theme/common/aria/radioOptions.js b/assets/js/theme/common/aria/radioOptions.js
@@ -9,6 +9,7 @@ const setCheckedRadioItem = (itemCollection, itemIdx) => {
         }
 
         $item.attr('aria-checked', true).prop('checked', true).focus();
+        $item.trigger('change');
     });
 };
 
@@ -31,21 +32,18 @@ const handleItemKeyDown = itemCollection => e => {
     }
 
     switch (keyCode) {
-    case ariaKeyCodes.RETURN:
-    case ariaKeyCodes.SPACE: {
-        setCheckedRadioItem(itemCollection, itemIdx);
-        break;
-    }
     case ariaKeyCodes.LEFT:
     case ariaKeyCodes.UP: {
         const prevItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx - 1);
         itemCollection.get(prevItemIdx).focus();
+        setCheckedRadioItem(itemCollection, itemIdx - 1);
         break;
     }
     case ariaKeyCodes.RIGHT:
     case ariaKeyCodes.DOWN: {
         const nextItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx + 1);
         itemCollection.get(nextItemIdx).focus();
+        setCheckedRadioItem(itemCollection, itemIdx + 1);
         break;
     }