Web Components with Slots - Accessible Name Test

Test Instructions:
  1. Open Chrome DevTools (F12)
  2. Go to the a11yToolbox panel
  3. Click "Toggle Accessible Names"
  4. Verify that all custom buttons show their slotted text content as accessible names

Test 1: Simple Slotted Text

A custom button with simple text content passed through a slot:

Click Me

Expected: Badge should show "Click Me" as the accessible name

Test 2: Slotted Text with Icon

A custom button with text and an icon:

Search

Expected: Badge should show "Search" as the accessible name

Test 3: Named Slot

A custom button with named slot for label:

Save Changes

Expected: Badge should show "Save Changes" as the accessible name

Test 4: Nested Slotted Content

A custom button with nested elements in slot:

Delete permanently

Expected: Badge should show "Delete permanently" as the accessible name

Test 5: Fallback Content (No Slotted Content)

A custom button with no slotted content (should use fallback):

Expected: Badge should show "Default Button" as the accessible name