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

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}