Focus: Remove default z-index
#2501
Conversation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
# Conflicts: # site/content/docs/5.3/migration.md
There was a problem hiding this comment.
I think I understand what you did, that is removing the default z-index: 5 everywhere added via the mixin focus-visible (with default value of $focus-visible-zindex as first parameter), and then add it again only inside our components that need it: accordion, buttons, navs, pagination, form-check.
I couldn't test it locally, and so I couldn't go really deeply inside your changes, and I have some questions:
- Can you explain why these components (and not the others) had to be updated?
- Why did you modify display and float properties in star rating?
- Why did you change the active state of list-group?
- Why did you point to button-group preview whereas there is no change in code?
- Can you explain for which problem/property you had to change the scss imports order?
Thanks :-)
Maybe the migration guide could be clarified too.
| @@ -34,12 +34,18 @@ | |||
| border: 0; | |||
| @include transition($nav-link-transition); | |||
|
|
|||
| // Boosted mod: no focus | |||
| // Boosted mod: handle focus differently focus | |||
There was a problem hiding this comment.
"focus" word at the end to remove
| @@ -9,6 +9,7 @@ | |||
| --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon}; | |||
| --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon}; | |||
|
|
|||
| display: flex; | |||
| @@ -24,7 +25,6 @@ | |||
|
|
|||
| > label, | |||
| span { | |||
| float: left; | |||
| @@ -142,11 +142,6 @@ | |||
| &[data-focus-visible-added] { | |||
| outline-offset: subtract(-$focus-visible-outer-width, var(--#{$prefix}list-group-border-width)); | |||
| box-shadow: inset 0 0 0 add($focus-visible-inner-width, $focus-visible-outer-width) var(--#{$prefix}focus-visible-inner-color); | |||
|
|
|||
| ### Core | ||
|
|
||
| - **Colors** | ||
| - <span class="badge text-bg-warning">Warning</span> The dark mode red color hexadecimal value has been updated from `#f66` to `#ff4d4f` after a change in the design specifications to enhance the contrast for a better accessibility. This modification should be transparent for you except if you were using an hardcoded hexadecimal value directly in your websites. | ||
|
|
||
| ### CSS and Sass variables | ||
|
|
||
| - <span class="badge text-bg-danger">Breaking</span> A parameter from the `focus-visible()` mixin has been removed. You don't need the `z-index` parameter anymore. Please reflect these modifications inside your website. |
There was a problem hiding this comment.
Maybe explain this has an impact only if the project uses the mixin focus-visible() explicitly.
Proposition:
Breaking A parameter from the focus-visible() mixin has been removed. If you use the focus-visible() mixin in you scss files with a z-index as first parameter, please adapt your code.
Note: Please transform
- [ ]into- (NA)in the description when things are not applicableRelated issues
Closes #2496
Description
I focused the whole documentation and I think we are fine regarding the library.
⚠️ Changed the import order causing some issue between button-group and forms (button-group
z-indexrule is as specific as the forms:focusone)Tested on the reduced test case and it works fine again
Motivation & Context
Some elements outside the library were broken due to
z-indexproperty. See #2496. So we limit thez-indexonto library elements.Types of change
Live previews
Checklist
Contribution
Accessibility
Design
Development
Documentation
Checklist (for Core Team only)
After the merge