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

Implement roving tab index context based magic thing and demo on LeftPanel

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-01-15 02:44:22 +00:00
parent 23633abc10
commit 5252cf4c45
7 changed files with 242 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/components/structures/RoomSubList.js
View file

@ -31,6 +31,7 @@ import PropTypes from 'prop-types';
import RoomTile from "../views/rooms/RoomTile";
import LazyRenderList from "../views/elements/LazyRenderList";
import {_t} from "../../languageHandler";
import {RovingTabIndex, RovingTabIndexGroup} from "../../contexts/RovingTabIndexContext";
// turn this on for drop & drag console debugging galore
const debug = false;
@ -272,20 +273,32 @@ export default class RoomSubList extends React.PureComponent {
// Wrap the contents in a div and apply styles to the child div so that the browser default outline works
if (subListNotifCount > 0) {
badge = (
<AccessibleButton className={badgeClasses} onClick={this._onNotifBadgeClick} aria-label={_t("Jump to first unread room.")}>
<RovingTabIndex
component={AccessibleButton}
useInputRef
className={badgeClasses}
onClick={this._onNotifBadgeClick}
aria-label={_t("Jump to first unread room.")}
>
<div>
{ FormattingUtils.formatCount(subListNotifCount) }
</div>
</AccessibleButton>
</RovingTabIndex>
);
} else if (this.props.isInvite && this.props.list.length) {
// no notifications but highlight anyway because this is an invite badge
badge = (
<AccessibleButton className={badgeClasses} onClick={this._onInviteBadgeClick} aria-label={_t("Jump to first invite.")}>
<RovingTabIndex
component={AccessibleButton}
useInputRef
className={badgeClasses}
onClick={this._onInviteBadgeClick}
aria-label={_t("Jump to first invite.")}
>
<div>
{ this.props.list.length }
</div>
</AccessibleButton>
</RovingTabIndex>
);
}
}
@ -308,7 +321,9 @@ export default class RoomSubList extends React.PureComponent {
let addRoomButton;
if (this.props.onAddRoom) {
addRoomButton = (
<AccessibleTooltipButton
<RovingTabIndex
component={AccessibleTooltipButton}
useInputRef
onClick={this.onAddRoom}
className="mx_RoomSubList_addRoom"
title={this.props.addRoomLabel || _t("Add room")}
@ -327,12 +342,13 @@ export default class RoomSubList extends React.PureComponent {
chevron = (<div className={chevronClasses} />);
}
return (
return <RovingTabIndexGroup>
<div className="mx_RoomSubList_labelContainer" title={title} ref={this._header} onKeyDown={this.onHeaderKeyDown}>
<AccessibleButton
<RovingTabIndex
component={AccessibleButton}
useInputRef
onClick={this.onClick}
className="mx_RoomSubList_label"
tabIndex={0}
aria-expanded={!isCollapsed}
inputRef={this._headerButton}
role="treeitem"
@ -341,11 +357,11 @@ export default class RoomSubList extends React.PureComponent {
{ chevron }
<span>{this.props.label}</span>
{ incomingCall }
</AccessibleButton>
</RovingTabIndex>
{ badge }
{ addRoomButton }
</div>
);
</RovingTabIndexGroup>;
}
checkOverflow = () => {