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

Password field: Inconsistent autofocus behavior between the Post Editor and the Site Editor (no autofocus) #52605

Closed
afercia opened this issue Jul 13, 2023 · 1 comment · Fixed by #52634
Assignees
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Site /packages/edit-site [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Jul 13, 2023

Description

Discovered while investigating #52601

Auto-focusing input fields should be avoided for the reasons mentioned in #52601. There's even a jsx-a11y/no-autofocus eslint rule in place that should never be disabled, unless there are very very good reasons to do that.

Besides that, initial hte autofocus behavior on the password field is inconsistent across the Post Editor and the Site Editor.

  • When editing a post or page in the Post editor > Visibility > Password protected: focus stays on the radio button and the password input field is not autofocused.
  • When editing a page in the Site editor > Pages > Any page > Status > Hide this page behind a password, the password input field is autofocused.

Screenshot, from left to right:

  • Post editor, editing a post.
  • Post editor, editing a page.
  • Site editor, editing a page.
Screenshot 2023-07-13 at 16 19 17

I'm not sure why the UI within the popover is different and I'm not sure why in the Site editor Visibility and Status properties are mixed together in the same UI. Besides that, the focus behavior is inconsistent and autofocus should be avoided.

Additionally, some wording is inconsistent, although used on different elements. E.g.:

  • 'Use a secure password' vs. 'Enter a secure password'.
  • 'Password protected' vs. 'Password'.
  • 'Only those with the password can view this post.' vs. 'Hide this page behind a password'

Step-by-step reproduction instructions

  • Go to the Post editor, edit Visibility in the Settings sidebar.
  • Click 'Password protected'.
  • Observe the password input field appears but focus stays on the radio button you previously clicked.
  • Go to the Site editor > Design > Pages > Edit any page.
  • In the Settings sidebar, edit the Status.
  • Click the toggle 'Hide this page behind a password'.
  • Observe the password input field is autofocused.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [a11y] Keyboard & Focus [Package] Edit Site /packages/edit-site labels Jul 13, 2023
@afercia afercia changed the title Password field: Inconsistent autofocus behavior between the Post Editor and the Site Editor Password field: Inconsistent autofocus behavior between the Post Editor and the Site Editor (no autofocus) Jul 13, 2023
@afercia
Copy link
Contributor Author

afercia commented Jul 13, 2023

Additionally, just noticed:

  • In the Post editor, the password input field is of type="text' so that users can actually see the password they enter.
  • Instead, in the Site editor, the password input field is of type="password'. There is no way users can see the password they are entering. While this should be reported and addressed di a separate issue, I wonder how this filed is any usable.

Screenshot:

Screenshot 2023-07-13 at 16 49 36

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Edit Site /packages/edit-site [Type] Bug An existing feature does not function as intended
Projects
None yet
2 participants