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

@ -19,41 +19,40 @@ export type PropsType = Readonly<{
value?: string | number;
}>;
export function Select({
disabled,
moduleClassName,
name,
onChange,
options,
value,
}: PropsType): JSX.Element {
const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
onChange(event.target.value);
};
export const Select = React.forwardRef(
(
{ disabled, moduleClassName, name, onChange, options, value }: PropsType,
ref: React.Ref<HTMLSelectElement>
): JSX.Element => {
const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
onChange(event.target.value);
};
return (
<div className={classNames(['module-select', moduleClassName])}>
<select
disabled={disabled}
name={name}
value={value}
onChange={onSelectChange}
>
{options.map(
({ disabled: optionDisabled, text, value: optionValue }) => {
return (
<option
disabled={optionDisabled}
value={optionValue}
key={optionValue}
aria-label={text}
>
{text}
</option>
);
}
)}
</select>
</div>
);
}
return (
<div className={classNames(['module-select', moduleClassName])}>
<select
disabled={disabled}
name={name}
value={value}
onChange={onSelectChange}
ref={ref}
>
{options.map(
({ disabled: optionDisabled, text, value: optionValue }) => {
return (
<option
disabled={optionDisabled}
value={optionValue}
key={optionValue}
aria-label={text}
>
{text}
</option>
);
}
)}
</select>
</div>
);
}
);