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 · 1 comment
Open
2 tasks done

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 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Needs triage 🧐
Development

No branches or pull requests

2 participants