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

[a11y]: Coachmark: closeIconDescription effectively hardcoded to English #6629

Open
2 tasks done
wkeese opened this issue Dec 24, 2024 · 2 comments
Open
2 tasks done
Labels
component: Coachmark role: dev Sev 3 Visible or noticeable to users but does not impede functionality. Has a workaround. type: a11y ♿ Issues not following accessibility standards type: bug 🐛 Something isn't working
Milestone

Comments

@wkeese
Copy link
Contributor

wkeese commented Dec 24, 2024

Package

@carbon/ibm-products

Browser

Chrome

Operating System

MacOS

Package version

2.56.0

React version

18

Automated testing tool and ruleset

manual inspection

Assistive technology

No response

Description

CoachmarkDragbar has a closeIconDescription with a default value of 'Close':

export let CoachmarkDragbar = React.forwardRef<
  HTMLElement,
  CoachmarkDragbarProps
>(
  (
    {
      a11yKeyboardHandler,
      closeIconDescription = defaults.closeIconDescription,
...

However, CoachmarkDragbar is specifically listed as an internal component:

/**
 * DO NOT USE. This component is for the exclusive use
 * of other Onboarding components.
 */

When CoachmarkDragbar is instantiated from CoachmarkOverlay, there's no way to set the closeIconDescription:

<CoachmarkDragbar
  a11yKeyboardHandler={handleKeyPress}
  onBlur={() => setA11yDragMode(false)}
  onDrag={handleDrag}
  theme={theme}
  onClose={onClose}
/>

Likewise when CoachmarkOverlay is created from Coachmark itself.


CoachmarkHeader has the same problem, it's an internal component with a closeIconDescription:

/**
 * DO NOT USE. This component is for the exclusive use
 * of other Onboarding components.
 */
export let CoachmarkHeader = React.forwardRef<
  HTMLElement,
  CoachmarkHeaderProps
>(
  (
    {
      closeIconDescription = defaults.closeIconDescription,

... but there's no way to set closeIconDescription when instantiating CoachmarkOverlay etc.


And finally, same issue with CoachmarkTagline:

/**
 * DO NOT USE. This component is for the exclusive use
 * of other Onboarding components.
 */
export let CoachmarkTagline = React.forwardRef<
  HTMLDivElement,
  CoachmarkTaglineProps
>(
  (
    {
      closeIconDescription = defaults.closeIconDescription,

WCAG 2.1 Violation

No response

Reproduction/example

N/A

Steps to reproduce

N/A

Code of Conduct

@amal-k-joy
Copy link
Contributor

introduce a new prop closeIconDescription and
introduce another new prop closeIconDescriptionForTagline for coachmarkFixed only ?

@elycheea elycheea changed the title [a11y]: CoachMark: closeIconDescription effectively hardcoded to English [a11y]: Coachmark: closeIconDescription effectively hardcoded to English Jan 6, 2025
@elycheea
Copy link
Contributor

elycheea commented Jan 6, 2025

See #6591 #6593

@elycheea elycheea added type: bug 🐛 Something isn't working type: enhancement 💡 New feature or request Sev 3 Visible or noticeable to users but does not impede functionality. Has a workaround. and removed status: needs triage 🕵️‍♀️ type: enhancement 💡 New feature or request labels Jan 6, 2025
@elycheea elycheea moved this from Needs triage 🧐 to Needs refinement 🤓 in Carbon for IBM Products Jan 6, 2025
@elycheea elycheea added this to the 2025 Q1 milestone Jan 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Coachmark role: dev Sev 3 Visible or noticeable to users but does not impede functionality. Has a workaround. type: a11y ♿ Issues not following accessibility standards type: bug 🐛 Something isn't working
Projects
Status: Needs refinement 🤓
Development

No branches or pull requests

3 participants