[Bug]: DismissibleTag title prop is confusing and not really what being expected

[flannanl]

Package

@carbon/react

Browser

No response

Package version

1.61.0

React version

No response

Description

The title prop in DismissibleTag is currently being mapped to the title prop of the "Clear" button. However, I would expect it to be mapped to the title of the text showing in the tag.

As part of the effort of Carbon 11 migration, we are trying to move the Tag component with the filter and onClose properties to DismissibleTag. We need to show a different title text than the display text we showed in the tag. But because the title prop in DismissibleTag is currently mapped to the title prop for the button, we cannot migrate to use DismissibleTag.

Here is how we use Tag today.

        <Tag
          filter
          onClose={() => onClear()}
        >
          <span className={c('env-value-empty')} title={title}>
            <div className="icon-div">
              {<Link />}
            </div>
            <div className="cpc--ref-resolver-tag__label_container">
              {value}
            </div>
          </span>
        </Tag>

Reproduction/example

See description

Steps to reproduce

See description

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

IBM Cloud Projects

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[guidari]

Hey @flannanl
I'm not sure if I understood the issue. Correct me if I'm going off topic regarding your issue.

But if you want to pass the title you can change the default text from "Dismiss" to something else. The only time you cannot change the title it is when the ellipses is active in the tag, then Carbon will enforce a title like "Dismiss {text}" to make sure it is accessible for users to see what is written inside the tag.

The other difference between the old filter tag is that you cannot pass a ReactNode as text, it should pass a string. That way we can make sure it is accessible.

We are planning to move this to stable soon, as for now still experimental. So thanks for your feedback.

[flannanl]

@guidari I probably can live with the text not being a ReactNode anymore. However, the title prop today is for the close button, not the text. We have use case where we want the text showing in the tag to be different from the title showing for the text. Looking at the code, the title of the text is always coming from the text while the title prop is directly for the close button.

        <Text title={text} className={`${prefix}--tag__label`}>
          {text}
        </Text>

          <button
            type="button"
            className={`${prefix}--tag__close-icon`}
            onClick={handleClose}
            disabled={disabled}
            aria-label={title}
            title={title}>
            <Close />
          </button>

This is an example how we are using Tag today.

[guidari]

I guess what you mean then is that the second tag in this StackBlitz example should also show the title instead of the text if the title is present?

Can you share a Stackblitz of your use case? Because from what I understood you can do it what you have in the screen shot with DismissibleTag

[flannanl]

@guidari Your title prop can only decorate the close button on the tag. What I want is to have a title to embellish the text in the tag. That is when I keep my mouse over the tag text, "project-api-key", the title will appear. Today, your title will only appear if my mouse is over the close button or have the close button in focus. This is not acceptable because the context being embellish is not right.