Set aria-selected property for chat colors
This commit is contained in:
parent
e9aa30f5bf
commit
a5c6db096b
1 changed files with 4 additions and 2 deletions
|
@ -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),
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue