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.

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

Focus: Remove default z-index #2501

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Conversation

louismaximepiton
Copy link
Member

@louismaximepiton louismaximepiton commented Mar 5, 2024

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related 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-index rule is as specific as the forms :focus one)
Tested on the reduced test case and it works fine again

Motivation & Context

Some elements outside the library were broken due to z-index property. See #2496. So we limit the z-index onto library elements.

Types of change

  • Bug fix (non-breaking which fixes an issue)

Live previews

Checklist

Contribution

Accessibility

  • My change follows accessibility good practices; I have at least run axe

Design

  • My change respects the design guidelines defined in Orange Design System
  • My change is compatible with a responsive display

Development

  • My change follows the developer guide
  • (NA) I have added JavaScript unit tests to cover my changes
  • (NA) I have added SCSS unit tests to cover my changes

Documentation

  • (NA) My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

  • (NA) My change introduces changes to the migration guide
  • (NA) My new component is well displayed in Storybook
  • (NA) My new component is compatible with RTL
  • Manually run BrowserStack tests
  • Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
  • Code review
  • Design review
  • A11y review

After the merge

Copy link

netlify bot commented Mar 5, 2024

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit c37ccf4
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/66602a0c5c1a540008253592
😎 Deploy Preview https://deploy-preview-2501--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

louismaximepiton and others added 2 commits March 5, 2024 16:29
# Conflicts:
#	site/content/docs/5.3/migration.md
Copy link
Member

@hannahiss hannahiss left a comment

Choose a reason for hiding this comment

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

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.

scss/_nav.scss Outdated
@@ -34,12 +34,18 @@
border: 0;
@include transition($nav-link-transition);

// Boosted mod: no focus
// Boosted mod: handle focus differently focus
Copy link
Member

Choose a reason for hiding this comment

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

"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;
Copy link
Member

Choose a reason for hiding this comment

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

Why is this change needed?

Copy link
Member Author

@louismaximepiton louismaximepiton Jun 5, 2024

Choose a reason for hiding this comment

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

Both the display: flex and the removal of float: left changes were needed otherwise, the focus wasn't handled correctly. Here is the rendering without the changes:
image

Edit: Rethinking about this, it could even be display: inline-flex

scss/forms/_star-rating.scss Show resolved Hide resolved
@@ -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);

Copy link
Member

Choose a reason for hiding this comment

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

Why is this change needed?

Copy link
Member Author

Choose a reason for hiding this comment

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

This could be done separately if needed, if I remember well it was only an oversight from #1467.

### 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.
Copy link
Member

Choose a reason for hiding this comment

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

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.

Copy link
Member Author

@louismaximepiton louismaximepiton Jun 5, 2024

Choose a reason for hiding this comment

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

Yeah, I tried something based on your proposition in c37ccf4.

@julien-deramond
Copy link
Member

Based on the questions asked in the code review by @hannahiss, maybe the answers could be in the code somewhere. Otherwise, we'll break something in the future. It's probably not possible, but it would be even better if we couldn't gather this patch at the same place. I'm a bit afraid of maintaining that z-index behavior.

@louismaximepiton
Copy link
Member Author

louismaximepiton commented Jun 5, 2024

Hannah
I couldn't test it locally, and so I couldn't go really deeply inside your changes.

There is one more place to check: https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/add-map/jsfiddle with an addition to do in the <head>: <link href="https://deploy-preview-2501--boosted.netlify.app/docs/5.3/dist/css/boosted.min.css" rel="stylesheet">

Hannah
Can you explain why these components (and not the others) had to be updated?

These components were updated because their behavior on focus wasn't trivial and might be breaking for people using it. The other were not because the focus wasn't broken.

Hannah
Why did you point to button-group preview whereas there is no change in code?

I think it was because of the proximity of the components (the focus should go over the other buttons).

Hannah
Can you explain for which problem/property you had to change the scss imports order?

I can't remember exactly why but it seems to be related with the button groups. I think it was to avoid more CSS rules. I can maybe undo this change and rethink about a way of doing the good thing.

Julien
Based on the questions asked in the code review by @hannahiss, maybe the answers could be in the code somewhere.

I tried my best in c37ccf4.

Julien
It's probably not possible, but it would be even better if we couldn't gather this patch at the same place. I'm a bit afraid of maintaining that z-index behavior.

TBH, I don't really know what's the good way of doing this here. I could maybe add a file with some rules like .star-rating > [data-focus-visible-added]:focus + label, .page-link:focus[data-focus-visible-added], ... but I think it's worse. Did you have anything in mind ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Need Dev Review
Development

Successfully merging this pull request may close these issues.

Conflict between Google maps & Boosted (V5.3)
3 participants