Set aria-selected property for chat colors

This commit is contained in:
Josh Perez 2023-06-16 08:20:57 -07:00 committed by GitHub
parent e9aa30f5bf
commit a5c6db096b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -179,6 +179,7 @@ export function ChatColorPicker({
{ConversationColors.map((color, i) => ( {ConversationColors.map((color, i) => (
<div <div
aria-label={color} aria-label={color}
aria-selected={color === selectedColor}
className={classNames( className={classNames(
`ChatColorPicker__bubble ChatColorPicker__bubble--${color}`, `ChatColorPicker__bubble ChatColorPicker__bubble--${color}`,
{ {
@ -192,7 +193,7 @@ export function ChatColorPicker({
onSelectColor(color); onSelectColor(color);
} }
}} }}
role="button" role="option"
tabIndex={0} tabIndex={0}
ref={i === 0 ? focusRef : undefined} ref={i === 0 ? focusRef : undefined}
/> />
@ -311,6 +312,7 @@ function CustomColorBubble({
const bubble = ( const bubble = (
<div <div
aria-label={colorId} aria-label={colorId}
aria-selected={isSelected}
className={classNames({ className={classNames({
ChatColorPicker__bubble: true, ChatColorPicker__bubble: true,
'ChatColorPicker__bubble--custom-selected': isSelected, 'ChatColorPicker__bubble--custom-selected': isSelected,
@ -322,7 +324,7 @@ function CustomColorBubble({
handleClick(ev); handleClick(ev);
} }
}} }}
role="button" role="option"
tabIndex={0} tabIndex={0}
style={{ style={{
...getCustomColorStyle(color), ...getCustomColorStyle(color),