PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #3543 from matrix-org/t3chguy/timeline_keyboard_focus

Browse source 
Don't intercept TAB on the app outside of the composer, fix tabIndex > 0
This commit is contained in:
Michael Telatynski 2019-10-10 17:52:10 +01:00 committed by GitHub
commit dcc948f43d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 6 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.scss
View file

@ -119,7 +119,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
// accessible (focusable) components. Not intended for buttons, but // accessible (focusable) components. Not intended for buttons, but
// should be used on things like focusable containers where the outline // should be used on things like focusable containers where the outline
// is usually not helping anyone. // is usually not helping anyone.
.mx_HiddenFocusable { *:focus:not(.focus-visible) {
outline: none; outline: none;
} }

4
res/css/views/elements/_AccessibleButton.scss
View file

@ -18,10 +18,6 @@ limitations under the License.
cursor: pointer; cursor: pointer;
} }
.mx_AccessibleButton:focus:not(.focus-visible) {
outline: 0;
}
.mx_AccessibleButton_disabled { .mx_AccessibleButton_disabled {
cursor: default; cursor: default;
} }

1
src/components/structures/ContextualMenu.js
View file

@ -176,7 +176,6 @@ export default class ContextualMenu extends React.Component {
const menuClasses = classNames({ const menuClasses = classNames({
'mx_ContextualMenu': true, 'mx_ContextualMenu': true,
'mx_HiddenFocusable': true, // hide browser outline
'mx_ContextualMenu_left': !hasChevron && position.left, 'mx_ContextualMenu_left': !hasChevron && position.left,
'mx_ContextualMenu_right': !hasChevron && position.right, 'mx_ContextualMenu_right': !hasChevron && position.right,
'mx_ContextualMenu_top': !hasChevron && position.top, 'mx_ContextualMenu_top': !hasChevron && position.top,

4
src/components/structures/GroupView.js
View file

@ -1223,7 +1223,7 @@ export default createReactClass({
blurToCancel={false} blurToCancel={false}
initialValue={this.state.profileForm.name} initialValue={this.state.profileForm.name}
onValueChanged={this._onNameChange} onValueChanged={this._onNameChange}
tabIndex="1" tabIndex="0"
dir="auto" />; dir="auto" />;
shortDescNode = <EditableText ref="descriptionEditor" shortDescNode = <EditableText ref="descriptionEditor"
@ -1233,7 +1233,7 @@ export default createReactClass({
blurToCancel={false} blurToCancel={false}
initialValue={this.state.profileForm.short_description} initialValue={this.state.profileForm.short_description}
onValueChanged={this._onShortDescChange} onValueChanged={this._onShortDescChange}
tabIndex="2" tabIndex="0"
dir="auto" />; dir="auto" />;
} else { } else {
const onGroupHeaderItemClick = this.state.isUserMember ? this._onEditClick : null; const onGroupHeaderItemClick = this.state.isUserMember ? this._onEditClick : null;

2
src/components/structures/LoggedInView.js
View file

@ -408,7 +408,7 @@ const LoggedInView = createReactClass({
return; return;
} }
if (!isClickShortcut && !canElementReceiveInput(ev.target)) { if (!isClickShortcut && ev.key !== Key.TAB && !canElementReceiveInput(ev.target)) {
// synchronous dispatch so we focus before key generates input // synchronous dispatch so we focus before key generates input
dis.dispatch({action: 'focus_composer'}, true); dis.dispatch({action: 'focus_composer'}, true);
ev.stopPropagation(); ev.stopPropagation();

2
src/components/views/context_menus/TopLeftMenu.js
View file

@ -108,7 +108,7 @@ export class TopLeftMenu extends React.Component {
</AccessibleButton> </AccessibleButton>
); );
return <div className="mx_TopLeftMenu mx_HiddenFocusable" tabIndex={0} ref={this.props.containerRef}> return <div className="mx_TopLeftMenu" ref={this.props.containerRef}>
<div className="mx_TopLeftMenu_section_noIcon" aria-readonly={true}> <div className="mx_TopLeftMenu_section_noIcon" aria-readonly={true}>
<div>{this.props.displayName}</div> <div>{this.props.displayName}</div>
<div className="mx_TopLeftMenu_greyedText" aria-hidden={true}>{this.props.userId}</div> <div className="mx_TopLeftMenu_greyedText" aria-hidden={true}>{this.props.userId}</div>

2
src/components/views/rooms/BasicMessageComposer.js
View file

@ -553,7 +553,7 @@ export default class BasicMessageEditor extends React.Component {
<div <div
className="mx_BasicMessageComposer_input" className="mx_BasicMessageComposer_input"
contentEditable="true" contentEditable="true"
tabIndex="1" tabIndex="0"
onBlur={this._onBlur} onBlur={this._onBlur}
onFocus={this._onFocus} onFocus={this._onFocus}
onPaste={this._onPaste} onPaste={this._onPaste}