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

Rename branch warnings #17164

Merged
merged 2 commits into from Aug 2, 2023
Merged

Rename branch warnings #17164

merged 2 commits into from Aug 2, 2023

Conversation

tidy-dev
Copy link
Contributor

@tidy-dev tidy-dev commented Aug 2, 2023

xref: https://github.com/github/accessibility-audits/issues/4441

Description

This PR updates the rename branch dialog to place the warnings about a remote branch existing and/or a stash existing to be before the input. It was discussed and determined that these warnings do not have to do with the branch name input itself, but what the result of renaming a branch will do. Therefore, we do not associate this warnings with input. Additionally, we are following the “let the user explore to find results or errors” strategy as "it preserves user expectations about how focus is managed in dialogs, and it suits this particular message’s context and severity." (See comment on accessibility issue). Since the input not has content before it, we can no longer focus it on mount and instead move to the default of the close button so that a screen reader user may have the opportunity to find it by browsing the dialog before the input.

Other notes:

  • The original ticket said that this warning needed to be announced on open. This strategy says that this warning does not meet that severity level. If it did, then it should be a confirm dialog on submit.
  • NVDA automatically pics up this as the dialog description and announces it on open. This is not intentional, but not something we need to prevent. VoiceOver does not and does not automatically announce it. User must browser the dialog to find it.
  • Other possible solutions discussed would be to add an aria-describedby to the dialog or the submit button. But, decided that they didn't make sense for the content.

Screenshots

macOS VoiceOver

CleanShot.2023-08-02.at.11.10.46.mp4

Windows NVDA

CleanShot.2023-08-02.at.11.33.14.mp4

Release notes

Notes: [Improved] The rename dialog warnings are placed before the branch name input.

Copy link
Member

@sergiou87 sergiou87 left a comment

Choose a reason for hiding this comment

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

LGTM and works as described!

@@ -467,7 +470,17 @@ export class Dialog extends React.Component<DialogProps, IDialogState> {
// anchor tag masquerading as a button)
let firstTabbable: HTMLElement | null = null

const closeButton = dialog.querySelector(':scope > header button.close')
const closeButton = dialog.querySelector(
':scope > div.dialog-header button.close'
Copy link
Member

Choose a reason for hiding this comment

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

Ouch! Nice catch!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Which this means if there was a dialog where there were no first suitable focus elements.. it was no longer working as expected and focusing the x... but I believe all of our dialogs have a cancel and/or submit button, thus, why we didn't realize earlier that that querySelector didn't work.

@tidy-dev tidy-dev merged commit 7a925cf into development Aug 2, 2023
7 checks passed
@tidy-dev tidy-dev deleted the rename-branch-warnings branch August 2, 2023 19:34
@tidy-dev tidy-dev added the accessibility Issues related to accessibility improvements label Nov 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Issues related to accessibility improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants