Accessibility fixes for ConversationDetails and AvatarPopup

This commit is contained in:
Scott Nonnenberg 2021-10-25 12:11:19 -07:00 committed by GitHub
parent 56031336a9
commit 53bc13a401
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 203 additions and 81 deletions

View file

@ -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 => {