Accessibility fixes for ConversationDetails and AvatarPopup
This commit is contained in:
parent
56031336a9
commit
53bc13a401
9 changed files with 203 additions and 81 deletions
|
@ -18,6 +18,8 @@ import { SampleMessageBubbles } from './SampleMessageBubbles';
|
|||
import { PanelRow } from './conversation/conversation-details/PanelRow';
|
||||
import { getCustomColorStyle } from '../util/getCustomColorStyle';
|
||||
|
||||
import { useDelayedRestoreFocus } from '../hooks/useRestoreFocus';
|
||||
|
||||
type CustomColorDataType = {
|
||||
id?: string;
|
||||
value?: CustomColorType;
|
||||
|
@ -84,6 +86,8 @@ export const ChatColorPicker = ({
|
|||
CustomColorDataType | undefined
|
||||
>(undefined);
|
||||
|
||||
const [focusRef] = useDelayedRestoreFocus();
|
||||
|
||||
const onSelectColor = (
|
||||
conversationColor: ConversationColorType,
|
||||
customColorData?: { id: string; value: CustomColorType }
|
||||
|
@ -172,7 +176,7 @@ export const ChatColorPicker = ({
|
|||
/>
|
||||
<hr />
|
||||
<div className="ChatColorPicker__bubbles">
|
||||
{ConversationColors.map(color => (
|
||||
{ConversationColors.map((color, i) => (
|
||||
<div
|
||||
aria-label={color}
|
||||
className={classNames(
|
||||
|
@ -190,6 +194,7 @@ export const ChatColorPicker = ({
|
|||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
ref={i === 0 ? focusRef : undefined}
|
||||
/>
|
||||
))}
|
||||
{Object.keys(customColors).map(colorId => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue