Last Updated: 13 May 2022 05:48 by saerlaith


I've noticed an issue using the ColorPicker with a screen reader. While it is technically usable with a screen reader, practically it is inaccessible and breaks WCAG SC 2.4.1 Name, Role, Value, as it just reads the numeric value of the color, which is extremely hard to parse.

I understand this would be difficult to implement on your default palettes, which have quite a number of colours, but I think at minimum, there should be an override of 'palette' in PaletteSettings.


The palette property could accept an array of objects, like:

public myColors=[{value: '#44403f', colorName: 'dark red'}...];

public myColors=[{value: '#44403f', colorName: 'Default color'}...]

public myColors=['#44403f': 'Default color'}...]

When the array is passed make the aria-label assigned to colorName as well as the hex code as it is now.

I don't know how this will affect your localization packages, but in our system, this would be fine as we handle our localization separately.

The ColorPicker control will be inaccessible until this option is offered.

I think this should also be implemented for the basic palette. This is a general problem with the Palette and not just the color picker.

public myColors=[{value: '#44403f', text: 'Default color'}...]
Last Updated: 22 Apr 2022 11:33 by ADMIN
Created by: Mauro
Comments: 1
Category: ColorPicker
Type: Feature Request
Currently it  is designed to open right only and left is possible only if using RTL config (but this affects text and everything else aswell).

Opening to the right is fine as long as your color picker isn't on the right side of the screen.

        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
        const anchorPosition = <Align>{ horizontal: horizontalAlign, vertical: "bottom" };
        const popupPosition = <Align>{ horizontal: horizontalAlign, vertical: "top" };

        this.popupRef = this.popupService.open({
            anchor: this.activeColor,
            animate: this.popupSettings.animate,
            appendTo: this.popupSettings.appendTo,
            popupAlign: popupPosition,
            anchorAlign: anchorPosition,
            popupClass: 'k-colorpicker-popup',
            content: this.popupTemplate,
            positionMode: 'absolute'