From 398e6d2b7a0c45a3eaeb5ba381750a20b73cf5f0 Mon Sep 17 00:00:00 2001 From: qheaden-stack <101581623+qheaden-stack@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:20:13 -0400 Subject: [PATCH] Improve readonly input APCA Lc values for a11y (#1799) * Change readonly input text to black-400 for better contrast * Add updated visual test images * Reinstate readonly input test, and fix highcontrast Lc * Fix linting issue --- lib/components/input_textarea/input_textarea.a11y.test.ts | 2 -- lib/components/input_textarea/input_textarea.less | 4 ++-- screenshots/Chromium/baseline/s-input-readonly-dark.png | 4 ++-- screenshots/Chromium/baseline/s-input-readonly-light.png | 4 ++-- .../Chromium/baseline/s-input-state-is-readonly-dark.png | 4 ++-- .../Chromium/baseline/s-input-state-is-readonly-light.png | 4 ++-- screenshots/Chromium/baseline/s-textarea-readonly-dark.png | 4 ++-- screenshots/Chromium/baseline/s-textarea-readonly-light.png | 4 ++-- .../Chromium/baseline/s-textarea-state-is-readonly-dark.png | 4 ++-- .../Chromium/baseline/s-textarea-state-is-readonly-light.png | 4 ++-- screenshots/Firefox/baseline/s-input-readonly-dark.png | 4 ++-- screenshots/Firefox/baseline/s-input-readonly-light.png | 4 ++-- .../Firefox/baseline/s-input-state-is-readonly-dark.png | 4 ++-- .../Firefox/baseline/s-input-state-is-readonly-light.png | 4 ++-- screenshots/Firefox/baseline/s-textarea-readonly-dark.png | 4 ++-- screenshots/Firefox/baseline/s-textarea-readonly-light.png | 4 ++-- .../Firefox/baseline/s-textarea-state-is-readonly-dark.png | 4 ++-- .../Firefox/baseline/s-textarea-state-is-readonly-light.png | 4 ++-- screenshots/Webkit/baseline/s-input-readonly-dark.png | 4 ++-- screenshots/Webkit/baseline/s-input-readonly-light.png | 4 ++-- .../Webkit/baseline/s-input-state-is-readonly-dark.png | 4 ++-- .../Webkit/baseline/s-input-state-is-readonly-light.png | 4 ++-- screenshots/Webkit/baseline/s-textarea-readonly-dark.png | 4 ++-- screenshots/Webkit/baseline/s-textarea-readonly-light.png | 4 ++-- .../Webkit/baseline/s-textarea-state-is-readonly-dark.png | 4 ++-- .../Webkit/baseline/s-textarea-state-is-readonly-light.png | 4 ++-- 26 files changed, 50 insertions(+), 52 deletions(-) diff --git a/lib/components/input_textarea/input_textarea.a11y.test.ts b/lib/components/input_textarea/input_textarea.a11y.test.ts index 5abdd27ed9..86bb161b6b 100644 --- a/lib/components/input_textarea/input_textarea.a11y.test.ts +++ b/lib/components/input_textarea/input_textarea.a11y.test.ts @@ -79,8 +79,6 @@ const otherModifiers = ["creditcard", "search"]; }, children, template, - // TODO revisit these skipped test ids - skippedTestids: [/readonly/], }); }); diff --git a/lib/components/input_textarea/input_textarea.less b/lib/components/input_textarea/input_textarea.less index 5e0673e730..ab385bb994 100644 --- a/lib/components/input_textarea/input_textarea.less +++ b/lib/components/input_textarea/input_textarea.less @@ -43,12 +43,12 @@ &[readonly], .is-readonly & { .highcontrast-mode({ - --_in-fc: var(--fc-light); + --_in-fc: var(--fc-medium); }); --_in-bg: var(--black-150); --_in-bc: var(--bc-light); - --_in-fc: var(--black-300); + --_in-fc: var(--black-400); } .validation-states( diff --git a/screenshots/Chromium/baseline/s-input-readonly-dark.png b/screenshots/Chromium/baseline/s-input-readonly-dark.png index 912c2455ae..5590e7d0ad 100644 --- a/screenshots/Chromium/baseline/s-input-readonly-dark.png +++ b/screenshots/Chromium/baseline/s-input-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3c9cb985d65bc23f88d5f984835e65ae43ade5e3ff98c538929dbccab81dbeda -size 1966 +oid sha256:6d3f0022aa2070b2813db900a2ea3a4f6853f62d683b9913024113c29feadc89 +size 2177 diff --git a/screenshots/Chromium/baseline/s-input-readonly-light.png b/screenshots/Chromium/baseline/s-input-readonly-light.png index cb02cb9ea5..ccd4517519 100644 --- a/screenshots/Chromium/baseline/s-input-readonly-light.png +++ b/screenshots/Chromium/baseline/s-input-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:47617c629ae03fd24decbe89285188847ab0e555adb5b4f96cb6c7a81e828afc -size 1803 +oid sha256:be60f93bcb105d4bf13e346d59b10757fbec041fc5e87da19010a7354fb3dbbd +size 2128 diff --git a/screenshots/Chromium/baseline/s-input-state-is-readonly-dark.png b/screenshots/Chromium/baseline/s-input-state-is-readonly-dark.png index 912c2455ae..5590e7d0ad 100644 --- a/screenshots/Chromium/baseline/s-input-state-is-readonly-dark.png +++ b/screenshots/Chromium/baseline/s-input-state-is-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3c9cb985d65bc23f88d5f984835e65ae43ade5e3ff98c538929dbccab81dbeda -size 1966 +oid sha256:6d3f0022aa2070b2813db900a2ea3a4f6853f62d683b9913024113c29feadc89 +size 2177 diff --git a/screenshots/Chromium/baseline/s-input-state-is-readonly-light.png b/screenshots/Chromium/baseline/s-input-state-is-readonly-light.png index cb02cb9ea5..ccd4517519 100644 --- a/screenshots/Chromium/baseline/s-input-state-is-readonly-light.png +++ b/screenshots/Chromium/baseline/s-input-state-is-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:47617c629ae03fd24decbe89285188847ab0e555adb5b4f96cb6c7a81e828afc -size 1803 +oid sha256:be60f93bcb105d4bf13e346d59b10757fbec041fc5e87da19010a7354fb3dbbd +size 2128 diff --git a/screenshots/Chromium/baseline/s-textarea-readonly-dark.png b/screenshots/Chromium/baseline/s-textarea-readonly-dark.png index e5b77cacf1..19b54e860d 100644 --- a/screenshots/Chromium/baseline/s-textarea-readonly-dark.png +++ b/screenshots/Chromium/baseline/s-textarea-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d8733e90f774b48b1653544556626f9609a0b47d144a242d81d67d982e7e3a00 -size 2283 +oid sha256:c61bc7b9dcb93dc9cb5fe5ad997e54b145bb8e37f47417254ee4eb9c9bf40efa +size 2507 diff --git a/screenshots/Chromium/baseline/s-textarea-readonly-light.png b/screenshots/Chromium/baseline/s-textarea-readonly-light.png index 6aa70b5291..6b120fba04 100644 --- a/screenshots/Chromium/baseline/s-textarea-readonly-light.png +++ b/screenshots/Chromium/baseline/s-textarea-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:779f9af91cc3925557aac1d6d7396fe29a0500e8f6f97ced1ca0c42a174285c9 -size 2184 +oid sha256:c74fc106b84b728fdc5efab35288242ce8315b95230fe46f9c90dd81c51335a0 +size 2466 diff --git a/screenshots/Chromium/baseline/s-textarea-state-is-readonly-dark.png b/screenshots/Chromium/baseline/s-textarea-state-is-readonly-dark.png index e5b77cacf1..19b54e860d 100644 --- a/screenshots/Chromium/baseline/s-textarea-state-is-readonly-dark.png +++ b/screenshots/Chromium/baseline/s-textarea-state-is-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d8733e90f774b48b1653544556626f9609a0b47d144a242d81d67d982e7e3a00 -size 2283 +oid sha256:c61bc7b9dcb93dc9cb5fe5ad997e54b145bb8e37f47417254ee4eb9c9bf40efa +size 2507 diff --git a/screenshots/Chromium/baseline/s-textarea-state-is-readonly-light.png b/screenshots/Chromium/baseline/s-textarea-state-is-readonly-light.png index 6aa70b5291..6b120fba04 100644 --- a/screenshots/Chromium/baseline/s-textarea-state-is-readonly-light.png +++ b/screenshots/Chromium/baseline/s-textarea-state-is-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:779f9af91cc3925557aac1d6d7396fe29a0500e8f6f97ced1ca0c42a174285c9 -size 2184 +oid sha256:c74fc106b84b728fdc5efab35288242ce8315b95230fe46f9c90dd81c51335a0 +size 2466 diff --git a/screenshots/Firefox/baseline/s-input-readonly-dark.png b/screenshots/Firefox/baseline/s-input-readonly-dark.png index 2c0a52237e..ef24270b31 100644 --- a/screenshots/Firefox/baseline/s-input-readonly-dark.png +++ b/screenshots/Firefox/baseline/s-input-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:88dad7367923fc01a5bbc5d44749ff1c2d2d20c3ab144a5b1d44eac708aa0c96 -size 2347 +oid sha256:3ef7a5be762e579a99bd31cf2d05693f1a851ff7e28ac5ed27b38d27b9d6d9e0 +size 2549 diff --git a/screenshots/Firefox/baseline/s-input-readonly-light.png b/screenshots/Firefox/baseline/s-input-readonly-light.png index 7518166984..7c74f28852 100644 --- a/screenshots/Firefox/baseline/s-input-readonly-light.png +++ b/screenshots/Firefox/baseline/s-input-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:250718b84de9b07c70f02461d1cbe16193d34594850258a24a5c86352c52ce84 -size 2248 +oid sha256:7b0f76ecaba349ea044c6093a015d2f48de111915ac0278515d2ba3e8c3432bb +size 2530 diff --git a/screenshots/Firefox/baseline/s-input-state-is-readonly-dark.png b/screenshots/Firefox/baseline/s-input-state-is-readonly-dark.png index 2c0a52237e..ef24270b31 100644 --- a/screenshots/Firefox/baseline/s-input-state-is-readonly-dark.png +++ b/screenshots/Firefox/baseline/s-input-state-is-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:88dad7367923fc01a5bbc5d44749ff1c2d2d20c3ab144a5b1d44eac708aa0c96 -size 2347 +oid sha256:3ef7a5be762e579a99bd31cf2d05693f1a851ff7e28ac5ed27b38d27b9d6d9e0 +size 2549 diff --git a/screenshots/Firefox/baseline/s-input-state-is-readonly-light.png b/screenshots/Firefox/baseline/s-input-state-is-readonly-light.png index 7518166984..7c74f28852 100644 --- a/screenshots/Firefox/baseline/s-input-state-is-readonly-light.png +++ b/screenshots/Firefox/baseline/s-input-state-is-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:250718b84de9b07c70f02461d1cbe16193d34594850258a24a5c86352c52ce84 -size 2248 +oid sha256:7b0f76ecaba349ea044c6093a015d2f48de111915ac0278515d2ba3e8c3432bb +size 2530 diff --git a/screenshots/Firefox/baseline/s-textarea-readonly-dark.png b/screenshots/Firefox/baseline/s-textarea-readonly-dark.png index 33cd1ce1f8..fc2c3b4037 100644 --- a/screenshots/Firefox/baseline/s-textarea-readonly-dark.png +++ b/screenshots/Firefox/baseline/s-textarea-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24a03e0a86fc7ea4776696020c77175c3fd22df8864d3c71e18bad9c28516705 -size 2773 +oid sha256:b34e2c49a9bdb4b921cbbd25776691ef5c8a180415f34aabe050025d9901973a +size 3007 diff --git a/screenshots/Firefox/baseline/s-textarea-readonly-light.png b/screenshots/Firefox/baseline/s-textarea-readonly-light.png index 53e065a7a3..96b556f71d 100644 --- a/screenshots/Firefox/baseline/s-textarea-readonly-light.png +++ b/screenshots/Firefox/baseline/s-textarea-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bd266e8a5fd2fe6c00d82079421defa5cc818a1bf4f0879f28294f1a92acb5a9 -size 2657 +oid sha256:ef84e1f1cfee887e50999cd96278cc7d05d2789f2a1b88d854a04fc017547caf +size 2979 diff --git a/screenshots/Firefox/baseline/s-textarea-state-is-readonly-dark.png b/screenshots/Firefox/baseline/s-textarea-state-is-readonly-dark.png index 33cd1ce1f8..fc2c3b4037 100644 --- a/screenshots/Firefox/baseline/s-textarea-state-is-readonly-dark.png +++ b/screenshots/Firefox/baseline/s-textarea-state-is-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24a03e0a86fc7ea4776696020c77175c3fd22df8864d3c71e18bad9c28516705 -size 2773 +oid sha256:b34e2c49a9bdb4b921cbbd25776691ef5c8a180415f34aabe050025d9901973a +size 3007 diff --git a/screenshots/Firefox/baseline/s-textarea-state-is-readonly-light.png b/screenshots/Firefox/baseline/s-textarea-state-is-readonly-light.png index 53e065a7a3..96b556f71d 100644 --- a/screenshots/Firefox/baseline/s-textarea-state-is-readonly-light.png +++ b/screenshots/Firefox/baseline/s-textarea-state-is-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bd266e8a5fd2fe6c00d82079421defa5cc818a1bf4f0879f28294f1a92acb5a9 -size 2657 +oid sha256:ef84e1f1cfee887e50999cd96278cc7d05d2789f2a1b88d854a04fc017547caf +size 2979 diff --git a/screenshots/Webkit/baseline/s-input-readonly-dark.png b/screenshots/Webkit/baseline/s-input-readonly-dark.png index 17363249c9..a434ec4885 100644 --- a/screenshots/Webkit/baseline/s-input-readonly-dark.png +++ b/screenshots/Webkit/baseline/s-input-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fc501200d28dd1c5f01ebbbb0203d1ec8593800205989af9e0eda83eddb91dcc -size 1670 +oid sha256:25e87f390fc332c0a924fd7d5490d9ce5286f19f614c8b1920955dc35432eba6 +size 1854 diff --git a/screenshots/Webkit/baseline/s-input-readonly-light.png b/screenshots/Webkit/baseline/s-input-readonly-light.png index 5002292b4e..a30c9c0b08 100644 --- a/screenshots/Webkit/baseline/s-input-readonly-light.png +++ b/screenshots/Webkit/baseline/s-input-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:648a2f03dc68321deb6d539fcc55f62ec5b5ba2bd06df06465da79f256183a58 -size 1597 +oid sha256:b2e7cff5bf8e0723998333d3e4c04ac3ff92952ece38e78f7dc7a7c2ff5adbb4 +size 1808 diff --git a/screenshots/Webkit/baseline/s-input-state-is-readonly-dark.png b/screenshots/Webkit/baseline/s-input-state-is-readonly-dark.png index 17363249c9..a434ec4885 100644 --- a/screenshots/Webkit/baseline/s-input-state-is-readonly-dark.png +++ b/screenshots/Webkit/baseline/s-input-state-is-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fc501200d28dd1c5f01ebbbb0203d1ec8593800205989af9e0eda83eddb91dcc -size 1670 +oid sha256:25e87f390fc332c0a924fd7d5490d9ce5286f19f614c8b1920955dc35432eba6 +size 1854 diff --git a/screenshots/Webkit/baseline/s-input-state-is-readonly-light.png b/screenshots/Webkit/baseline/s-input-state-is-readonly-light.png index 5002292b4e..a30c9c0b08 100644 --- a/screenshots/Webkit/baseline/s-input-state-is-readonly-light.png +++ b/screenshots/Webkit/baseline/s-input-state-is-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:648a2f03dc68321deb6d539fcc55f62ec5b5ba2bd06df06465da79f256183a58 -size 1597 +oid sha256:b2e7cff5bf8e0723998333d3e4c04ac3ff92952ece38e78f7dc7a7c2ff5adbb4 +size 1808 diff --git a/screenshots/Webkit/baseline/s-textarea-readonly-dark.png b/screenshots/Webkit/baseline/s-textarea-readonly-dark.png index 2687db060b..7494ce10f3 100644 --- a/screenshots/Webkit/baseline/s-textarea-readonly-dark.png +++ b/screenshots/Webkit/baseline/s-textarea-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:745ebf4efc3f9f221ffad3096785b24899503d4e143de242e2cfad28b1315303 -size 1849 +oid sha256:a1019e569553069180e79d2d8e9f12c683427757e709f32dee1ee50ff8cb1dba +size 2035 diff --git a/screenshots/Webkit/baseline/s-textarea-readonly-light.png b/screenshots/Webkit/baseline/s-textarea-readonly-light.png index 7b176c1356..0100533659 100644 --- a/screenshots/Webkit/baseline/s-textarea-readonly-light.png +++ b/screenshots/Webkit/baseline/s-textarea-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f0bd5239d5067f746dc89694fed61956ca92dad241fad2fae1ba9642a253218f -size 1769 +oid sha256:c8471509338715f5c96b83ee7c96ecef5e6650b669282d412c1348f807f993de +size 1997 diff --git a/screenshots/Webkit/baseline/s-textarea-state-is-readonly-dark.png b/screenshots/Webkit/baseline/s-textarea-state-is-readonly-dark.png index 2687db060b..7494ce10f3 100644 --- a/screenshots/Webkit/baseline/s-textarea-state-is-readonly-dark.png +++ b/screenshots/Webkit/baseline/s-textarea-state-is-readonly-dark.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:745ebf4efc3f9f221ffad3096785b24899503d4e143de242e2cfad28b1315303 -size 1849 +oid sha256:a1019e569553069180e79d2d8e9f12c683427757e709f32dee1ee50ff8cb1dba +size 2035 diff --git a/screenshots/Webkit/baseline/s-textarea-state-is-readonly-light.png b/screenshots/Webkit/baseline/s-textarea-state-is-readonly-light.png index 7b176c1356..0100533659 100644 --- a/screenshots/Webkit/baseline/s-textarea-state-is-readonly-light.png +++ b/screenshots/Webkit/baseline/s-textarea-state-is-readonly-light.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f0bd5239d5067f746dc89694fed61956ca92dad241fad2fae1ba9642a253218f -size 1769 +oid sha256:c8471509338715f5c96b83ee7c96ecef5e6650b669282d412c1348f807f993de +size 1997