Calcite-components: Custom :focus styles
Are there any plans or patterns to do custom :focus states?
We sometimes see weird stuff with browser default focus outline.
Of course, we would want to retain accessibility.
I know there's stuff like outliner.js and stuff like that.
cc @driskull @jcfranco
asangma
All 13 comments
Yeah, @macandcheese and I talked about this a bit. Because these styles are scoped to the component, it is totally possible to define custom styles for each component. Probably a shared variable or mixin would be the best like @include focus-outline()
paulcpederson
on 22 May 2019
(╭ರᴥ•́)
I like it.
I'm guessing a buncha designs would help this along.
asangma
on 22 May 2019
cc @oknoway
macandcheese
on 22 May 2019
@bstifle do you have a set of designs for focus states library-wide? If we can get away with a single custom focus style everywhere that would be better, but we could also do one-off focus styles for every element as long as they're visually cohesive.
paulcpederson
on 1 Nov 2019
cc @asangma and Mitch as well re: our conversation yesterday
macandcheese
on 1 Nov 2019
Just to note, there is an open issue related to this in the arcgis-components Share dialog.
vcolavin
on 2 Dec 2019
vcolavin
on 2 Dec 2019
@asangma did you all have any thoughts here?
macandcheese
on 10 Jan 2020
@asangma @julio8a @paulcpederson @macandcheese
Here is the latest update based on a few meetings and talks with folks. See the Rules png pasted here.
- It is a basic cascading rule set using increments of 2px.
- Light theme/dark theme.
- Rounded corners when applicable
- Simple transitions
- See this link for a super quick demo https://codepen.io/bslayer/pen/qBEMgQw
Next steps will be getting a more high fidelity demo, and then testing.
After that, Ideally we will test 2 designs. A) Being the styles shown here and B) being an even more super noticeable color way (black and white instead of blue)
bstifle
on 17 Jan 2020
There's 3 main things we are trying to solve with this design, weighted by importance:
- Consistency across Esri properties and components
- Noticeable, meaningful, and WCAG-able—While not being overly clunky and distracting.
- Scalability and ease of use for current and future designs
bstifle
on 17 Jan 2020
Looks good!
driskull
on 17 Jan 2020
Nice!
asangma
on 17 Jan 2020
moving this convo over at calcite-base https://github.com/Esri/calcite-base/issues/19
bstifle
on 23 Jan 2020
Related issues
joeyHarig
·
5Comments
asangma
·
4Comments
ethanbdev
·
4Comments
bstifle
·
5Comments
ethanbdev
·
4Comments
Most helpful comment
@asangma @julio8a @paulcpederson @macandcheese
Here is the latest update based on a few meetings and talks with folks. See the Rules png pasted here.
Next steps will be getting a more high fidelity demo, and then testing.
After that, Ideally we will test 2 designs. A) Being the styles shown here and B) being an even more super noticeable color way (black and white instead of blue)