The AdaptiveMode for components like DatePicker and DropdownList is a nice new feature.
Whould be nice if it is implemented on all such component types, like e.d. (Flat)ColorPicker component
Hi,
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.
Suggestion:
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.
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'
});
The colorpicker is configured with positionMode 'absolute' forcing body to resize instead of repositioning the popup if it would go off screen.
https://stackblitz.com/edit/angular-itnxyg?file=app/app.component.ts
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'
});