diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx index 51480df1fc6..d5692b6b396 100644 --- a/src/components/views/rooms/NotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge.tsx @@ -44,7 +44,7 @@ interface IClickableProps extends IProps, React.InputHTMLAttributes { /** * If specified will return an AccessibleButton instead of a div. */ - onClick?(ev: React.MouseEvent): void; + onClick(ev: React.MouseEvent): void; } interface IState { @@ -112,7 +112,7 @@ export default class NotificationBadge extends React.PureComponent {tooltip} diff --git a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx index 113d42df34e..d6083507f0a 100644 --- a/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx @@ -21,19 +21,32 @@ import { formatCount } from "../../../../utils/FormattingUtils"; import AccessibleButton from "../../elements/AccessibleButton"; import { NotificationColor } from "../../../../stores/notifications/NotificationColor"; import { useSettingValue } from "../../../../hooks/useSettings"; +import { XOR } from "../../../../@types/common"; interface Props { symbol: string | null; count: number; color: NotificationColor; - onClick?: (ev: MouseEvent) => void; onMouseOver?: (ev: MouseEvent) => void; onMouseLeave?: (ev: MouseEvent) => void; children?: ReactNode; label?: string; } -export function StatelessNotificationBadge({ symbol, count, color, ...props }: Props): JSX.Element { +interface ClickableProps extends Props { + /** + * If specified will return an AccessibleButton instead of a div. + */ + onClick(ev: React.MouseEvent): void; + tabIndex?: number; +} + +export function StatelessNotificationBadge({ + symbol, + count, + color, + ...props +}: XOR): JSX.Element { const hideBold = useSettingValue("feature_hidebold"); // Don't show a badge if we don't need to diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index bca5388d1e3..b94a4f2b0bb 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -85,6 +85,10 @@ interface IProps { onListCollapse?: (isExpanded: boolean) => void; } +function getLabelId(tagId: TagID): string { + return `mx_RoomSublist_label_${tagId}`; +} + // TODO: Use re-resizer's NumberSize when it is exposed as the type interface ResizeDelta { width: number; @@ -712,7 +716,7 @@ export default class RoomSublist extends React.Component { title={this.props.isMinimized ? this.props.label : undefined} > - {this.props.label} + {this.props.label} {this.renderMenu()} {this.props.isMinimized ? null : badgeContainer} @@ -880,7 +884,7 @@ export default class RoomSublist extends React.Component { className={classes} role="group" aria-hidden={hidden} - aria-label={this.props.label} + aria-labelledby={getLabelId(this.props.tagId)} onKeyDown={this.onKeyDown} > {this.renderHeader()}