[A11y_Bug]: WCAG 4.1.2 and 1.1.1 violations triggered from @carbon/ai-chat ChatCustomElement

[pranithraoibm]

Project

extension-checker

Browser

Chrome

Operating System

Other

Automated testing tool and ruleset.

IBM Equal Access Accessibility Checker

Assistive technology

Not tested with assistive technology. Issue detected via automated accessibility scan.

Description

We ran an accessibility scan on our UI using the IBM Equal Access Accessibility Checker browser extension and identified violations associated with the @carbon/ai-chat component (ChatCustomElement).

The following rules were flagged:

1. WCAG 4.1.2 – Name, Role, Value
   Elements with role="button" must have an accessible name.

2. WCAG 1.1.1 – Non-text Content
   SVG elements must have an accessible name.

These violations appear to originate from the ChatCustomElement implementation within @carbon/ai-chat.

We are seeking guidance on whether this is a library-level issue or if additional configuration is required on our side to ensure compliance.

Steps to reproduce

1. Clone the repository: https://github.com/IBM/project-ai-services
2. Navigate to: spyre-rag/ui
3. Install dependencies: npm install
4. Start the development server: npm run dev
5. Open the application in Chrome.
6. Launch IBM Equal Access Accessibility Checker extension.
7. Run a full page scan on the chat interface.
8. Observe:

• WCAG 4.1.2 violations on elements with role="button" (ChatCustomElement)
• WCAG 1.1.1 violations on SVG icons inside the chat component

[shunguoy]

This button is disabled

This button is invisible

[tombrunet]

Shunguo's going to do some more investigation, but generally speaking, buttons need names. Looks like the checker is working as expected.