imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Iterate landmarks around the app in order to improve a11y (#12064)

Browse source 
* Iterate landmarks around the app in order to improve a11y

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add missing aria-label

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* i18n

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots which have changed a fraction due to default heading margins being different in different landmarks

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-12-20 15:32:24 +00:00 • committed by GitHub
parent af31965866
commit 0a881e2123
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 68 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/emojipicker/EmojiPicker.tsx
View file

@ -362,7 +362,12 @@ class EmojiPicker extends React.Component<IProps, IState> {
{({ onKeyDownHandler }) => {
let heightBefore = 0;
return (
<div className="mx_EmojiPicker" data-testid="mx_EmojiPicker" onKeyDown={onKeyDownHandler}>
<section
className="mx_EmojiPicker"
data-testid="mx_EmojiPicker"
onKeyDown={onKeyDownHandler}
aria-label={_t("a11y|emoji_picker")}
>
<Header categories={this.categories} onAnchorClick={this.scrollToCategory} />
<Search
query={this.state.filter}
@ -407,7 +412,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
selectedEmojis={this.props.selectedEmojis}
/>
)}
</div>
</section>
);
}}
</RovingTabIndexProvider>

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

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { AriaRole } from "react";
import classNames from "classnames";
import { Resizable, Size } from "re-resizable";
import { Room } from "matrix-js-sdk/src/matrix";
@ -42,6 +42,7 @@ interface IProps {
resizeNotifier: ResizeNotifier;
showApps?: boolean; // Should apps be rendered
maxHeight: number;
role?: AriaRole;
}
interface IState {
@ -294,7 +295,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
}
return (
<div className={classes}>
<div role={this.props.role} className={classes}>
{drawer}
{spinner}
</div>

2
src/components/views/rooms/AuxPanel.tsx
View file

@ -65,7 +65,7 @@ export default class AuxPanel extends React.Component<IProps> {
}
return (
<AutoHideScrollbar className="mx_AuxPanel">
<AutoHideScrollbar role="region" className="mx_AuxPanel">
{this.props.children}
{appsDrawer}
{callView}

2
src/components/views/rooms/MessageComposer.tsx
View file

@ -602,6 +602,8 @@ export class MessageComposer extends React.Component<IProps, IState> {
className={classes}
ref={this.ref}
aria-describedby={this.state.recordingTimeLeftSeconds ? this.tooltipId : undefined}
role="region"
aria-label={_t("a11y|message_composer")}
>
{recordingTooltip}
<div className="mx_MessageComposer_wrapper">

2
src/components/views/rooms/RoomHeader.tsx
View file

@ -182,7 +182,7 @@ export default function RoomHeader({
)}
</Box>
</button>
<Flex as="nav" align="center" gap="var(--cpd-space-2x)">
<Flex align="center" gap="var(--cpd-space-2x)">
{additionalButtons?.map((props) => {
const label = props.label();

4
src/components/views/rooms/RoomListHeader.tsx
View file

@ -409,7 +409,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
}
return (
<div className="mx_RoomListHeader">
<aside className="mx_RoomListHeader" aria-label={_t("room|context_menu|title")}>
{contextMenuButton}
{pendingActionSummary ? (
<TooltipTarget label={pendingActionSummary}>
@ -427,7 +427,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
)}
{contextMenu}
</div>
</aside>
);
};

2
src/components/views/rooms/RoomPreviewBar.tsx
View file

@ -720,7 +720,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
);
return (
<div className={classes}>
<div role="complementary" className={classes}>
<div className="mx_RoomPreviewBar_message">
{titleElement}
{subTitleElements}

5
src/components/views/spaces/SpacePanel.tsx
View file

@ -364,10 +364,11 @@ const SpacePanel: React.FC = () => {
onDragEndHandler();
}}
>
<div
<nav
className={classNames("mx_SpacePanel", { collapsed: isPanelCollapsed })}
onKeyDown={onKeyDownHandler}
ref={ref}
aria-label={_t("common|spaces")}
>
<UserMenu isPanelCollapsed={isPanelCollapsed}>
<AccessibleTooltipButton
@ -406,7 +407,7 @@ const SpacePanel: React.FC = () => {
</Droppable>
<QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
</div>
</nav>
</DragDropContext>
)}
</RovingTabIndexProvider>

21
src/components/views/voip/CallView.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { FC, ReactNode, useState, useContext, useEffect, useMemo, useRef, useCallback } from "react";
import React, { FC, ReactNode, useState, useContext, useEffect, useMemo, useRef, useCallback, AriaRole } from "react";
import classNames from "classnames";
import { logger } from "matrix-js-sdk/src/logger";
import { defer, IDeferred } from "matrix-js-sdk/src/utils";
@ -297,9 +297,10 @@ interface StartCallViewProps {
resizing: boolean;
call: Call | null;
setStartingCall: (value: boolean) => void;
role?: AriaRole;
}
const StartCallView: FC<StartCallViewProps> = ({ room, resizing, call, setStartingCall }) => {
const StartCallView: FC<StartCallViewProps> = ({ room, resizing, call, setStartingCall, role }) => {
const cli = useContext(MatrixClientContext);
// Since connection has to be split across two different callbacks, we
@ -348,7 +349,7 @@ const StartCallView: FC<StartCallViewProps> = ({ room, resizing, call, setStarti
}, [call, connectDeferred]);
return (
<div className="mx_CallView">
<div className="mx_CallView" role={role}>
{connected ? null : <Lobby room={room} connect={connect} />}
{call !== null && (
<AppTile
@ -369,9 +370,10 @@ interface JoinCallViewProps {
room: Room;
resizing: boolean;
call: Call;
role?: AriaRole;
}
const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call }) => {
const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call, role }) => {
const cli = useContext(MatrixClientContext);
const connected = isConnected(useConnectionState(call));
const members = useParticipatingMembers(call);
@ -415,7 +417,7 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call }) => {
}
return (
<div className="mx_CallView">
<div className="mx_CallView" role={role}>
{lobby}
{/* We render the widget even if we're disconnected, so it stays loaded */}
<AppTile
@ -439,16 +441,19 @@ interface CallViewProps {
* button will create a call if there isn't already one.
*/
waitForCall: boolean;
role?: AriaRole;
}
export const CallView: FC<CallViewProps> = ({ room, resizing, waitForCall }) => {
export const CallView: FC<CallViewProps> = ({ room, resizing, waitForCall, role }) => {
const call = useCall(room.roomId);
const [startingCall, setStartingCall] = useState(false);
if (call === null || startingCall) {
if (waitForCall) return null;
return <StartCallView room={room} resizing={resizing} call={call} setStartingCall={setStartingCall} />;
return (
<StartCallView room={room} resizing={resizing} call={call} setStartingCall={setStartingCall} role={role} />
);
} else {
return <JoinCallView room={room} resizing={resizing} call={call} />;
return <JoinCallView room={room} resizing={resizing} call={call} role={role} />;
}
};