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

Jump to bottom

[a11y] Accessibility Enhancements - Group 1 #3857

Merged
merged 9 commits into from May 16, 2022
Merged

[a11y] Accessibility Enhancements - Group 1 #3857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e13d7fe
AC-2496::Contrast insufficient - light grey text (Checkout - Payment)
glo71317 Apr 26, 2022
0f5ca0c
AC-2490::Contrast insufficient - product image selected state indicat…
glo71317 Apr 26, 2022
59807b1
AC-2496:index.module.css were not formatted
glo71317 May 2, 2022
43b9c02
AC-2785::Custom dropdown controls lack appropriate name and state inf…
glo82145 May 4, 2022
1d458b2
AC-2785::modification in storeSwitcher.js and currencySwitcher.js as …
glo82145 May 4, 2022
b1b01e3
AC-2785::added yarn prettier to the file Header/currencySwitcher.js
glo82145 May 4, 2022
d3efb3e
Merge remote-tracking branch 'glo71317/AC-2785-v1' into tommy/a11y-gr…
tjwiebell May 13, 2022
d7a9f74
Merge remote-tracking branch 'glo71317/AC-2490_v1' into tommy/a11y-gr…
tjwiebell May 13, 2022
7ea2aab
Merge remote-tracking branch 'glo71317/AC-2496_v1' into tommy/a11y-gr…
tjwiebell May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 16 additions & 2 deletions ...ages/venia-ui/lib/components/Header/__tests__/__snapshots__/currencySwitcher.spec.js.snap
View file
Open in desktop
Expand Up @@ -5,6 +5,7 @@ exports[`does not render CurrencySwitcher when there is only one available store
className="root"
>
<button
aria-expanded={false}
aria-label="EUR"
className="trigger"
onClick={[MockFunction]}
Expand All @@ -27,9 +28,13 @@ exports[`does not render CurrencySwitcher when there is only one available store
<div
className="menu"
>
<ul>
<ul
role="listbox"
>
<li
aria-selected="EUR"
className="menuItem"
role="option"
>
<button
className="root"
Expand Down Expand Up @@ -57,7 +62,9 @@ exports[`does not render CurrencySwitcher when there is only one available store
</button>
</li>
<li
aria-selected="EUR"
className="menuItem"
role="option"
>
<button
className="root"
Expand Down Expand Up @@ -114,6 +121,7 @@ exports[`renders the correct tree 1`] = `
className="root"
>
<button
aria-expanded={false}
aria-label="EUR"
className="trigger"
onClick={[MockFunction]}
Expand All @@ -136,9 +144,13 @@ exports[`renders the correct tree 1`] = `
<div
className="menu"
>
<ul>
<ul
role="listbox"
>
<li
aria-selected="EUR"
className="menuItem"
role="option"
>
<button
className="root"
Expand Down Expand Up @@ -166,7 +178,9 @@ exports[`renders the correct tree 1`] = `
</button>
</li>
<li
aria-selected="EUR"
className="menuItem"
role="option"
>
<button
className="root"
Expand Down
17 changes: 17 additions & 0 deletions packages/venia-ui/lib/components/Header/__tests__/__snapshots__/storeSwitcher.spec.js.snap
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ exports[`does not render group name when there is only one group 1`] = `
className="root"
>
<button
aria-expanded={false}
aria-label="Store 2"
className="trigger"
onClick={[MockFunction]}
Expand All @@ -21,9 +22,12 @@ exports[`does not render group name when there is only one group 1`] = `
>
<ul
className="groupList"
role="listbox"
>
<li
aria-selected="Store 2"
className="menuItem"
role="option"
>
<button
className="root"
Expand All @@ -42,7 +46,9 @@ exports[`does not render group name when there is only one group 1`] = `
</button>
</li>
<li
aria-selected="Store 2"
className="menuItem"
role="option"
>
<button
className="root"
Expand Down Expand Up @@ -91,6 +97,7 @@ exports[`renders the correct tree 1`] = `
className="root"
>
<button
aria-expanded={false}
aria-label="Store 2"
className="trigger"
onClick={[MockFunction]}
Expand All @@ -105,9 +112,12 @@ exports[`renders the correct tree 1`] = `
>
<ul
className="groupList"
role="listbox"
>
<li
aria-selected="Store 2"
className="menuItem"
role="option"
>
<button
className="root"
Expand All @@ -126,7 +136,9 @@ exports[`renders the correct tree 1`] = `
</button>
</li>
<li
aria-selected="Store 2"
className="menuItem"
role="option"
>
<button
className="root"
Expand Down Expand Up @@ -167,9 +179,12 @@ exports[`renders the correct tree 1`] = `
</ul>
<ul
className="groupList"
role="listbox"
>
<li
aria-selected="Store 2"
className="menuItem"
role="option"
>
<button
className="root"
Expand All @@ -188,7 +203,9 @@ exports[`renders the correct tree 1`] = `
</button>
</li>
<li
aria-selected="Store 2"
className="menuItem"
role="option"
>
<button
className="root"
Expand Down
10 changes: 8 additions & 2 deletions packages/venia-ui/lib/components/Header/currencySwitcher.js
View file
Open in desktop
Expand Up @@ -33,7 +33,12 @@ const CurrencySwitcher = props => {

const currencies = availableCurrencies.map(code => {
return (
<li key={code} className={classes.menuItem}>
<li
role="option"
aria-selected={currentCurrencyCode}
key={code}
className={classes.menuItem}
>
<SwitcherItem
active={code === currentCurrencyCode}
onClick={handleSwitchCurrency}
Expand All @@ -58,6 +63,7 @@ const CurrencySwitcher = props => {
aria-label={currentCurrencyCode}
onClick={handleTriggerClick}
ref={currencyMenuTriggerRef}
aria-expanded={currencyMenuIsOpen}
>
<span className={classes.label}>
<CurrencySymbol
Expand All @@ -69,7 +75,7 @@ const CurrencySwitcher = props => {
</span>
</button>
<div ref={currencyMenuRef} className={menuClassName}>
<ul>{currencies}</ul>
<ul role="listbox">{currencies}</ul>
</div>
</div>
);
Expand Down
4 changes: 4 additions & 0 deletions packages/venia-ui/lib/components/Header/storeSwitcher.js
View file
Open in desktop
Expand Up @@ -42,6 +42,8 @@ const StoreSwitcher = props => {
}
stores.push(
<li
aria-selected={currentStoreName}
role="option"
key={code}
className={classes.menuItem}
data-cy="StoreSwitcher-view"
Expand All @@ -59,6 +61,7 @@ const StoreSwitcher = props => {

groups.push(
<ul
role="listbox"
className={classes.groupList}
key={key}
data-cy="StoreSwitcher-group"
Expand All @@ -84,6 +87,7 @@ const StoreSwitcher = props => {
onClick={handleTriggerClick}
ref={storeMenuTriggerRef}
data-cy="StoreSwitcher-trigger"
aria-expanded={storeMenuIsOpen}
>
{triggerLabel}
</button>
Expand Down
14 changes: 14 additions & 0 deletions packages/venia-ui/lib/index.module.css
View file
Open in desktop
Expand Up @@ -123,3 +123,17 @@
cursor: default;
touch-action: none;
}

:global(.braintree-sheet__content--form
.braintree-form__field-group
.braintree-form__field
.braintree-form__hosted-field
input.braintree-form__raw-input) {
color: #8f8f8f !important;
}

:global(.braintree-sheet__content--form
.braintree-form__field-group
.braintree-form__descriptor) {
color: #757575 !important;
}
2 changes: 1 addition & 1 deletion packages/venia-ui/lib/tokens.module.css
View file
Open in desktop
Expand Up @@ -8,7 +8,7 @@

/* color */
--venia-global-color-blue-100: 194 200 255;
--venia-global-color-blue-400: 61 132 255;
--venia-global-color-blue-400: 71 139 255;
/* --venia-global-color-blue-500: 51 109 255; */
/* --venia-global-color-blue-600: 41 84 255; */
--venia-global-color-blue-700: 31 57 255;
Expand Down