Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(storefront): BCTHEME-447 extends keyboard support for radio buttons #2028

Merged
merged 2 commits into from
Apr 12, 2021
Merged

fix(storefront): BCTHEME-447 extends keyboard support for radio buttons #2028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f8957c
fix(storefront): BCTHEME-447 extend keyboard support for radio buttons
bc-alexsaiannyi Apr 2, 2021
017d20e
Merge branch 'master' into bctheme-447
bc-alexsaiannyi Apr 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Changelog

## Draft
- Added keyboard support on radio buttons. [#2028](https://github.com/bigcommerce/cornerstone/pull/2028)
- Replace SSL settings in Page builder with global region for SSL certificate. [#2026](https://github.com/bigcommerce/cornerstone/pull/2026)
- fixed email address validation in forms. [#2029](https://github.com/bigcommerce/cornerstone/pull/2029)
- Fixed unnecessary horizontal scroll on swatch options on PDP. [#2023](https://github.com/bigcommerce/cornerstone/pull/2023)
Expand Down
8 changes: 3 additions & 5 deletions assets/js/theme/common/aria/radioOptions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const setCheckedRadioItem = (itemCollection, itemIdx) => {
}

$item.attr('aria-checked', true).prop('checked', true).focus();
$item.trigger('change');
});
};

Expand All @@ -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);
bc-alexsaiannyi marked this conversation as resolved.
Show resolved Hide resolved
break;
}
case ariaKeyCodes.RIGHT:
case ariaKeyCodes.DOWN: {
const nextItemIdx = calculateTargetItemPosition(lastCollectionItemIdx, itemIdx + 1);
itemCollection.get(nextItemIdx).focus();
setCheckedRadioItem(itemCollection, itemIdx + 1);
break;
}

Expand Down