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

Merge pull request #4976 from matrix-org/t3chguy/a11y-toolbar-breadcrumbs

Browse source 
Wire up new room list breadcrumbs as an ARIA Toolbar
This commit is contained in:
Michael Telatynski 2020-07-16 12:52:59 +01:00 • committed by GitHub
commit f4da1b6f6b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 135 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/elements/AccessibleTooltipButton.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
*/
import React from 'react';
import classnames from 'classnames';
import classNames from 'classnames';
import AccessibleButton from "./AccessibleButton";
import {IProps} from "./AccessibleButton";
@ -52,15 +52,11 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
};
render() {
const {title, children, ...props} = this.props;
const tooltipClassName = classnames(
"mx_AccessibleTooltipButton_tooltip",
this.props.tooltipClassName,
);
const {title, children, tooltipClassName, ...props} = this.props;
const tip = this.state.hover ? <Tooltip
className="mx_AccessibleTooltipButton_container"
tooltipClassName={tooltipClassName}
tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
label={title}
/> : <div />;
return (

11
src/components/views/rooms/RoomBreadcrumbs2.tsx
View file

@ -25,7 +25,8 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { CSSTransition } from "react-transition-group";
import RoomListStore from "../../../stores/room-list/RoomListStore2";
import { DefaultTagID } from "../../../stores/room-list/models";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
import Toolbar from "../../../accessibility/Toolbar";
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
@ -86,7 +87,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
const roomTags = RoomListStore.instance.getTagsForRoom(r);
const roomTag = roomTags.includes(DefaultTagID.DM) ? DefaultTagID.DM : roomTags[0];
return (
<AccessibleTooltipButton
<RovingAccessibleTooltipButton
className="mx_RoomBreadcrumbs2_crumb"
key={r.roomId}
onClick={() => this.viewRoom(r, i)}
@ -101,7 +102,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
displayBadge={true}
forceCount={true}
/>
</AccessibleTooltipButton>
</RovingAccessibleTooltipButton>
);
});
@ -112,9 +113,9 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
appear={true} in={this.state.doAnimation} timeout={640}
classNames='mx_RoomBreadcrumbs2'
>
<div className='mx_RoomBreadcrumbs2'>
<Toolbar className='mx_RoomBreadcrumbs2'>
{tiles.slice(this.state.skipFirst ? 1 : 0)}
</div>
</Toolbar>
</CSSTransition>
);
} else {