search

Matsuuu / web-component-devtools

Web Component DevTools is a Browser Extension enhancing the development experience of Web Component developers
https://matsuuu.github.io/web-component-devtools/
MIT License
131 stars 3 forks source link

[Feature Request]: focus-visible state on input[type=checkbox] #64

Open heybran opened 1 year ago

heybran commented 1 year ago

Which browser are you using?

Chrome

Is your feature request related to a problem? Please describe.

Heya, I deploy a demo of a wc datepicker to test WCDT: https://wc-datepicker-demo.netlify.app/, the datepicker was originally from this repo: https://github.com/Sqrrl/wc-datepicker

The checkbox does not seem to have a :focus-visible state like the button mentioned in #62, I think it will improve user experience/accessibility if we add a :focus-visible styles as well.

Describe the solution you'd like

I've already added the CSS locally and here's what it looks like:

input[type='checkbox']:focus-visible {
  outline: 1px auto var(--highlight);
}

Screenshot-2023-06-29-at-11-40-43

A small improvement suggestion for you when you're rewriting the UI?

Btw, it's a bit weird that the outline does not have equal spacing visually, will debug more.

Brandon

heybran commented 1 year ago

Hey @Matsuuu,

Hope you had a great holiday.

I'm recently starting to build a vanilla web components collection from the ground up: https://github.com/heybran/breeze-components

So I was thinking I can prioritise some components that maybe be used by WCDT ui, for the components collection I'm building, at the moment I'm following a certain style, but I can make a standalone component if it needs to fit well with the new design of WCTP (which I assume you will be working on), I was thinking -- related to this issue -- to move on to work on a wcdt-checkbox element once I've finished existing components, any thoughts?

I will have a demo for the components, but not up running yet.

Matsuuu commented 1 year ago

Heya @heybran !

Sorry that I've taken sooooo long to respond to these. I'm still kind of trying to land back to work and got a million things to do.

Nice that you've taken inspiration from the generic components project, that's a great one to look at.

As for what comes to the UI rebuild: I am currently in the considerations of utilizing ShoeLace in the UI rebuild as it's a battle-tested suite of components and I'm sure it will benefit the overall experience.

I'll keep you updated on the UI rebuild as I get more into it

heybran commented 1 year ago

Cool, no problem, shoelace sounds a great choice :)