Use aria-expanded for avatar popup menu

This commit is contained in:
Josh Perez 2023-05-04 19:41:17 -04:00
parent b619d2ee5c
commit 073b434004
2 changed files with 19 additions and 3 deletions

View file

@ -1,7 +1,13 @@
// Copyright 2018 Signal Messenger, LLC // Copyright 2018 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import type { CSSProperties, MouseEvent, ReactChild, ReactNode } from 'react'; import type {
AriaAttributes,
CSSProperties,
MouseEvent,
ReactChild,
ReactNode,
} from 'react';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { noop } from 'lodash'; import { noop } from 'lodash';
@ -68,7 +74,8 @@ export type Props = {
| { badge: undefined; theme?: ThemeType } | { badge: undefined; theme?: ThemeType }
| { badge: BadgeType; theme: ThemeType } | { badge: BadgeType; theme: ThemeType }
) & ) &
Pick<React.HTMLProps<HTMLDivElement>, 'className'>; Pick<React.HTMLProps<HTMLDivElement>, 'className'> &
AriaAttributes;
const BADGE_PLACEMENT_BY_SIZE = new Map<number, BadgePlacementType>([ const BADGE_PLACEMENT_BY_SIZE = new Map<number, BadgePlacementType>([
[28, { bottom: -4, right: -2 }], [28, { bottom: -4, right: -2 }],
@ -117,6 +124,7 @@ export function Avatar({
sharedGroupNames, sharedGroupNames,
unblurredAvatarPath, unblurredAvatarPath,
}), }),
...ariaProps
}: Props): JSX.Element { }: Props): JSX.Element {
const [imageBroken, setImageBroken] = useState(false); const [imageBroken, setImageBroken] = useState(false);
@ -230,7 +238,12 @@ export function Avatar({
); );
if (onClick) { if (onClick) {
contents = ( contents = (
<button className={contentsClassName} type="button" onClick={onClick}> <button
{...ariaProps}
className={contentsClassName}
type="button"
onClick={onClick}
>
{contentsChildren} {contentsChildren}
</button> </button>
); );

View file

@ -121,6 +121,8 @@ export function MainHeader({
ref={setTargetElement} ref={setTargetElement}
> >
<Avatar <Avatar
aria-expanded={showAvatarPopup}
aria-owns="MainHeader__AvatarPopup"
acceptedMessageRequest acceptedMessageRequest
avatarPath={avatarPath} avatarPath={avatarPath}
badge={badge} badge={badge}
@ -149,6 +151,7 @@ export function MainHeader({
portalElement != null && portalElement != null &&
createPortal( createPortal(
<div <div
id="MainHeader__AvatarPopup"
ref={setPopperElement} ref={setPopperElement}
style={{ ...popper.styles.popper, zIndex: 10 }} style={{ ...popper.styles.popper, zIndex: 10 }}
{...popper.attributes.popper} {...popper.attributes.popper}