material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 21:57:41 +03:00
Code Issues Projects Releases Wiki Activity
5df9410e60
material-web/switch/internal
History
Elizabeth Mitchell 5df9410e60 fix!: aria-labels announcing twice with "group" on components 
BREAKING CHANGE: `querySelector` for `[role]` and `[aria-*]` attributes may no longer work. See `@material/web/migrations/v2/README.md` and `@material/web/migrations/v2/query-selector-aria.ts`.

Browser/SR test results (go/mwc-double-aria-test-results)
  - ✅ VoiceOver on Chrome
  - ✅ VoiceOver on iOS Safari
  - ✅ TalkBack on Chrome
  - ✅ ChromeVox on Chrome
  - ✅ NVDA on Chrome
  - ✅ NVDA on Firefox
  - ✅ JAWS on Chrome
  - ✅ JAWS on Firefox
  (Optional)
  - ❓ VoiceOver on Safari
  - ❓ VoiceOver on Firefox

PiperOrigin-RevId: 648859827
2024-07-02 15:22:12 -07:00
..
_handle.scss refactor(switch): reduce CSS size 2024-01-23 15:06:24 -08:00
_icon.scss refactor(switch): reduce CSS size 2024-01-23 15:06:24 -08:00
_switch.scss chore: create shape logical tokens in Sass component token files 2024-01-26 09:13:58 -08:00
_track.scss refactor(switch): reduce CSS size 2024-01-23 15:06:24 -08:00
README.md fix!: rename "lib" directory to "internal" 2023-07-24 12:02:59 -07:00
switch_test.ts Merge pull request #5501 from vdegenne:switch-input-event 2024-03-11 18:02:40 -07:00
switch-styles.scss fix!: rename "lib" directory to "internal" 2023-07-24 12:02:59 -07:00
switch.ts fix!: aria-labels announcing twice with "group" on components 2024-07-02 15:22:12 -07:00

README.md

Switch

DOM structure

<button class="switch">
  <div class="track">
    ::before
    <div class="handle">
      ::before
      <div class="icons">
      </div>
    </div>
  </div>
  <input type="checkbox" aria-hidden="true">
</button>

.switch

This is the outermost button. It holds the track and the input checkbox.

NOTE: This is intentionally left without a border to make the focus-ring simpler to apply.

.track

This is the track. It contains the track selected styles.

.track::before

This element contains the track unselected styles. Its opacity is set to 0 when the switch is selected.

.handle

This is the handle. It contains the styles of selected styles.

.handle::before

This element contains the handle unselected styles. Its opacity is set to 0 when the switch is selected.

Animations

  • opacity on .track::before
    • Why? setting opacity will change between selected and unselected track
  • opacity on .handle::before
    • Why? setting opacity will change between selected and unselected handle
  • transform (scale) on .handle
    • Why? This animates the growing & shrinking of the handle.
  • margin-inline-start & margin-inline-end on .handle
    • Why? This animates the position of the handle.