Skip to content

test(balkan-components): api pages for each components for acc testing #12612

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.

Sign up for GitHub

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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

test(balkan-components): api pages for each components for acc testing #12612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
27a9edc
test(balkan-components): api pages for each components for acc testing
hinzzx Nov 4, 2025
f63fd71
fix(balkan-components): fix imports
hinzzx Nov 5, 2025
7ddca62
docs: add additional components
hinzzx Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 221 additions & 0 deletions .github/acc-improvements-part-1.instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
# Accessibility Issues Report

Files included in the report:

- CalendarDate_APIs.html
- Bar_APIs.html
- Button_APIs.html
- Calendar_APIs.html
- SpecialCalendarDate_APIs.html
- CalendarLegendAPIs.html
- CalendarDateRange_APIs.html

## Overview
This document contains accessibility issues found across multiple API documentation pages.

---

## CalendarDate_APIs.html

### Issue 1 of 8

**Element Location:**
```
#date-cal,.ui5-calheader-arrowbtn[data-ui5-cal-header-btn-prev="true"][part="calendar-header-arrow-button"]
```

**Element Code:**
```html
<div data-ui5-cal-header-btn-prev="true" class="ui5-calheader-arrowbtn" part="calendar-header-arrow-button" role="button">
<ui5-icon class="ui5-calheader-arrowicon" ui5-icon="" design="Default" name="slim-arrow-left" mode="Decorative" desktop=""></ui5-icon>
</div>
```

**Problems:**
- Element does not have text that is visible to screen readers
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute

---

## Bar_APIs.html

**Element Location:**
```
ui5-button[icon="home"][icon-only=""][has-icon=""],button[aria-label=""]
```

**Element Code:**
```html
<button type="button" class="ui5-button-root" data-sap-focus-ref="true" tabindex="0" aria-label="" part="button" role="button">
```

**To solve this problem, you need to fix at least (1) of the following:**
- Element does not have inner text that is visible to screen readers
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute
- Element does not have an implicit (wrapped) `<label>`
- Element does not have an explicit `<label>`
- Element's default semantics were not overridden with role="none" or role="presentation"

---

## Button_APIs.html

**Status:** ✅ No issues.

---

## Calendar_APIs.html

**Total Serious Issues:** 33

### Issue: Ensure every ARIA button, link and menuitem has an accessible name

[More information - Link opens in a new window]

**Element Location:**
```
#multiple-cal,.ui5-calheader-arrowbtn[data-ui5-cal-header-btn-next="true"][part="calendar-header-arrow-button"]
```

**Element Code:**
```html
<div data-ui5-cal-header-btn-next="true" class="ui5-calheader-arrowbtn" part="calendar-header-arrow-button" role="button">
<ui5-icon class="ui5-calheader-arrowicon" ui5-icon="" design="Default" name="slim-arrow-right" mode="Decorative" desktop=""></ui5-icon>
</div>
```

**To solve this problem, you need to fix at least (1) of the following:**
- Element does not have text that is visible to screen readers
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute

**Issue Details:**
- **Found:** Automatically
- **Impact:** serious
- **Categories:** cat.aria, wcag2a, wcag412, TTv5, TT6.a, EN-301-549, EN-9.4.1.2, ACT

---

### Issue: Elements must meet minimum color contrast ratio thresholds

**Description:** Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

[More information - Link opens in a new window]

**Element Location:**
```
#styled-cal,#ui5wc_28-daypicker,.ui5-dp-daytext[data-sap-timestamp="1705276800"]
```

**Element Code:**
```html
<span class="ui5-dp-daytext" data-sap-timestamp="1705276800">15</span>
```

**To solve this problem, you need to fix the following:**
- Element has insufficient color contrast of 1.21 (foreground color: #0064d9, background color: #198754, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

**Related Node:**
```html
<div tabindex="0" data-sap-focus-ref="true" data-sap-timestamp="1705276800" role="gridcell" title="" aria-selected="true" aria-label="January 15, 2024" aria-disabled="false" class="ui5-dp-item ui5-dp-wday1 ui5-dp-item--selected" part="day-cell day-cell-selected">
```

---

## SpecialCalendarDate_APIs.html

### Issue: Ensure every ARIA button, link and menuitem has an accessible name

[More information - Link opens in a new window]

**Element Location 1 of 12:**
```
.card.border-start.api-section:nth-child(2) > .card-body > .bg-light.rounded.p-3 > .flex-column.d-flex.gap-3 > div > ui5-calendar,.ui5-calheader-arrowbtn[data-ui5-cal-header-btn-prev="true"][part="calendar-header-arrow-button"]
```

**Element Code:**
```html
<div data-ui5-cal-header-btn-prev="true" class="ui5-calheader-arrowbtn" part="calendar-header-arrow-button" role="button">
<ui5-icon class="ui5-calheader-arrowicon" ui5-icon="" design="Default" name="slim-arrow-left" mode="Decorative" desktop=""></ui5-icon>
</div>
```

**To solve this problem, you need to fix at least (1) of the following:**
- Element does not have text that is visible to screen readers
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute

**Issue Details:**
- **Found:** Automatically
- **Impact:** serious
- **Categories:** cat.aria, wcag2a, wcag412, TTv5, TT6.a, EN-301-549, EN-9.4.1.2, ACT

---

## CalendarLegendAPIs.html

### Issue: Ensure every ARIA button, link and menuitem has an accessible name

[More information - Link opens in a new window]

**Element Location:**
```
.card.border-start.api-section:nth-child(9) > .card-body > .bg-light.rounded.p-3 > .flex-wrap.d-flex.gap-3 > div > ui5-calendar,.ui5-calheader-arrowbtn[data-ui5-cal-header-btn-next="true"][part="calendar-header-arrow-button"]
```

**Element Code:**
```html
<div data-ui5-cal-header-btn-next="true" class="ui5-calheader-arrowbtn" part="calendar-header-arrow-button" role="button">
<ui5-icon class="ui5-calheader-arrowicon" ui5-icon="" design="Default" name="slim-arrow-right" mode="Decorative" desktop=""></ui5-icon>
</div>
```

**To solve this problem, you need to fix at least (1) of the following:**
- Element does not have text that is visible to screen readers
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute

**Issue Details:**
- **Found:** Automatically
- **Impact:** serious
- **Categories:** cat.aria, wcag2a, wcag412, TTv5, TT6.a, EN-301-549, EN-9.4.1.2, ACT
- **Found on:** 04/11/2025 at 2:26 PM

---

## CalendarDateRange_APIs.html

### Issue: Ensure every ARIA button, link and menuitem has an accessible name

[More information - Link opens in a new window]

**Element Location:**
```
ui5-calendar[_header-month-button-text="May"],.ui5-calheader-arrowbtn[data-ui5-cal-header-btn-next="true"][part="calendar-header-arrow-button"]
```

**Element Code:**
```html
<div data-ui5-cal-header-btn-next="true" class="ui5-calheader-arrowbtn" part="calendar-header-arrow-button" role="button">
<ui5-icon class="ui5-calheader-arrowicon" ui5-icon="" design="Default" name="slim-arrow-right" mode="Decorative" desktop=""></ui5-icon>
</div>
```

**To solve this problem, you need to fix at least (1) of the following:**
- Element does not have text that is visible to screen readers
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute

**Issue Details:**
- **Found:** Automatically
- **Impact:** serious
- **Categories:** cat.aria, wcag2a, wcag412, TTv5, TT6.a, EN-301-549, EN-9.4.1.2, ACT
- **Found on:** 04/11/2025 at 2:28 PM
120 changes: 120 additions & 0 deletions .github/acc-test-page-generation.instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
## API Test Page Generation Guidelines

I need you to create a comprehensive API test page for the provided components.

Each component has the following relevant files in its directory main/fiori:
- [COMPONENT_NAME].ts - Component logic and properties
- [COMPONENT_NAME]Template.tsx - Component structure and markup; Traverse this file to understand how the component is built, and if available find the sub-templates and index them as well, e.g. ColorPaletterteTemplate.tsx and ColorPaletteItemTemplate.tsx;
- [COMPONENT_NAME].html - Component html structure reference
- [COMPONENT_NAME].css - Component styles
- APIs_Template.html - For styling and structure reference

Task Requirements:

1. API Analysis & Documentation
- Analyze all API's of the component, and generate separate examples for each one of them
- Document ARIA attributes, and roles only for the accessibility related API's
- Identify keyboard navigation patterns and focus management
- Analyze component-specific interactions
- Do NOT use any deprecated API's
- For specific features or functionalities such as F6 Navigation, localization, theming, etc., ensure to include relevant imports

2. Test Page Structure
- Follow strictly the styling and structure of APIs_Template.html, do not change any styling and do not add any from your side to the structure, replace whats instructed there
- Create clear section headers with consistent card-based formatting
- Use [COMPONENT_NAME].html only as a reference to understand how the component is used, do not copy or replicate code from it
- Create fresh, original examples based on the component's APIs
- Do not use <kbd>, <code>, or any other semantic or inline tags for keyboard keys, code, or emphasis

3. Test Implementation
- Generate working component examples for each API
- Include interactive demonstrations of ARIA attributes and roles
- Add keyboard navigation testing scenarios
- Provide screen reader compatibility examples
- Include test instructions only for interactive demonstrations that require user action to see the API working
- Create the file in acc-tests/packages/main/test/pages directory, NOT in the submodule
- File name: [COMPONENT_NAME]_APIs.html

## APIs_Template.html File Structure

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UI5 [COMPONENT_NAME] API Samples</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- DO NOT change, use as it is-->
<script type="importmap">
{
"imports": {"@ui5/webcomponents/":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/","@ui5/webcomponents-ai/":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/","@ui5/webcomponents-fiori/":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/","@ui5/webcomponents-compat/":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/","@ui5/webcomponents-base/jsx-runtime":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/jsx-runtime.js","@ui5/webcomponents-base/":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/","@ui5/webcomponents-icons/":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/","@ui5/webcomponents-localization/":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/","@ui5/webcomponents-theming/":"https://cdn.jsdelivr.net/npm/@ui5/[email protected]/","lit-html":"https://cdn.jsdelivr.net/npm/lit-html@2","lit-html/":"https://cdn.jsdelivr.net/npm/lit-html@2/","@zxing/library/":"https://cdn.jsdelivr.net/npm/@zxing/library@0/"}
}
</script>

<script type="module">
// [AI_REPLACE_START: Component Imports]
// [AI_REPLACE_END]
</script>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">

<!-- Custom CSS for API-specific styling -->
<style>
.api-section {
border-left-width: 3px;
}

.api-section.blue-accent {
border-left-color: #0d6efd;
}

.test-instruction {
font-size: 0.75rem;
color: darkred;
font-weight: 500;
}
</style>
</head>
<body>
<main role="main" aria-label="[COMPONENT_NAME] API test samples">
<div class="container-fluid py-4">
<h1 class="display-5 text-dark mb-4">UI5 [COMPONENT_NAME] Component API Samples</h1>

<!-- [AI_REPLACE_START: API Cards] -->
<!-- Create one card for each API element (property, slot, event, method) from the component -->
<!-- Each card follows this exact structure: -->

<div class="card border-start api-section blue-accent mb-4">
<div class="card-body">
<h2 class="h6 fw-bold mb-3">[API_NAME] API</h2>
<div class="text-muted fst-italic mb-3">[Description of what this API does]</div>
<div class="bg-light rounded p-3">
<div class="d-flex flex-wrap gap-3 align-items-center" data-cy-acc-container-id="[32_char_hex_id]">
<!-- Add component examples here demonstrating the API -->
</div>
<!-- Optional: Add test-instruction div only if manual testing is needed -->
<!-- <div class="test-instruction">Test instructions: [How to test]</div> -->
</div>
</div>
</div>

<!-- [AI_REPLACE_END] -->
</div>
</main>

<!-- [AI_REPLACE_START: JavaScript] -->
<!-- Add JavaScript only if needed for interactive demos (events, accessibilityAttributes, etc.) -->
<script>
// Example: Event listeners, accessibilityAttributes setup
</script>
<!-- [AI_REPLACE_END] -->

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```
29 changes: 29 additions & 0 deletions .github/components-list.instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
## Component List For Accessibility Test Page Generation

- Bar
- Button
- Calendar
- CalendarDate
- CalendarDateRange
- SpecialCalendarDate
- CalendarLegend
- CalendarLegendItem
- ColorPalette
- ColorPaletteItem
- ColorPalettePopover
- ColorPicker
- DatePicker
- DateRangePicker
- DateTimePicker
- FileUploader
- Link
- Menu
- MenuItem
- MenuSeparator
- SegmentedButton
- SegmentedButtonItem
- SplitButton
- StepInput
- Switch
- TimePicker
- ToggleButton
Loading
Loading