Skip to content

Add a new custom label for close button in dialog header #3447

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

Conversation

bsatarnejad
Copy link
Contributor

@bsatarnejad bsatarnejad commented Apr 15, 2025

What are you trying to accomplish?

Make it possible for close button in dialog header to have a custom label.

Screenshots

Custom aria-label on close button:
custom value for aria-label of close button in header of dialog

Integration

It won't break anything.

List the issues that this change affects.

Closes #3446

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Add a new optional parameter for the header of dialog component named 'close_label' which can be used to pass the value of aria-label of close button in the header of the dialog.

Accessibility

This can improve accessibility since the aria-label has a custom value now.

  • Fixes axe scan violation - This change fixes an existing axe scan violation.
  • No new axe scan violation - This change does not introduce any new axe scan violations.
  • New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@bsatarnejad bsatarnejad requested a review from a team as a code owner April 15, 2025 13:40
Copy link

changeset-bot bot commented Apr 15, 2025

🦋 Changeset detected

Latest commit: d0a2c9e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@bsatarnejad bsatarnejad force-pushed the add-a-new-custom-label-for-close-button-in-dialog-header branch from 633e2b2 to d0a2c9e Compare April 16, 2025 04:19
Copy link
Member

@francinelucca francinelucca left a comment

Choose a reason for hiding this comment

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

LGTM!

@bsatarnejad
Copy link
Contributor Author

Hi @francinelucca
Thanks a lot for the review!

I've added and committed the changeset. Regarding the CI errors (Check for changeset and semver label), they seem to be related to the fact that this PR is coming from a forked repository. As a result, the GitHub Actions workflow doesn't have access to the required secrets, which causes those checks to fail. These failures are not related to the actual changes in the PR and can be safely ignored.

Let me know if anything else is needed!

Best regards,
Behrokh

@jonrohan jonrohan added the skip changeset Pull requests that don't change the library output label Apr 17, 2025
@francinelucca francinelucca added this pull request to the merge queue Apr 17, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Apr 17, 2025
@francinelucca francinelucca added this pull request to the merge queue Apr 17, 2025
Merged via the queue into primer:main with commit c2b88cb Apr 17, 2025
28 of 31 checks passed
@primer primer bot mentioned this pull request Apr 17, 2025
@francinelucca
Copy link
Member

merged! thanks for the work on this @bsatarnejad 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
skip changeset Pull requests that don't change the library output
Projects
None yet
Development

Successfully merging this pull request may close these issues.

The Dialog component lacks a custom ARIA label for its close button
3 participants