Merge pull request #2576 from bigcommerce/SD-11413

fix(storefront): Fix the keyboard navigation on the swatch options

Author: jkanive

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Draft
 
 - Update Cornerstone documentation url [#2575](https://github.com/bigcommerce/cornerstone/pull/2575)
+- Fix keyboard navigation on the swatch options [#2576](https://github.com/bigcommerce/cornerstone/pull/2576)
 
 ## 6.17.0 (10-01-2025)
 - Add net-new "order.pickup_addresses" to unify objects used on Order Details and Order Invoice pages [#2557](https://github.com/bigcommerce/cornerstone/pull/2557)

assets/js/theme/common/aria/radioOptions.js

@@ -35,15 +35,15 @@ const handleItemKeyDown = itemCollection => e => {
     case ariaKeyCodes.LEFT:
     case ariaKeyCodes.UP: {
         const prevItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx - 1);
-        itemCollection.get(prevItemIdx).trigger('focus');
-        setCheckedRadioItem(itemCollection, itemIdx - 1);
+        itemCollection.eq(prevItemIdx).trigger('focus');
+        setCheckedRadioItem(itemCollection, prevItemIdx);
         break;
     }
     case ariaKeyCodes.RIGHT:
     case ariaKeyCodes.DOWN: {
         const nextItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx + 1);
-        itemCollection.get(nextItemIdx).trigger('focus');
-        setCheckedRadioItem(itemCollection, itemIdx + 1);
+        itemCollection.eq(nextItemIdx).trigger('focus');
+        setCheckedRadioItem(itemCollection, nextItemIdx);
         break;
     }