From ce89db66f3299521462f9fb3176d6a169a6376a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Fri, 8 Jul 2022 13:00:55 +0300 Subject: [PATCH] Accessibility for ColorPicker --- src/views/colorpicker/ColorPickerDoc.vue | 96 ++++++++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue index 417900d30..0edbe9805 100755 --- a/src/views/colorpicker/ColorPickerDoc.vue +++ b/src/views/colorpicker/ColorPickerDoc.vue @@ -209,6 +209,102 @@ export default { +
Accessibility
+ +
Screen Reader
+

Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers. + In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.

+ +
Closed State Keyboard Support of Popup ColorPicker
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the color picker button.
spaceOpens the popup and moves focus to the color slider.
+
+ +
Popup Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
enterSelects the color and closes the popup.
spaceSelects the color and closes the popup.
escapeCloses the popup, moves focus to the input.
+
+ +
Color Picker Slider
+
+ + + + + + + + + + + + + +
KeyFunction
arrow keysChanges color.
+
+ +
Hue Slider
+
+ + + + + + + + + + + + + +
KeyFunction
+ + up arrow + down arrow + + Changes hue.
+
+ +
Dependencies

None.