Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Keep number field in focus when pressing dialpad buttons #6520

Merged
merged 6 commits into from
Aug 12, 2021
Merged

Keep number field in focus when pressing dialpad buttons #6520

merged 6 commits into from
Aug 12, 2021

Conversation

anoadragon453
Copy link
Member

@anoadragon453 anoadragon453 commented Jul 30, 2021 •
edited by github-actions bot
Loading

This PR prevents the dial pad text entry field from losing focus whenever a dial pad digit or the backspace button is pressed. This is useful as you can continue to use your keyboard to enter digits after you've clicked on a digit or the backspace button with the mouse.

Note that the in-call dial pad does not feature a backspace button.

Before:

before-focus

After:

Peek 2021-07-30 18-42

Signed-off-by: Andrew Morgan <[email protected]>

Notes: Prevent the number field in the dial pad from losing keyboard focus when a digit or the backspace button is pressed.

Preview: https://61155ddddcb64a08fdbe311f--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

@anoadragon453 anoadragon453 requested a review from a team July 30, 2021 17:59
@anoadragon453 anoadragon453 added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Jul 30, 2021
turt2live
turt2live approved these changes Jul 30, 2021
View reviewed changes
Copy link
Member

@turt2live turt2live left a comment

Choose a reason for hiding this comment

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

is the dial pad easy to get access to as a regular user? If so, I'd like to see this run by the accessibility community to ensure it's not breaking any patterns they might have.

@anoadragon453
Copy link
Member Author

The current plan is to test the accessibility this week as part of a general accessibility test for other parts of the app.

@t3chguy t3chguy self-requested a review August 2, 2021 12:43
@t3chguy
Copy link
Member

t3chguy commented Aug 4, 2021 •
edited
Loading

So there are major accessibility issues in the 1:1 voip area, not all related to this PR however

  1. the buttons have no labels so as a blind user I'd have no idea which one is the keypad, they're all just "button"
  2. the buttons vanish visually whilst the user's keyboard focus is on them
  3. backspace button in dial pad missing label "button"
    image
  4. Not sure how great the auto-focus of the field is for keyboard accessibility, if I am trying to interact with the buttons, being sent to the input is jarring and means I have to tab a bunch of times to get back
  5. Call button is missing any label "button"
    image

@anoadragon453
Copy link
Member Author

anoadragon453 commented Aug 4, 2021 •
edited
Loading

@t3chguy Thanks for testing - it was sorely needed! I can fix up 4. in this PR. Would it be best to put the rest in separate (or just one meta) issue(s) perhaps?

@t3chguy
Copy link
Member

t3chguy commented Aug 4, 2021

probably one issue regarding 1:1 voip accessibility would be fine for the other points

@anoadragon453
Copy link
Member Author

@t3chguy should hopefully have covered them all. Thanks for the review, obviously my typescript type game is still lacking!

t3chguy
t3chguy approved these changes Aug 12, 2021
View reviewed changes
Copy link
Member

@t3chguy t3chguy left a comment

Choose a reason for hiding this comment

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

:shipit:

@anoadragon453 anoadragon453 merged commit 1ad35b1 into develop Aug 12, 2021
@anoadragon453 anoadragon453 deleted the anoa/dialpad_field_focus branch August 12, 2021 17:58
@anoadragon453 anoadragon453 mentioned this pull request Aug 12, 2021
Closed
5 tasks
Palid added a commit that referenced this pull request Aug 13, 2021
@Palid
Merge remote-tracking branch 'origin/develop' into gsouquet/fix-backd…
5f9b55e 
…rop-filter

* origin/develop: (1278 commits)
  Add a little padding
  Keep number field in focus when pressing dialpad buttons (#6520)
  Remove old version
  Fix video call persisting when widget removed
  Update link to matrix-js-sdk CONTRIBUTING file (#6557)
  $toast-bg-color -> $system
  $system-... -> $system
  Iterate PR based on feedback
  Remove unnecessary code
  Use AccessibleTooltipButton
  Just upload the PR object itself
  Edit PR Description instead of commenting
  publish the right directory
  Fix Netflify builds from fork PRs
  This doesn't need to be here as it was moved into CallViewButtons
  Make scrollbar dot transparent
  Iterate PR based on feedback
  Don't set hidden RRs labs setting at account level
  Add a comment for weirdly placed div
  Add full class names to animations.scss
  ...
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@t3chguy t3chguy t3chguy approved these changes

@turt2live turt2live turt2live approved these changes

Assignees
No one assigned
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@anoadragon453 @t3chguy @turt2live