Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better user interface for screen readers and keyboard navigation #2946

Merged
merged 1 commit into from
Feb 3, 2017

Conversation

JaniM
Copy link
Contributor

@JaniM JaniM commented Jan 13, 2017

Changed most button-like divs to actually behave as such (via the new AccessibleButton element). Also made filtering rooms more keyboard friendly.

Signed-off-by: Jani Mustonen janijohannes@kapsi.fi

@richvdh
Copy link
Member

richvdh commented Jan 13, 2017

can you rebase this on latest develop so it doesn't include a load of unrelated changes?

@JaniM JaniM changed the base branch from master to develop January 13, 2017 17:41
@JaniM JaniM force-pushed the hotkey-ux branch 2 times, most recently from b2d1505 to 410e685 Compare January 13, 2017 21:44
@richvdh
Copy link
Member

richvdh commented Jan 13, 2017

Requires matrix-org/matrix-react-sdk#616, ftr

Copy link
Member

@richvdh richvdh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a couple of nits it would be nice to fix

}

}

if (this.props.roomId) {
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
<div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
<div className="mx_RightPanel_headerButton">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are the divs still needed here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't want to touch it just in case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like it'd be fine if the class were to be moved to the button element.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got rid of the divs.

@@ -61,35 +81,42 @@ module.exports = React.createClass({
}
},

_clearSearch: function() {
this.refs.search.value = "";
this.onChange();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should happen automatically?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're kinda right, for reasons that are ... non-obvious. In case you're interested, and for my own reference:

Essentially the onChange callback is a React fabrication. Native-DOM <input> elements have an onchange attribute, but it is only called when the element loses focus.

React actually listens for the input event, and calls the onChange callback when it sees one. Apparently the DOM does not fire an input event when the value is changed from js - which is probably lucky otherwise React would have to jump through hoops to avoid getting stuck in a loop.

What we ought to do here is stick with the react side, and just make the change through react:

this.setState({ searchTerm: "" });

That will trigger a re-render, which will update the DOM.

See also: https://facebook.github.io/react/docs/forms.html#controlled-components.

@tessgadwa tessgadwa mentioned this pull request Jan 24, 2017
71 tasks
@ara4n
Copy link
Member

ara4n commented Feb 2, 2017

@JaniM hang on - i'm confused. i thought this had already landed? or did we only merge the react-sdk half of it?

@richvdh richvdh merged commit 5edb5f6 into element-hq:develop Feb 3, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants