Accessible goal chart (colors)

[myasonik]

Goals have color-focused range definitions, but what's a good way to make those accessible?

Currently, the range definition might look something like:

const colorMap: { [k: number]: Color } = {
  '-200': `rgb(${q1},${q1},${q1})`,
  '-250': `rgb(${q2},${q2},${q2})`,
  '-300': `rgb(${q3},${q3},${q3})`,
};

My idea is to extend that to include semantic information as well:

const colorMap: { [k: number]: [Color, string] } = {
  '-200': [`rgb(${q1},${q1},${q1})`, 'cold',
  '-250': `rgb(${q2},${q2},${q2})`, 'really cold'
  '-300': `rgb(${q3},${q3},${q3})`, 'freezing'
};

This way, the author is setting up one map and has everything in one place.

And then when rendering, this info can be added to the accessible graph summary.

[nickofthyme]

🎉 This issue has been resolved in version 32.0.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[nickofthyme]

🎉 This issue has been resolved in version 32.0.0 🎉

The release is available on:

• GitHub release
• npm package (@release-32.x dist-tag)

Your semantic-release bot 📦🚀