Comments (2)
WIP Codepen:
https://codepen.io/amsheehan/pen/YNxvaJ?editors=1100
from material-components-web.
The overall UI looks excellent. Only thing is I can't seem to get it to handle keyboard and focus in Chrome, but I address that below. Here are my notes:
- The use of
::before
/::after
to draw the switch element is really clever. However, it may present problems when it comes to how to properly display the focus ring, since the focus ring has to track the switch's knob. It may be easier to havemdc-switch__background
act as the track and then have anmdc-switch__knob
element as its child. Thenmdc-switch__knob::after
could function as the focus ring. - The
mdc-switch__background
element should probably haverole="presentation"
on it, since it is used purely as presentational markup (side note: we should probably do this same thing for checkboxes and radios). - Labels shouldn't be inside the component.
- Instead of calling the checkbox class
mdc-toggle
, we should probably call itmdc-switch__native-control
. This adheres to the conventions we use for checkboxes and radios. - For the checkbox input, instead of using
visibility: hidden
, try absolutely positioning it, making it cover the element (set top/right/bottom/left to 0), and setopacity: 0;
. This ensures that the checkbox is invisible visually, but not at all hidden from assistive technology. Also, it ensures that the checkbox will be focused and receive all mouse events since it's highest in the stacking order, meaning that keyboard focus and controls will work. - Transitions should target the
transform
property rather thanmargin
, andbackground-color
rather thanbackground
. The latter is so the browser can be extremely precise in keeping track of exactly what it needs to animate.
from material-components-web.
Related Issues (20)
- _constants.scss is missing from mdc-theme.import.scss HOT 1
- Angular Material Tabs with sticky first tab
- The getting started guide: issues HOT 1
- [mdc-icon-button] unable to import core-styles mixin of icon-button as shown in documentation
- Unpkg: Source map for minified JS missing HOT 1
- MDCTopAppBar buttons ripple effect broken since 12.0.0 HOT 2
- Hi, I can't make a frame for the drawer, it's a problem
- Symmetric API for the Angular Material Icon Button HOT 1
- [MDCTextField] Trailing icons do not appear HOT 1
- the problem in running the program HOT 1
- [mdc-chip] css not applied to mdc-evolution-chip elements HOT 3
- Is there anyway we can force the dropdown select to always show below?
- [Chips] Filter chips not showing svg tick HOT 1
- `setAutovalidate()`/`getAutovalidate` name mismatch in readme
- Vertical mat-slider
- [mdc-theme] Contradicting advice on purpose of `$secondary`
- [Snackbar] screenreader leaves out "button" when reading message and action
- Tag for the version 14.1.0 is missing
- The release 14.1.0 isn't published on npmjs HOT 1
- Tone should work with css-variables
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-components-web.