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

Makes twitter tip actions keyboard accessible #3253

Merged
merged 1 commit into from
Aug 27, 2019
Merged

Makes twitter tip actions keyboard accessible #3253

merged 1 commit into from
Aug 27, 2019

Conversation

ryanml
Copy link
Contributor

@ryanml ryanml commented Aug 24, 2019

Fixes: brave/brave-browser#5791

Screen Shot 2019-08-24 at 1 15 33 PM

Note: It wasn't mentioned in the document, but tab selecting the tip actions didn't work at all, so this PR fixes that as well.

Submitter Checklist:

Test Plan:

Test plan is specified in issue

Reviewer Checklist:

  • New files have MPL-2.0 license header.
  • Request a security/privacy review as needed.
  • Adequate test coverage exists to prevent regressions
  • Verify test plan is specified in PR before merging to source

After-merge Checklist:

  • The associated issue milestone is set to the smallest version that the
    changes has landed on.
  • All relevant documentation has been updated.

@ryanml ryanml added this to the 0.71.x - Nightly milestone Aug 24, 2019
@ryanml ryanml self-assigned this Aug 24, 2019
@ryanml ryanml force-pushed the fix-5791 branch 2 times, most recently from 28cb81e to 503f316 Compare August 24, 2019 20:38
@@ -275,6 +277,21 @@ document.addEventListener('visibilitychange', function () {
}
})

// Listens for enter key when Tip action is tab-highlighted
document.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

RIP KeyboardEvent.keyCode 👻

emerick
emerick previously approved these changes Aug 24, 2019
Copy link
Contributor

@emerick emerick left a comment

Choose a reason for hiding this comment

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

This is great! LGTM

Copy link
Contributor

@NejcZdovc NejcZdovc left a comment

Choose a reason for hiding this comment

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

please check CI

ERROR in [at-loader] ./components/brave_rewards/resources/extension/brave_rewards/content_scripts/twitter.ts:284:26 
22:47:26      TS2531: Object is possibly 'null'.
22:47:26  
22:47:26  ERROR in [at-loader] ./components/brave_rewards/resources/extension/brave_rewards/content_scripts/twitter.ts:287:25 
22:47:26      TS2531: Object is possibly 'null'.
22:47:26  
22:47:26  ERROR in [at-loader] ./components/brave_rewards/resources/extension/brave_rewards/content_scripts/twitter.ts:287:25 
22:47:26      TS2531: Object is possibly 'null'.
22:47:26  
22:47:26  ERROR in [at-loader] ./components/brave_rewards/resources/extension/brave_rewards/content_scripts/twitter.ts:289:19 
22:47:26      TS2339: Property 'click' does not exist on type 'Element'.

Copy link
Member

@petemill petemill left a comment

Choose a reason for hiding this comment

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

This will need to work on space (as well as enter) enter, like the other twitter actions. I wonder if just making it a element will have the same effect without this hack, and then also gain the other built-in accessibility features? If not possible, then please at least add support for space unless you see a reason not to.

@@ -275,6 +277,33 @@ document.addEventListener('visibilitychange', function () {
}
})

// Listens for enter key when Tip action is tab-highlighted
document.addEventListener('keydown', function (e) {
if (e.key !== 'Enter' || e.code !== 'Space') {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

KeyboardEvent.key equals a single blank space " " for space bar presses, using the code property for readability

Copy link
Member

@petemill petemill left a comment

Choose a reason for hiding this comment

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

I think you could do this without listening to every single keydown event on the document and could just add the event listener directly to each tip button.

function onTipButtonActivate (...) { ... }

@ryanml
Copy link
Contributor Author

ryanml commented Aug 27, 2019

CI failure unrelated, version mismatch

@ryanml ryanml merged commit e40cdb5 into master Aug 27, 2019
@ryanml ryanml deleted the fix-5791 branch August 27, 2019 02:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Twitter tip actions should be tab-selectable, and accessible via enter key
4 participants