Use datalist + numeric input for type scale picker instead of select

AleksandrHovhannisyan / fluid-type-scale-calculator

Generate font size variables for a fluid type scale with CSS clamp.

https://www.fluid-type-scale.com/

MIT License

275 stars 18 forks source link

Use datalist + numeric input for type scale picker instead of select #15

Closed AleksandrHovhannisyan closed 2 years ago

AleksandrHovhannisyan commented 2 years ago

Datalist doesn't show in Firefox for numeric inputs (https://caniuse.com/datalist), but the input still works. This seemed like the path of least resistance for allowing custom inputs but also suggesting values natively. The alternative is to conditionally render an additional input for a custom input, but that seems a bit heavy handed.

Tested with NVDA and VoiceOver on:

Chrome 97
Firefox 96
Safari 15.1

Works well!

Roughly what it looks like in Chrome/Edge/Safari:

netlify[bot] commented 2 years ago

✔️ Deploy Preview for zen-ptolemy-a47e6d ready!

🔨 Explore the source changes: b32e309dc9830693c041907288f93efa679441e4

🔍 Inspect the deploy log: https://app.netlify.com/sites/zen-ptolemy-a47e6d/deploys/61eb445d13d21c000853c53f

😎 Browse the preview: https://deploy-preview-15--zen-ptolemy-a47e6d.netlify.app/