Skip to content

Tag - add aria label for prop to remove button #7571

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

Merged
merged 16 commits into from
Apr 11, 2025

Conversation

britt6612
Copy link
Collaborator

What does this PR do?

adds a prop for aria-label to be passed in

Where should the reviewer start?

tag.js

What testing has been done on this PR?

locally

How should this be manually tested?

locally

Do Jest tests follow these best practices?

I didnt add one since it got added to other snapshots

  • screen is used for querying.
  • The correct query is used. (Refer to this list of queries)
  • asFragment() is used for snapshot testing.

Any background context you want to provide?

On the Tag component there is no way for the implementer to provide an aria-label

What are the relevant issues?

closes #7555

Screenshots (if appropriate)

Do the grommet docs need to be updated?

yes

Should this PR be mentioned in the release notes?

yes

Is this change backwards compatible or is it a breaking change?

backwards compatible

@britt6612 britt6612 requested review from taysea and jcfilben April 3, 2025 03:00
@britt6612 britt6612 requested review from MikeKingdom and taysea April 3, 2025 21:00
@britt6612 britt6612 requested a review from MikeKingdom April 3, 2025 22:59
Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com>
@britt6612 britt6612 requested a review from taysea April 4, 2025 21:19
@britt6612 britt6612 requested a review from taysea April 7, 2025 18:16
@britt6612 britt6612 requested review from MikeKingdom and taysea April 7, 2025 21:19
Copy link
Collaborator

@MikeKingdom MikeKingdom left a comment

Choose a reason for hiding this comment

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

Thanks Brittany. Looks like it needs some types updates.

@@ -5,6 +5,9 @@ export interface TagProps {
name?: string;
onClick?: (...args: any[]) => any;
onRemove?: (...args: any[]) => any;
messages?: {
removeLabel?: string;
Copy link
Collaborator

Choose a reason for hiding this comment

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

this needs to be updated for the new keys

@@ -7,6 +7,9 @@ if (process.env.NODE_ENV !== 'production') {
value: PropTypes.string.isRequired,
onClick: PropTypes.func,
onRemove: PropTypes.func,
messages: PropTypes.shape({
removeLabel: PropTypes.string,
Copy link
Collaborator

Choose a reason for hiding this comment

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

same

@britt6612
Copy link
Collaborator Author

@MikeKingdom

glad I added the tests. I saw that value is actually required so I changed the json file to just be 2 use cases.

  "tag": {
    "removeLabel": {
      "nameAndValue": "Remove {name}: {value}",
      "valueOnly": "Remove {value}"
    }
  },

since value is always required we only need valueOnly and nameAndValue So updates propTypes, TS and tests.

@britt6612 britt6612 requested a review from MikeKingdom April 8, 2025 16:06
@MikeKingdom
Copy link
Collaborator

since value is always required we only need valueOnly and nameAndValue So updates propTypes, TS and tests.

Fair enough although I think that's a silly requirement and people tend to pick one or the other based on whether or not they want it to be bold.

Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

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

Looks good!

@jcfilben
Copy link
Collaborator

jcfilben commented Apr 8, 2025

Holding off on merging until after the upcoming patch release

@jcfilben
Copy link
Collaborator

Updated with master but looks like we need to bump the bundlesize up

@jcfilben jcfilben merged commit 35cc62d into grommet:master Apr 11, 2025
14 checks passed
@jcfilben jcfilben changed the title add aria label for prop to remove button Tag - add aria label for prop to remove button May 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tag - close button aria-label
4 participants