Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

[Tabs][a11y]: Fix a11y keyboard interaction (when focus overrides selected state) #3669

Merged
merged 8 commits into from
Dec 1, 2020
Merged

[Tabs][a11y]: Fix a11y keyboard interaction (when focus overrides selected state) #3669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6921e29
Experiment Tabs.scss
ginabak Nov 30, 2020
2c74506
Fix issue when hover overwrites selected state - on keyboard and mous…
ginabak Nov 30, 2020
61f406a
Add unreleased.md
ginabak Dec 1, 2020
04fe3e7
Add transparent border for Windows High Contrast Mode
ginabak Dec 1, 2020
39f4ccb
Change focus to grey
ginabak Dec 1, 2020
b8c1a8c
Change transparent border to wrap in media query
ginabak Dec 1, 2020
a490fdb
Merge branch 'master' into gbak-tabs
ginabak Dec 1, 2020
ff98d62
Address Curtis comments -space and rem
ginabak Dec 1, 2020
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
12 changes: 6 additions & 6 deletions UNRELEASED.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,24 @@

Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to format new entries. 💜

- Fixes keyboard interactions for the `Tab` component ([#3650](https://github.com/Shopify/polaris-react/pull/3650))
- Adds `role="presentational"` to list items for `Tabs` ([#3647](https://github.com/Shopify/polaris-react/pull/3647))

### Breaking changes

### Enhancements

- Allow `Thumbnail` `source` property to support `icons` ([#3328](https://github.com/Shopify/polaris-react/pull/3328))
- Allowed `Thumbnail` `source` property to support `icons` ([#3328](https://github.com/Shopify/polaris-react/pull/3328))
- **`Button`:** New `role` prop for `<button />` ([#3590](https://github.com/Shopify/polaris-react/pull/3590))
- Added `preventFocusOnClose` to `Popover` ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
- Added color fallback values to `focus-ring` mixin ([#3626](https://github.com/Shopify/polaris-react/pull/3626))
- Allow consumers to set custom container element on `PortalsManager` ([#3644](https://github.com/Shopify/polaris-react/pull/3644)
- Added `role="presentational"` to list items for `Tabs` ([#3647](https://github.com/Shopify/polaris-react/pull/3647))
- Allowed consumers to set custom container element on `PortalsManager` ([#3644](https://github.com/Shopify/polaris-react/pull/3644))

### Bug fixes

- Fixed `FocusManager` from tracking inactive items that prevented trap focusing([#3630](https://github.com/Shopify/polaris-react/pull/3630))
- Added escape keybind to `Tooltip` ([#3627](https://github.com/Shopify/polaris-react/pull/3627))
- Removed extra bottom border on the `DataTable` and added curved edges to footers ([#3571](https://github.com/Shopify/polaris-react/pull/3571))
- **`Button`:** `loading` no longer sets the invalid `role="alert"` ([#3590](https://github.com/Shopify/polaris-react/pull/3590))
- Add semantic headers to `Filters` ([#3629](https://github.com/Shopify/polaris-react/pull/3629))
- Added semantic headers to `Filters` ([#3629](https://github.com/Shopify/polaris-react/pull/3629))
- Fixed `Filters` not announcing applied filters ([#3632](https://github.com/Shopify/polaris-react/pull/3632))
- Removed `tabIndex=-1` from `Popover` when `preventAutoFocus` is true ([#3595](https://github.com/Shopify/polaris-react/pull/3595))
- Fixed `Modal` header border color ([#3616](https://github.com/Shopify/polaris-react/pull/3616))
Expand All @@ -30,6 +28,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
- Fixed `Banner` `secondaryAction` only rendering if `action` is set ([#2949](https://github.com/Shopify/polaris-react/pull/2949))
- Added a `alwaysRenderCustomProperties` to `ThemeProvider` for elements that render outside of the DOM tree to their parent context ([#3652](https://github.com/Shopify/polaris-react/pull/3652))
- Increased precision of hue, saturation, lightness, and alpha in HSBLA `color-transformers` (https://github.com/Shopify/polaris-react/pull/3640)
- Fixed keyboard interactions for the `Tab` component ([#3650](https://github.com/Shopify/polaris-react/pull/3650))
- Fixed keyboard interaction when selected Tab was focused and rendering the wrong `::before` colour ([#3669](https://github.com/Shopify/polaris-react/pull/3669))
Copy link
Contributor Author

@ginabak ginabak Dec 1, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Line 31 was my unreleased portion. I just moved the other ones in what I thought was the appropriate "sub heading" and changed the verb tenses to be past tense as per the Polaris Documentation Guideline


### Documentation

Expand Down
13 changes: 9 additions & 4 deletions src/components/Tabs/Tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,12 +328,12 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
.Tab {
padding: spacing(tight) spacing(extra-tight);

&:focus .Title::before {
background: var(--p-border-hovered);
&:active .Title::before {
background: var(--p-action-primary-pressed);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Space between blocks


&:active .Title::before {
background: var(--p-surface-primary-selected-pressed);
&:focus .Title::before {
background: var(--p-border-hovered);
}
}

Expand All @@ -343,6 +343,10 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
}

.Tab-selected {
&:focus .Title::before {
background: var(--p-action-primary);
}

.Title {
color: var(--p-text);

Expand All @@ -351,6 +355,7 @@ $focus-state-box-shadow-color: rgba(0, 0, 0, 0.8);
}

@media (-ms-high-contrast: active) {
outline: rem(3px) solid ms-high-contrast-color('text');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@beefchimi 👀 how's this?

// stylelint-disable-next-line max-nesting-depth
&::before {
display: none;
Expand Down