Skip to content

fix(tab-title): add full focus outline to closable tab button in high contrast mode #7272

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

Merged
mpriour merged 5 commits into from
Jul 3, 2023
Merged

fix(tab-title): add full focus outline to closable tab button in high contrast mode #7272

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f4d0cee
fix(tab-title): add full focus outline to closable tab button
mpriour Jul 3, 2023
4b7482e
Merge branch 'main' into mpriour/6994-hc-closable-tab
mpriour Jul 3, 2023
eb2c7a0
Merge branch 'main' into mpriour/6994-hc-closable-tab
mpriour Jul 3, 2023
cf24160
fix(tab-title): add comment re why zindex is required in high contras…
mpriour Jul 3, 2023
74d7468
Merge branch 'main' into mpriour/6994-hc-closable-tab
mpriour Jul 3, 2023
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
5 changes: 5 additions & 0 deletions packages/calcite-components/src/components/tab-title/tab-title.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,4 +292,9 @@
:host([bordered][position="bottom"][selected]) .container {
border-block-start-style: none;
}

.close-button {
/* in high contrast the tab title outline covers the close button outline without a z-index */
@apply z-default;
Copy link
Copy Markdown
Member

@jcfranco jcfranco Jul 3, 2023

Choose a reason for hiding this comment

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

Could you add a comment explaining why the z-index is necessary in high contrast mode?

@SkyeSeitz @ashetland Would tab-title's close button end up at some point being circular (similar to chip)? Currently, the focus outlines from the title's container and close button mostly overlap and ended up causing some trouble in high contrast mode.

Copy link
Copy Markdown
Contributor

@ashetland ashetland Jul 3, 2023

Choose a reason for hiding this comment

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

Yep, I think tab-title is a good candidate for the round button. We spec'd it out like the current design to match behaviors elsewhere until we could look at all these more holistically. #6640

Copy link
Copy Markdown
Contributor

@ashetland ashetland Jul 3, 2023

Choose a reason for hiding this comment

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

There might be padding tweaks needed to accommodate a round button.

Copy link
Copy Markdown
Member Author

@mpriour mpriour Jul 3, 2023

Choose a reason for hiding this comment

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

I've added the comment @jcfranco

}
}