Skip to content

Conversation

@hinzzx
Copy link
Contributor

@hinzzx hinzzx commented Jan 28, 2026

Overview

The ui5-ai-button uses ui5-split-button internally. When the arrow button is hidden (_hideArrowButton=true), two accessibility violations occur:

  1. Nested interactive elements — wrapper has role="button" containing a <button> child
  2. Orphan ARIA referencesaria-labelledby points to IDs that don't exist in the DOM

What We Did

Change the wrapper role to "presentation" and make aria-labelledby conditional when arrow button is hidden:

What This Fixes

  • ✅ WCAG 2.2 4.1.2 — no nested interactive elements
  • ✅ ARIA 1.2 — aria-labelledby only references existing IDs
  • ✅ AXE/AccessContinuum — "Interactive controls must not be nested" resolved
  • ✅ No visual changes

@ui5-webcomponents-bot
Copy link
Collaborator

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview January 28, 2026 08:03 Inactive
@unazko unazko requested a review from tsanislavgatev January 29, 2026 07:46
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.

4 participants