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: 04 Apr 2022 06:13 by ADMIN

The colorpicker is configured with positionMode  'absolute'  forcing body to resize instead of repositioning the popup if it would go off screen.


        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'