Use aria-expanded for avatar popup menu
This commit is contained in:
parent
b619d2ee5c
commit
073b434004
2 changed files with 19 additions and 3 deletions
ts/components
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Add table
Reference in a new issue