Color Viewer Slider Example Update (slider-1) #1472

jongund · 2020-07-27T18:41:30Z

This is an updated version of the slider 1 example for picking a color.

New features include:

Javascript file that uses a single prototype object for the example.
Use SVG graphics for buttons, thumbs and rail.
Improve high contrast support through use of inline SVG graphics.

Preview Link

Review checklist

spectranaut

code review: I only have SUPER minor comments on the code review, this looks really good! But please do delete the old javascript and css files (slide.js and slider.css) in this PR, and consider the other comments. This is otherwise an approving code review.

test review: The tests as they are look really good, but it does seems like there is a quite a bit of mouse-user functionality that is not tested. We aren't requiring tests of mouse behavior that in the test review right now, but maybe we should make a backlog task for this to not loose track of untested functionality for these widgets?

examples/slider/slider-1.html

spectranaut · 2020-09-03T16:18:37Z

examples/slider/slider-1.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8" />
- <title>Horizontal Slider Example | WAI-ARIA Authoring Practices 1.2</title>
+ <title>Color Picker Slider Example Using SVG | WAI-ARIA Authoring Practices 1.1</title>


Is this really 1.1?

examples/slider/js/slider-1.js

spectranaut · 2020-09-03T16:48:51Z

examples/slider/js/slider-1.js

+
+ColorPickerSliders.prototype.moveSliderTo = function (slider, value) {
+
+ console.log('[moveSliderTo][slider]: ' + slider.sliderNode.classList);


this console log too -- if it's just for debugging I'd remove it!

jongund · 2020-09-03T21:42:04Z

@spectranaut
Valerie, thank you for the feedback on the code, I have updated the example with your suggested changes.

spectranaut

Looks great! :)

jnurthen · 2020-09-15T00:32:08Z

examples/slider/css/slider-1.css

+ text-align: center;
+ padding: 0.25em;
+}
+


Suggest adding
.color-box {
forced-color-adjust: none;
}
so the color box renders the actual color even in high contrast mode.

jnurthen · 2020-09-15T00:35:40Z

examples/slider/slider-1.html

+ <h2 id="id-color-picker">Color Viewer</h2>
+ <div id="id-red" class="label">Red</div>
+ <div class="color-group red">
+ <button class="change dec10" aria-label="decrement red ten" tabindex="-1">


Would aria-label be better as "decrease red by 10"? (and similar for all the others?)

…output elements

github-actions · 2020-10-26T19:49:55Z

Regression test coverage:

Examples without any regression tests:

dialog-modal/alertdialog.html

Examples missing some regression tests:

dialog-modal/datepicker-dialog.html:
- textbox-aria-describedby
menu-button/menu-button-actions-active-descendant.html:
- menu-up-arrow
- menu-down-arrow
- menu-character
slider/slider-color-viewer-mobile.html:
- group-aria-labelledby
slider/slider-color-viewer.html:
- group-aria-labelledby
- button-aria-label
- button-tabindex
toolbar/toolbar.html:
- toolbar-tab
- toolbar-right-arrow
- toolbar-left-arrow
- toolbar-home
- toolbar-end
- toolbar-toggle-esc
- toolbar-toggle-enter-or-space
- toolbar-radio-enter-or-space
- toolbar-radio-down-arrow
- toolbar-radio-up-arrow
- toolbar-button-enter-or-space
- toolbar-menubutton-enter-or-space-or-down-or-up
- toolbar-menu-enter-or-space
- toolbar-menu-down-arrow
- toolbar-menu-up-arrow
- toolbar-menu-escape
- toolbar-spinbutton-down-arrow
- toolbar-spinbutton-up-arrow
- toolbar-spinbutton-page-down
- toolbar-spinbutton-page-up
- toolbar-checkbox-space
- toolbar-link-enter-or-space
- toolbar-spinbutton-role

Example pages with Keyboard or Attribute table rows that do not have data-test-ids:

dialog-modal/alertdialog.html
- "Keyboard Support" table(s):
  - Tab
  - Shift + Tab
  - Escape
  - Command + S
  - Control + S
- "Attributes" table(s):
  - alertdialog
  - aria-labelledby=IDREF
  - aria-describedby=IDREF
  - aria-modal=true
  - alert

SUMMARY:

56 example pages found.
1 example pages have no regression tests.
5 example pages are missing approximately 31 out of approximately 804 tests.

ERROR - missing tests:

Please write missing tests for this report to pass.

jongund · 2021-01-07T19:06:09Z

@spectranaut @nschonni @mcking65
One of the checks for color viewer example is failing because it said I modified "examples\index.html", you can see from the files changed that I am not modifying "examples/index.html". How does this get fixed?

nschonni · 2021-01-07T19:08:26Z

Run npm run reference-tables to update the examples index.html with the new file names

jongund · 2021-01-07T21:35:47Z

Run npm run reference-tables to update the examples index.html with the new file names

@nschonni
Thank you for quick response.
I tried running the command and it did say in "generating index" but it didn't change the examples/index.html file (or anything else as far as I can tell), so no changes to commit.

jongund · 2021-01-07T21:36:45Z

@nschonni
Looks like the problem fixed itself, it's not reporting a code issue anymore.

nschonni · 2021-01-07T21:43:08Z

@jongund there is also a pre-commit hook now, so it looked like it regenerated itself in 403645e

charmarkk

Tested with Windows 10, NVDA 2020.3, JAWS 2020.2012.13; Firefox 84.0.1 and Chrome 87.0.4280.141. All worked as expected as far as documented accessibility functionality, keyboard interaction, Windows HCM, and screen readers were concerned.

@carmacleod, could I tag you in for MacOS a11y tests? My test Mac is with another co-worker at the moment.

a11ydoer · 2021-01-11T21:19:35Z

Since @charmarkk did functionality review agaist on non iOS devices, I only check color picker slider example with mobile support with iphone, iOS VoiceOver

The slider itself works well by annoucing current value or changed value with gesture (See the screen shot with VoiceOver text output).

Question is on increase/decrease button. For example, when "increase red by ten" is touched with gesture, the value changed accordingly. (See the screen shot with VoiceOver text output). However, the changed value itself is not announced although visual user can see the color change in the Color view box. @jongund Should we announce changed current value with button action or it is not necessary?

a11ydoer · 2021-01-11T21:20:40Z

a11ydoer · 2021-01-11T21:28:10Z

Regarding visual design review, we do not have much option since APG examples are not responsive yet. Furthermore, other color picker design examples tend to be 3 dimensional which is complex to implement in terms of accessiblity. (See the screen shot of "color zilla" example, the circle with RGB color combination) Therefore, current color picker implementation with 2D linear slider design is acceptable.

…lider example

jongund · 2021-01-13T00:43:45Z

@nschonni @mcking65
The same problem as the other pull request I had last week, it is finding a problem in the examples/index.html file that I did not modify in the in this pull request.

nschonni · 2021-01-13T00:45:24Z

You deleted files so the index.html is out out of sync. Last time it got regenerated by the pre-commit hook during an unrelated changed, but you can run the script from the previous comment to do it

jongund · 2021-01-14T02:16:39Z

@mcking65
I have removed the color viewer mobile example from this pull request and updated the accessibility documentation. So it is ready for editorial review.

…ontrast mode

jongund · 2021-02-02T19:19:29Z

This pull request is superseded by pull #1746.

updated slider-1 example code

afc761e

jongund changed the title ~~updated slider-1 example for high contrast and mobile support~~ updated color picker slider example: High Contrast, APG Coding Practices and Mobile Support Aug 4, 2020

jongund changed the title ~~updated color picker slider example: High Contrast, APG Coding Practices and Mobile Support~~ Updated color picker slider example: High Contrast, APG Coding Practices and Mobile Support Aug 4, 2020

mcking65 changed the title ~~Updated color picker slider example: High Contrast, APG Coding Practices and Mobile Support~~ Color Picker Slider Example: Improve high contrast support, Conformance with APG coding practices, and mobile support Sep 1, 2020

mcking65 requested review from mcking65 and spectranaut September 1, 2020 09:26

a11ydoer requested a review from jnurthen September 1, 2020 19:03

improved HCM support for slider value

0e18134

spectranaut requested changes Sep 3, 2020

View reviewed changes

jongund added 3 commits September 3, 2020 16:33

updated code based on Valerie's feedback

cc899be

changed title to color viewer, so not to use the word picker

19c86cb

update the name of the javascript prototype

72b346a

jongund requested a review from spectranaut September 3, 2020 21:40

jongund added 2 commits September 3, 2020 16:51

updated documentation

ee9fec2

updated documentation

be338ec

spectranaut approved these changes Sep 8, 2020

View reviewed changes

jnurthen reviewed Sep 15, 2020

View reviewed changes

jnurthen approved these changes Sep 15, 2020

View reviewed changes

jongund added 8 commits September 15, 2020 09:59

update button labels, added forced-color-adjust and focus styling on …

36e3e3f

…output elements

updated rgb output

947b003

restored rbg value

1d4602f

Merge branch 'master' into update-slider-1

8f7f286

updated focus styling for textboxes

677f7a5

updated to use class and update event handler names

045de77

added code pen code

e39dd6d

updated file names and test files

e7560e6

updated links in other examples to point to slider-color-viewer.html

fffca4c

carmacleod self-requested a review October 27, 2020 18:41

Merge branch 'master' into update-slider-1

be4c934

improved code and high contrast support

403645e

updated documentation

9017c71

jongund requested a review from charmarkk January 8, 2021 01:11

update click and mouse move code

efd2314

charmarkk approved these changes Jan 11, 2021

View reviewed changes

jongund added 2 commits January 12, 2021 15:49

deleted mobile support version of color viewer slider example

8e76a45

deleted regressiion test for mobile support version of color viewer s…

ca3898d

…lider example

jongund changed the title ~~Color Picker Slider Example: Improve high contrast support, Conformance with APG coding practices, and mobile support~~ Color Picker Slider Example: Improve high contrast support, Conformance with APG coding practices Jan 12, 2021

jongund changed the title ~~Color Picker Slider Example: Improve high contrast support, Conformance with APG coding practices~~ Color Viewer Slider example update Jan 13, 2021

jongund changed the title ~~Color Viewer Slider example update~~ Color Viewer Slider Example Update Jan 13, 2021

jongund added 3 commits January 13, 2021 17:15

updated accessibility information

39b0fa7

fixed spelling error

69fe34a

updated accessibility information

c177527

updated title

0096fe0

jongund changed the title ~~Color Viewer Slider Example Update~~ Color Viewer Slider Example Update (slider-1) Jan 14, 2021

updated slider styling for better identification of sliders in high c…

bc9e6e1

…ontrast mode

jongund closed this Feb 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Color Viewer Slider Example Update (slider-1) #1472

Color Viewer Slider Example Update (slider-1) #1472

jongund commented Jul 27, 2020 •

edited

Loading

spectranaut left a comment

spectranaut Sep 3, 2020

jongund Sep 3, 2020

spectranaut Sep 3, 2020

jongund Sep 3, 2020

jongund commented Sep 3, 2020

spectranaut left a comment

jnurthen Sep 15, 2020

jnurthen Sep 15, 2020

github-actions bot commented Oct 26, 2020 •

edited

Loading

jongund commented Jan 7, 2021

nschonni commented Jan 7, 2021

jongund commented Jan 7, 2021

jongund commented Jan 7, 2021

nschonni commented Jan 7, 2021

charmarkk left a comment

a11ydoer commented Jan 11, 2021 •

edited

Loading

a11ydoer commented Jan 11, 2021

a11ydoer commented Jan 11, 2021

jongund commented Jan 13, 2021

nschonni commented Jan 13, 2021

jongund commented Jan 14, 2021

jongund commented Feb 2, 2021


		ColorPickerSliders.prototype.moveSliderTo = function (slider, value) {

		console.log('[moveSliderTo][slider]: ' + slider.sliderNode.classList);

Color Viewer Slider Example Update (slider-1) #1472

Color Viewer Slider Example Update (slider-1) #1472

Conversation

jongund commented Jul 27, 2020 • edited Loading

Preview Link

Review checklist

spectranaut left a comment

Choose a reason for hiding this comment

spectranaut Sep 3, 2020

Choose a reason for hiding this comment

jongund Sep 3, 2020

Choose a reason for hiding this comment

spectranaut Sep 3, 2020

Choose a reason for hiding this comment

jongund Sep 3, 2020

Choose a reason for hiding this comment

jongund commented Sep 3, 2020

spectranaut left a comment

Choose a reason for hiding this comment

jnurthen Sep 15, 2020

Choose a reason for hiding this comment

jnurthen Sep 15, 2020

Choose a reason for hiding this comment

github-actions bot commented Oct 26, 2020 • edited Loading

Regression test coverage:

Examples without any regression tests:

Examples missing some regression tests:

Example pages with Keyboard or Attribute table rows that do not have data-test-ids:

SUMMARY:

jongund commented Jan 7, 2021

nschonni commented Jan 7, 2021

jongund commented Jan 7, 2021

jongund commented Jan 7, 2021

nschonni commented Jan 7, 2021

charmarkk left a comment

Choose a reason for hiding this comment

a11ydoer commented Jan 11, 2021 • edited Loading

a11ydoer commented Jan 11, 2021

a11ydoer commented Jan 11, 2021

jongund commented Jan 13, 2021

nschonni commented Jan 13, 2021

jongund commented Jan 14, 2021

jongund commented Feb 2, 2021

jongund commented Jul 27, 2020 •

edited

Loading

github-actions bot commented Oct 26, 2020 •

edited

Loading

a11ydoer commented Jan 11, 2021 •

edited

Loading