Automattic / Automattic/Iris

Allow hue-only slider to be updated from its input field

Open
#64 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
259
Forks
67
PR merge metrics
No merged PRs in 30d

Description

See https://core.trac.wordpress.org/ticket/42078

In order to be fully accessible, the hue-only control used, for example, in Twenty Seventeen would need to display the underlying input field as an alternative input source. A native input field is the only guarantee the hue control can be used by everyone, with any device and ability. Worth noting the `full` color picker already allows to manually update the value form the input field and see the color palette and slider updating on the fly.

However, in the hue control moving the slider updates the value in the input field, but the other way around doesn't work. For example, manually changing the input value from 250 to 240 passes an hex color to `_setOption ()` because of `color.toString()` so what gets passed is actually `#224400` and nothing happens.

I've played a bit with [the Iris version used in core](https://github.com/Automattic/Iris/blob/add/hue-only-mode/dist/iris.js), and passing the hue value with some adjustments seems to work. However, I'm really not an expert and I'm sure there are better ways to do it.

Issues I've identified so far:
- when the type ie `hue`, then `_addInputListeners()` should pass a hue value (number from 0 to 359) or the value should be converted to something Iris can use to update the slider later on
- not sure if the regex in `_addInputListeners()` should be adjusted
- `color.js` may return an error when changing the input to a value under 100 because the current error checking expects a hex string with at list 3 chars
- performance: since the input field used in core is of type `number`, it's possible to keep the Up or Down arrow keys pressed to change its value. Keeping the key pressed continuously triggers the `change` event so lots of code is continuously running. Even on a modern macbook pro this makes the CPU go over 100% after a few seconds. The simplest solution I can think of is to debounce also the `change` callback.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by comparing the hue-only and full modes around `_addInputListeners()` and inspect `color.js`, then reproduce changing the native number input and holding its arrow keys. Done means input changes update the hue slider and palette correctly, values under 100 are handled, and continuous changes do not cause excessive work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.