feat(color): add color channel values and luminosity, saturation, clip functions by straker · Pull Request #4366 · dequelabs/axe-core

straker · 2024-03-08T18:46:56Z

Decided to move the Color improvements from https://github.com/dequelabs/axe-core/pull/4365/files into their own PR. This also fixes the clip bug mentioned in https://github.com/dequelabs/axe-core/pull/4365/files#r1517706612

No QA needed

…functions

straker · 2024-03-08T18:53:15Z

lib/commons/color/color.js

 */
 export default class Color {
  constructor(red, green, blue, alpha = 1) {
+    if (red instanceof Color) {


Now we can create a new color from another one. Makes the new functions that create new colors much easier.

const color = new Color(0,0,0); const color2 = new Color(color);

WilcoFiers · 2024-03-11T11:00:24Z

lib/commons/color/color.js

+    return new Color(
+      this.red / 255,
+      this.green / 255,
+      this.blue / 255,
+      this.alpha
+    );


This object is broken. That's the issue I mentioned in the other PR too. Color is built to accept 0-255. A bunch of methods on this class don't work correctly if you pass it 0-1. When we're in 0-1 land we need different properties. We can do that with getter/setters on this class, or we could create a separate object or class to represent that.

Suggested change

return new Color(

this.red / 255,

this.green / 255,

this.blue / 255,

this.alpha

);

return {

floatRed: this.red / 255,

floatGreen: this.green / 255,

floatBlue: this.blue / 255,

floatAlpha: this.alpha

);

Decided to mimic how Colorjs.io does this by using color coordinates (mapped to r, g, b), also called color channels. I also learned that Babel supports private properties and functions. Just had to up our eslint version to allow it.

lib/commons/color/color.js

Resolved

straker · 2024-03-11T21:54:46Z

.eslintrc.js

  extends: ['prettier'],
  parserOptions: {
-    ecmaVersion: 2021
+    ecmaVersion: 2023


Allows us to use private properties and functions in classes (supported by babel).

straker · 2024-03-11T21:56:27Z

lib/commons/color/color.js

   * @instance
   */
  parseString(colorString) {
-    // Colorjs currently does not support rad or turn angle values


Colorjs 0.5.0 now fully supports grad, rad, and turn so we don't need to do this anymore.

straker · 2024-03-11T21:57:01Z

lib/commons/color/color.js

+   * @param  {number}  value  The value to add
+   * @return {Color} A new color instance
+   */
+  #add(value) {


Nothing outside of the color class should add a value to the color components.

## [4.9.0](v4.8.4...v4.9.0) (2024-03-25) ### Features - adding the wcag131 tag to the aria-hidden-body rule ([#4349](#4349)) ([dd4c3c3](dd4c3c3)), closes [#4315](#4315) - **checks:** deprecate aria-busy check ([#4356](#4356)) ([be0b555](be0b555)), closes [#4347](#4347) [#4340](#4340) - **color:** add color channel values and luminosity, saturation, clip functions ([#4366](#4366)) ([9e70199](9e70199)), closes [/github.com//pull/4365/files#r1517706612](https://github.com/dequelabs//github.com/dequelabs/axe-core/pull/4365/files/issues/r1517706612) - **i18n:** add Greek Translations ([#3836](#3836)) ([3ea9a48](3ea9a48)) - **i18n:** Add Italian translation ([#4344](#4344)) ([de1baa9](de1baa9)) - **i18n:** Add Simplified Chinese translation ([#4379](#4379)) ([bda7c8d](bda7c8d)) - **i18n:** Add Taiwanese Mandarin translation ([#4299](#4299)) ([c5e11de](c5e11de)) ### Bug Fixes - Add LICENSE-3RD-PARTY.txt file ([#4304](#4304)) ([daa0fe6](daa0fe6)) - add Object.values polyfill for node <=6 ([#4274](#4274)) ([5eb867b](5eb867b)) - **aria-required-children:** avoid confusing aria-busy message in failures ([#4347](#4347)) ([591607d](591607d)), closes [#fail13](https://github.com/dequelabs/axe-core/issues/fail13) [#4340](#4340) - avoid reading element-specific node properties of non-element node types ([#4317](#4317)) ([b853b18](b853b18)), closes [#4316](#4316) [#4316](#4316) - **color-contrast:** handle text that is outside `overflow: hidden` ancestor ([#4357](#4357)) ([bdb7300](bdb7300)), closes [#4253](#4253) - **color-contrast:** support color blend modes hue, saturation, color, luminosity ([#4365](#4365)) ([7ae4761](7ae4761)) - **d.ts:** RawNodesResult issues ([#4229](#4229)) ([d660518](d660518)) - **d.ts:** RunOptions.reporter can be any string ([#4218](#4218)) ([e53f5c5](e53f5c5)) - **i18n:** update Italian translations ([#4377](#4377)) ([4d65d4b](4d65d4b)) - **listitem:** clarify roleNotValid message ([#4374](#4374)) ([0f8a9af](0f8a9af)) - **scrollable-region-focusable:** missing wcag213 tag ([#4201](#4201)) ([0080a72](0080a72)) - **target-size:** always pass 10x targets (avoid perf bottleneck) ([#4376](#4376)) ([be327c4](be327c4)) - **target-size:** do not crash for nodes with many overlapping widgets ([#4373](#4373)) ([1dbea83](1dbea83)), closes [#4359](#4359) [#4359](#4359) [#4360](#4360) - **utils/get-selector:** ignore 'xmlns' attribute when generating a selector ([#4303](#4303)) ([938b411](938b411)) This PR was opened by a robot 🤖 🎉

evelynmcr · 2024-04-03T09:50:23Z

Hi @WilcoFiers and @straker - I've raised a bug here which I think could potentially relate to this change? Would you mind taking a look? Thanks!

…ith prototype.js (#4429) This [puts back the v0.4.3 code](#4366) in `color.js` to handle colorjs.io not handling rad and turn values in hsl. I also decided to use core-js `Array.from` polyfill rather than our own internal one since I needed to bring it in outside of the `polyfill.js` file and could then add it as an import and reuse it in both places. Closes: #4428

feat(color): add luminosity, saturation, clip, normalize, scale, add …

a1bc838

…functions

straker requested a review from a team as a code owner March 8, 2024 18:46

straker commented Mar 8, 2024

View reviewed changes

no default

576cb2c

WilcoFiers previously requested changes Mar 11, 2024

View reviewed changes

suggestions

94537e2

straker changed the title ~~feat(color): add luminosity, saturation, clip, normalize, add, and scale functions~~ feat(color): color channel values and luminosity, saturation, clip functions Mar 11, 2024

straker commented Mar 11, 2024

View reviewed changes

comment

3f7c809

straker commented Mar 11, 2024

View reviewed changes

straker added 2 commits March 11, 2024 16:01

tests

7c59bf9

fix tests

27f9e0f

straker changed the title ~~feat(color): color channel values and luminosity, saturation, clip functions~~ feat(color): add color channel values and luminosity, saturation, clip functions Mar 11, 2024

WilcoFiers approved these changes Mar 12, 2024

View reviewed changes

straker merged commit 9e70199 into develop Mar 12, 2024

straker deleted the color-funcs branch March 12, 2024 19:09

attest-team-ci mentioned this pull request Mar 25, 2024

chore(release): v4.9.0 #4380

Merged

straker mentioned this pull request Apr 25, 2024

revert(color-contrast): revert upgrade to colorjs.io v0.5.0 to work with prototype.js #4429

Merged

data-sync-user mentioned this pull request Jun 3, 2024

Bump axe-core from 4.8.4 to 4.9.0 MozillaFoundation/foundation.mozilla.org#12125

Closed

wingn8t mentioned this pull request Jun 14, 2024

[Snyk] Upgrade axe-core from 4.8.4 to 4.9.1 wingn8t/wagtail#1

Open

gurudeep9 mentioned this pull request Jun 23, 2024

[Snyk] Upgrade axe-core from 4.9.0 to 4.9.1 gurudeep9/mattermost-test#2

Open

Stanislav1975 mentioned this pull request Aug 9, 2024

[Snyk] Upgrade axe-core from 4.3.3 to 4.9.1 Stanislav1975/sitespeed.io#4

Open

Stanislav1975 mentioned this pull request Aug 19, 2024

[Snyk] Upgrade axe-core from 4.3.3 to 4.10.0 Stanislav1975/sitespeed.io#11

Open

Stanislav1975 mentioned this pull request Sep 9, 2024

[Snyk] Upgrade: uuid, , , axe-core, fast-stats, find-up, cli-color, coach-core, dayjs, fs-extra, influx, jstransformer-markdown-it, junit-report-builder, os-name, p-limit, pug, recursive-readdir Stanislav1975/sitespeed.io#12

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(color): add color channel values and luminosity, saturation, clip functions#4366

feat(color): add color channel values and luminosity, saturation, clip functions#4366
straker merged 6 commits intodevelopfrom
color-funcs

straker commented Mar 8, 2024 •

edited

Loading

Uh oh!

straker Mar 8, 2024 •

edited

Loading

Uh oh!

WilcoFiers Mar 11, 2024

Uh oh!

straker Mar 11, 2024 •

edited

Loading

Uh oh!

Uh oh!

straker Mar 11, 2024

Uh oh!

straker Mar 11, 2024

Uh oh!

straker Mar 11, 2024

Uh oh!

evelynmcr commented Apr 3, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

straker commented Mar 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

straker Mar 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

WilcoFiers Mar 11, 2024

Choose a reason for hiding this comment

Uh oh!

straker Mar 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

straker Mar 11, 2024

Choose a reason for hiding this comment

Uh oh!

straker Mar 11, 2024

Choose a reason for hiding this comment

Uh oh!

straker Mar 11, 2024

Choose a reason for hiding this comment

Uh oh!

evelynmcr commented Apr 3, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

straker commented Mar 8, 2024 •

edited

Loading

straker Mar 8, 2024 •

edited

Loading

straker Mar 11, 2024 •

edited

Loading