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

fix(switch): theming issues with focus in dark theme #11417

Closed
wants to merge 1 commit into from
Closed

fix(switch): theming issues with focus in dark theme #11417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 8 additions & 0 deletions src/components/switch/switch-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ md-switch.md-THEME_NAME-theme {
background-color: '{{background-500}}';
}

&.md-focused:not([disabled]) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Based on https://material.io/archive/guidelines/components/selection-controls.html#selection-controls-switch, it seems like the thumb needs to be displayed when focused and disabled. This can't be done with tabbing, but it is possible to focus a disabled switch when using a screen reader or other assistive device.

We should probably remove this disabled check.

Copy link
Contributor

Choose a reason for hiding this comment

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

I did some more testing and the following seemed to work best for me:

  &.md-focused {
    &:not(.md-checked) {
      .md-thumb:before {
        background-color: '{{foreground-4}}';
      }
    }
    &[disabled] {
      .md-thumb:before {
        background-color: '{{foreground-4}}';
      }
    }
  }

&:not(.md-checked) {
.md-thumb:before {
background-color: '{{foreground-4}}';
}
}
}

&.md-checked {
Copy link
Contributor

Choose a reason for hiding this comment

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

We need to add :not([disabled]) to this rule so that disabled, focused switches don't get colored.

.md-ink-ripple {
color: '{{accent-color}}';
Expand Down
6 changes: 0 additions & 6 deletions src/components/switch/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,6 @@ md-switch {
right: -8px;
Copy link
Contributor

Choose a reason for hiding this comment

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

We need to remove :not([disabled]) from this rule as well so that the circle has a proper size when disabled switches are focused.

bottom: -8px;
}

&:not(.md-checked) {
.md-thumb:before {
background-color: rgba(0, 0, 0, 0.12);
}
}
}

.md-label {
Expand Down