PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix accessibility issues around the room list and space panel (#10717)

Browse source 
* Fix room sublist group label being read twice in Orca

* Fix room list sublist notification badges always having a tab stop
This commit is contained in:
Michael Telatynski 2023-05-05 11:09:41 +01:00 committed by GitHub
parent c824c4a858
commit 43ffd89e58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/views/rooms/NotificationBadge.tsx
View file

@ -44,7 +44,7 @@ interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
/**
* 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<XOR<IProps, I
public render(): ReactNode {
/* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
const { notification, showUnsentTooltip, forceCount, onClick } = this.props;
const { notification, showUnsentTooltip, forceCount, onClick, tabIndex } = this.props;
if (notification.isIdle) return null;
if (forceCount) {
@ -135,6 +135,7 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
onClick={onClick}
onMouseOver={this.onMouseOver}
onMouseLeave={this.onMouseLeave}
tabIndex={tabIndex}
>
{tooltip}
</StatelessNotificationBadge>

17
src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
View file

@ -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<Props, ClickableProps>): JSX.Element {
const hideBold = useSettingValue("feature_hidebold");
// Don't show a badge if we don't need to

8
src/components/views/rooms/RoomSublist.tsx
View file

@ -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<IProps, IState> {
title={this.props.isMinimized ? this.props.label : undefined}
>
<span className={collapseClasses} />
<span>{this.props.label}</span>
<span id={getLabelId(this.props.tagId)}>{this.props.label}</span>
</Button>
{this.renderMenu()}
{this.props.isMinimized ? null : badgeContainer}
@ -880,7 +884,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
className={classes}
role="group"
aria-hidden={hidden}
aria-label={this.props.label}
aria-labelledby={getLabelId(this.props.tagId)}
onKeyDown={this.onKeyDown}
>
{this.renderHeader()}