OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #4295 from matrix-org/t3chguy/a11y2 

Accessibility fixed for Event List Summary and Composer Format Bar
pull/21833/head
Michael Telatynski 2020-03-31 09:41:20 +01:00 committed by GitHub
parent 1c5b7bf132 2ff16844e5
commit c094afbbe6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/views/elements/EventListSummary.js
View File

@ -20,6 +20,7 @@ import MemberAvatar from '../avatars/MemberAvatar';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import {MatrixEvent, RoomMember} from "matrix-js-sdk"; import {MatrixEvent, RoomMember} from "matrix-js-sdk";
import {useStateToggle} from "../../../hooks/useStateToggle"; import {useStateToggle} from "../../../hooks/useStateToggle";
import AccessibleButton from "./AccessibleButton";
const EventListSummary = ({events, children, threshold=3, onToggle, startExpanded, summaryMembers=[], summaryText}) => { const EventListSummary = ({events, children, threshold=3, onToggle, startExpanded, summaryMembers=[], summaryText}) => {
const [expanded, toggleExpanded] = useStateToggle(startExpanded); const [expanded, toggleExpanded] = useStateToggle(startExpanded);
@ -42,24 +43,15 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
); );
} }
let body;
if (expanded) { if (expanded) {
return ( body = <React.Fragment>
<div className="mx_EventListSummary" data-scroll-tokens={eventIds}> <div className="mx_EventListSummary_line">&nbsp;</div>
<div className={"mx_EventListSummary_toggle"} onClick={toggleExpanded}> { children }
{ _t('collapse') } </React.Fragment>;
</div> } else {
<div className="mx_EventListSummary_line">&nbsp;</div> const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
{ children } body = (
</div>
);
}
const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
return (
<div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
<div className={"mx_EventListSummary_toggle"} onClick={toggleExpanded}>
{ _t('expand') }
</div>
<div className="mx_EventTile_line"> <div className="mx_EventTile_line">
<div className="mx_EventTile_info"> <div className="mx_EventTile_info">
<span className="mx_EventListSummary_avatars" onClick={toggleExpanded}> <span className="mx_EventListSummary_avatars" onClick={toggleExpanded}>
@ -70,6 +62,15 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
</span> </span>
</div> </div>
</div> </div>
);
}
return (
<div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
<AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
{ expanded ? _t('collapse') : _t('expand') }
</AccessibleButton>
{ body }
</div> </div>
); );
}; };

16
src/components/views/rooms/MessageComposerFormatBar.js
View File

@ -19,12 +19,13 @@ import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import classNames from 'classnames'; import classNames from 'classnames';
import AccessibleButton from "../elements/AccessibleButton";
export default class MessageComposerFormatBar extends React.PureComponent { export default class MessageComposerFormatBar extends React.PureComponent {
static propTypes = { static propTypes = {
onAction: PropTypes.func.isRequired, onAction: PropTypes.func.isRequired,
shortcuts: PropTypes.object.isRequired, shortcuts: PropTypes.object.isRequired,
} };
constructor(props) { constructor(props) {
super(props); super(props);
@ -64,7 +65,7 @@ class FormatButton extends React.PureComponent {
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
shortcut: PropTypes.string, shortcut: PropTypes.string,
visible: PropTypes.bool, visible: PropTypes.bool,
} };
render() { render() {
const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip'); const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
@ -82,11 +83,12 @@ class FormatButton extends React.PureComponent {
return ( return (
<InteractiveTooltip content={tooltipContent} forceHidden={!this.props.visible}> <InteractiveTooltip content={tooltipContent} forceHidden={!this.props.visible}>
<span aria-label={this.props.label} <AccessibleButton
role="button" as="span"
onClick={this.props.onClick} role="button"
className={className}> onClick={this.props.onClick}
</span> aria-label={this.props.label}
className={className} />
</InteractiveTooltip> </InteractiveTooltip>
); );
} }