From 27a9edce29139b3d8ca746e5313c2f11ca96a94b Mon Sep 17 00:00:00 2001 From: Stoyan Date: Tue, 4 Nov 2025 16:30:10 +0200 Subject: [PATCH 1/3] test(balkan-components): api pages for each components for acc testing --- .../acc-improvements-part-1.instructions.md | 221 ++++++ .../acc-test-page-generation.instructions.md | 120 ++++ .github/components-list.instructions.md | 29 + .../Avatar_ACC_APIs.html | 408 +++++++++++ .../Avatar_ACC_Standards.html | 658 ++++++++++++++++++ .../acc-api-test-generation/Bar_APIs.html | 261 +++++++ .../acc-api-test-generation/Button_APIs.html | 472 +++++++++++++ .../CalendarDateRange_APIs.html | 141 ++++ .../CalendarDate_APIs.html | 104 +++ .../CalendarLegendItem_APIs.html | 179 +++++ .../CalendarLegend_APIs.html | 304 ++++++++ .../Calendar_APIs.html | 407 +++++++++++ .../ColorPaletteItem_APIs.html | 236 +++++++ .../ColorPalettePopover_APIs.html | 412 +++++++++++ .../ColorPalette_APIs.html | 236 +++++++ .../acc-api-test-generation/Link_APIs.html | 293 ++++++++ .../SpecialCalendarDate_APIs.html | 169 +++++ .../acc-api-test-generation/Switch_APIs.html | 334 +++++++++ .../ToggleButton_APIs.html | 258 +++++++ 19 files changed, 5242 insertions(+) create mode 100644 .github/acc-improvements-part-1.instructions.md create mode 100644 .github/acc-test-page-generation.instructions.md create mode 100644 .github/components-list.instructions.md create mode 100644 packages/main/test/pages/acc-api-test-generation/Avatar_ACC_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/Avatar_ACC_Standards.html create mode 100644 packages/main/test/pages/acc-api-test-generation/Bar_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/Button_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/CalendarDateRange_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/CalendarDate_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/CalendarLegendItem_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/CalendarLegend_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/Calendar_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/ColorPaletteItem_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/ColorPalettePopover_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/ColorPalette_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/Link_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/SpecialCalendarDate_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/Switch_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/ToggleButton_APIs.html diff --git a/.github/acc-improvements-part-1.instructions.md b/.github/acc-improvements-part-1.instructions.md new file mode 100644 index 000000000000..ab49a8d95623 --- /dev/null +++ b/.github/acc-improvements-part-1.instructions.md @@ -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 +
+ +
+``` + +**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 + + + + +
Test instructions: Use buttons to programmatically control selection state
+ + + + +
+
+

Tooltip Property API

+
Using tooltip property to provide additional information on hover
+
+
+
+ Icon-only with tooltips: + + + + + + +
+ +
+ Text with tooltips: + + New + Save + Print + Copy + +
+ +
+ Mixed tooltips: + + Edit + View + Print Preview + +
+
+
Test instructions: Hover over items to see custom tooltips
+
+
+
+ +
+
+

AccessibleName Property API

+
Using accessibleName property to provide ARIA labels for screen readers
+
+
+
+ Icon-only with accessible names: + + + + + + +
+ +
+ Symbols with accessible names: + + B + I + U + S + +
+
+
Test instructions: Use screen reader to hear descriptive accessible names
+
+
+
+ +
+
+

AccessibleNameRef Property API

+
Using accessibleNameRef property to reference labeling elements
+
+
+
+ Display Mode + Layout Options + + List + Grid + Table + +
+ +
+ Time Period + + Daily + Weekly + Monthly + +
+
+
Test instructions: Screen reader should announce referenced label text
+
+
+
+ +
+
+

AccessibleDescription Property API

+
Using accessibleDescription property to provide additional context
+
+
+
+ Priority levels with descriptions: + + Low + Medium + High + +
+ +
+ File operations with descriptions: + + New + Save + Copy + +
+
+
Test instructions: Screen reader should announce additional descriptive information
+
+
+
+ +
+
+

AccessibleDescriptionRef Property API

+
Using accessibleDescriptionRef property to reference describing elements
+
+
+
+ Sort items in ascending order + Sort items in descending order + + A-Z + Z-A + +
+ +
+ Choose between different display densities + + Compact + Cozy + Condensed + +
+
+
Test instructions: Screen reader should read referenced description elements
+
+
+
+ +
+
+

Icon Property API

+
Using icon property to display SAP icons within items
+
+
+
+ Icon-only navigation: + + + + + + + +
+ +
+ Icon with text: + + New + Edit + Save + Print + +
+ +
+ Mixed icons and text: + + Home + About + Notifications + Contact + +
+
+
Test instructions: Observe different icon types and combinations with text
+
+
+
+ +
+
+

Text Slot API

+
Using text slot to define the content of segmented button items
+
+
+
+ Simple text content: + + First + Second + Third + +
+ +
+ Different text lengths: + + A + Medium + Very Long Text Content + +
+ +
+ Numbers and symbols: + + 1 + 2 + 3 + + + +
+ +
+ Formatted content: + + Jan 2024 + Feb 2024 + Mar 2024 + +
+
+
Test instructions: Different text content formats and lengths are displayed properly
+
+
+
+ +
+
+

Interactive Behavior API

+
Testing keyboard and mouse interaction behavior of individual items
+
+
+
+ Keyboard navigation test: + + Tab Here + Arrow Keys + Space/Enter + +
+ +
+ Mouse interaction test: + + Click Me + Or Me + Not Me + +
+ + No interactions yet +
+
Test instructions: Use Tab to focus, arrow keys to navigate, Space/Enter to select, or click with mouse
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/packages/main/test/pages/acc-api-test-generation/SegmentedButton_APIs.html b/packages/main/test/pages/acc-api-test-generation/SegmentedButton_APIs.html new file mode 100644 index 000000000000..df1c8091e04f --- /dev/null +++ b/packages/main/test/pages/acc-api-test-generation/SegmentedButton_APIs.html @@ -0,0 +1,442 @@ + + + + + UI5 SegmentedButton API Samples + + + + + + + + + + + + + + + +
+
+

UI5 SegmentedButton Component API Samples

+ +
+
+

AccessibleName Property API

+
Using accessibleName property to provide ARIA label for screen readers
+
+
+ + List + Grid + Table + + + + Bold + Italic + Underline + +
+
Test instructions: Use screen reader to hear accessible names for each segmented button
+
+
+
+ +
+
+

AccessibleNameRef Property API

+
Using accessibleNameRef property to reference labeling elements
+
+
+ Select View Mode: + + List View + Grid View + Table View + + + Navigation Options: + + Home + Search + Settings + +
+
Test instructions: Labels should be announced by screen readers
+
+
+
+ +
+
+

AccessibleDescription Property API

+
Using accessibleDescription property to provide additional context
+
+
+ + Compact + Cozy + Condensed + + + + Low + Medium + High + Critical + +
+
Test instructions: Screen reader should announce descriptions for additional context
+
+
+
+ +
+
+

AccessibleDescriptionRef Property API

+
Using accessibleDescriptionRef property to reference describing elements
+
+
+ Choose sorting method for the list items + + Name + Date + Size + + + Filter content by status type + + Active + Inactive + Pending + +
+
Test instructions: Description elements should be read by screen readers
+
+
+
+ +
+
+

SelectionMode Property API

+
Using selectionMode property to control single or multiple selection
+
+
+
+ Single Selection (default): + + Option A + Option B + Option C + +
+ +
+ Multiple Selection: + + Feature 1 + Feature 2 + Feature 3 + Feature 4 + +
+ + No selections made +
+
Test instructions: Try selecting items in both modes to see different behaviors
+
+
+
+ +
+
+

ItemsFitContent Property API

+
Using itemsFitContent property to control item sizing behavior
+
+
+
+ Equal sizing (default): + + Short + Medium Text + Very Long Button Text + +
+ +
+ Content-based sizing: + + Short + Medium Text + Very Long Button Text + +
+ +
+ With icons (equal): + + Home + Search + Settings + +
+ +
+ With icons (content-fit): + + Home + Search & Filter + Advanced Settings + +
+
+
Test instructions: Compare sizing behaviors between equal and content-based layouts
+
+
+
+ +
+
+

Items Slot API

+
Using items slot to define SegmentedButtonItem components
+
+
+
+ Text only items: + + Daily + Weekly + Monthly + Yearly + +
+ +
+ Icon only items: + + + + + + + +
+ +
+ Mixed icon and text: + + List + Grid + Details + Table + +
+ +
+ Many items: + + Jan + Feb + Mar + Apr + May + Jun + +
+
+
Test instructions: Interact with different types of item configurations
+
+
+
+ +
+
+

Selection-Change Event API

+
Using selection-change event to handle item selection changes
+
+
+
+ Single selection events: + + Red + Green + Blue + +
+ +
+ Multiple selection events: + + Bold + Italic + Underline + Strikethrough + +
+ + No selection events yet +
+
Test instructions: Click items to see selection-change events logged
+
+
+
+ +
+
+

Disabled Items API

+
Using disabled property on SegmentedButtonItems to prevent interaction
+
+
+
+ Mixed enabled/disabled items: + + Available + Disabled + Available + Disabled + +
+ +
+ Partially disabled navigation: + + Home + Search + Favorites + Settings + +
+
+
Test instructions: Try clicking disabled items - they should not respond
+
+
+
+ +
+
+

Keyboard Navigation API

+
Testing keyboard navigation between segmented button items
+
+
+
+ Arrow key navigation: + + First + Second + Third + Fourth + +
+ +
+ Tab to segmented button: + + Alpha + Beta + Gamma + +
+
+
Test instructions: Use Tab to focus, then arrow keys to navigate between items, Space/Enter to select
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/packages/main/test/pages/acc-api-test-generation/SplitButton_APIs.html b/packages/main/test/pages/acc-api-test-generation/SplitButton_APIs.html new file mode 100644 index 000000000000..6a3b51685fb2 --- /dev/null +++ b/packages/main/test/pages/acc-api-test-generation/SplitButton_APIs.html @@ -0,0 +1,399 @@ + + + + + UI5 SplitButton API Samples + + + + + + + + + + + + + + + +
+
+

UI5 SplitButton Component API Samples

+ +
+
+

Icon Property API

+
Using icon property to display SAP icons in the default button
+
+
+ Save Document + Print + Edit + Copy + New Item +
+
Test instructions: Click main button or arrow to see different actions
+
+
+
+ +
+
+

ActiveArrowButton Property API

+
Using activeArrowButton property to control arrow button active styling
+
+
+ Normal Arrow + Active Arrow + Toggle Arrow + +
+
Test instructions: Compare normal vs active arrow styling, use toggle button
+
+
+
+ +
+
+

Design Property API

+
Using design property to control visual appearance with different button designs
+
+
+ Default + Emphasized + Positive + Negative + Transparent + Attention +
+
Test instructions: Compare different visual designs for various use cases
+
+
+
+ +
+
+

Disabled Property API

+
Using disabled property to make split button noninteractive
+
+
+ Enabled Button + Disabled Button + Disabled Emphasized + Toggle Disabled + +
+
Test instructions: Try clicking disabled buttons - they should not respond
+
+
+
+ +
+
+

AccessibleName Property API

+
Using accessibleName property to provide ARIA label for screen readers
+
+
+ Save + Print + Download + Upload +
+
Test instructions: Use screen reader to hear descriptive accessible names
+
+
+
+ +
+
+

AccessibilityAttributes Property API

+
Using accessibilityAttributes property to define advanced ARIA attributes
+
+
+ Save Menu + Settings Dialog + Copy Options +
+
Test instructions: Screen reader should announce popup types and ARIA attributes
+
+
+
+ +
+
+

Text Slot API

+
Using text slot to define button content with various text lengths and formats
+
+
+
+ Save + Print Document + Edit with Advanced Options +
+ +
+ Text Only Button + + Copy & Paste Operations +
+ +
+ Save As... (Ctrl+Shift+S) + Download (Multiple Formats) +
+
+
Test instructions: Observe different text lengths and icon combinations
+
+
+
+ +
+
+

Click Event API

+
Using click event to handle default button activation
+
+
+ Save Document + Print Page + Edit Content + No default actions triggered +
+
Test instructions: Click main buttons to see click events logged
+
+
+
+ +
+
+

Arrow-Click Event API

+
Using arrow-click event to handle arrow button activation
+
+
+ Save Options + Copy Menu + Download Menu + No arrow actions triggered +
+
Test instructions: Click arrow buttons to see arrow-click events logged
+
+
+
+ +
+
+

Keyboard Navigation API

+
Testing keyboard interaction patterns for split button activation
+
+
+
+ Keyboard test buttons: + Space/Enter for default + Arrow keys for menu +
+ + No keyboard events +
+
Test instructions: Focus buttons, use Space/Enter for default action, Arrow Up/Down or F4 for arrow action
+
+
+
+ +
+
+

Design Variations API

+
Comprehensive design variations with different use case scenarios
+
+
+
+ File operations: + Save + Upload + Edit +
+ +
+ Action feedback: + Confirm Save + Delete Item + Important Settings +
+ +
+ Disabled states: + Cannot Save + Cannot Delete +
+
+
Test instructions: Compare different design patterns for various use cases
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/packages/main/test/pages/acc-api-test-generation/StepInput_APIs.html b/packages/main/test/pages/acc-api-test-generation/StepInput_APIs.html new file mode 100644 index 000000000000..bcfc1b304fb1 --- /dev/null +++ b/packages/main/test/pages/acc-api-test-generation/StepInput_APIs.html @@ -0,0 +1,438 @@ + + + + + UI5 StepInput API Samples + + + + + + + + + + + + + + + +
+
+

UI5 StepInput Component API Samples

+ +
+
+

Value Property API

+
Using value property to set the numeric value of the component
+
+
+ + + + + +
+
Test instructions: Use +/- buttons or type values to change numbers
+
+
+
+ +
+
+

Min Property API

+
Using min property to set minimum allowed values
+
+
+ + + + +
+
Test instructions: Try decreasing values below minimum limits
+
+
+
+ +
+
+

Max Property API

+
Using max property to set maximum allowed values
+
+
+ + + + +
+
Test instructions: Try increasing values above maximum limits
+
+
+
+ +
+
+

Step Property API

+
Using step property to control increment/decrement amount
+
+
+ + + + + +
+
Test instructions: Click +/- buttons to see different step increments
+
+
+
+ +
+
+

ValueState Property API

+
Using valueState property to indicate validation state
+
+
+ + + + + +
+
Test instructions: Observe different value state visual indicators
+
+
+
+ +
+
+

Required Property API

+
Using required property to mark component as required for form validation
+
+
+ + + +
+
Test instructions: Required fields should show validation indicators
+
+
+
+ +
+
+

Disabled Property API

+
Using disabled property to make component noninteractive
+
+
+ + + + + +
+
Test instructions: Try interacting with disabled inputs - they should not respond
+
+
+
+ +
+
+

Readonly Property API

+
Using readonly property to prevent value changes while keeping visual accessibility
+
+
+ + + + + +
+
Test instructions: Try changing readonly values - buttons should be disabled
+
+
+
+ +
+
+

Placeholder Property API

+
Using placeholder property to provide user guidance when value is empty
+
+
+ + + + +
+
Test instructions: Clear values to see placeholder text
+
+
+
+ +
+
+

Name Property API

+
Using name property for form submission identification
+
+
+ + + + +
+
Test instructions: Names are used for form data submission
+
+
+
+ +
+
+

ValuePrecision Property API

+
Using valuePrecision property to control decimal places display
+
+
+ + + + + +
+
Test instructions: Observe different decimal precision formatting
+
+
+
+ +
+
+

AccessibleName Property API

+
Using accessibleName property to provide ARIA labels for screen readers
+
+
+ + + + +
+
Test instructions: Use screen reader to hear descriptive labels
+
+
+
+ +
+
+

AccessibleNameRef Property API

+
Using accessibleNameRef property to reference labeling elements
+
+
+ Quantity: + + + Price ($): + + + Temperature (°F): + +
+
Test instructions: Labels should be read by screen readers
+
+
+
+ +
+
+

ValueStateMessage Slot API

+
Using valueStateMessage slot to provide custom validation messages
+
+
+ +
Warning: Value is approaching maximum limit
+ + + +
Error: Value cannot be negative
+ + + +
Info: This is the recommended default value
+ + + +
Success: Maximum value reached
+ +
+
Test instructions: Focus inputs to see custom value state messages
+
+
+
+ +
+
+

Change Event API

+
Using change event to handle value changes on Enter or focus out
+
+
+ + + No change events yet +
+
Test instructions: Change values and press Enter or click outside to trigger change events
+
+
+
+ +
+
+

Input Event API

+
Using input event to handle real-time value changes during typing
+
+
+ + + No input events yet +
+
Test instructions: Type in the inputs to see real-time input events
+
+
+
+ +
+
+

Value-State-Change Event API

+
Using value-state-change event to handle validation state updates
+
+
+ + + No value state changes +
+
Test instructions: Enter values outside min/max range to trigger value state changes
+
+
+
+ +
+
+

Keyboard Navigation API

+
Testing keyboard interaction patterns for step input controls
+
+
+ + + +
+
Test instructions: Focus inputs and use Arrow Up/Down, Page Up/Down, Ctrl+Arrow keys for different increments
+
+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/packages/main/test/pages/acc-api-test-generation/TimePicker_APIs.html b/packages/main/test/pages/acc-api-test-generation/TimePicker_APIs.html new file mode 100644 index 000000000000..0e198a48ded9 --- /dev/null +++ b/packages/main/test/pages/acc-api-test-generation/TimePicker_APIs.html @@ -0,0 +1,487 @@ + + + + + UI5 TimePicker API Samples + + + + + + + + + + + + + + + + + +
+
+

UI5 TimePicker Component API Samples

+ +
+
+

Value Property API

+
Using value property to set the time value
+
+
+ + + + + +
+
Test instructions: Click on inputs to open time picker and select times
+
+
+
+ +
+
+

Name Property API

+
Using name property for form identification
+
+
+ + + +
+
Test instructions: Names are used for form data identification
+
+
+
+ +
+
+

ValueState Property API

+
Using valueState property to indicate validation state
+
+
+ + + + + +
+
Test instructions: Different value states provide visual validation feedback
+
+
+
+ +
+
+

Disabled Property API

+
Using disabled property to make component non-interactive
+
+
+ Enabled: + + Disabled: + + Disabled empty: + +
+
Test instructions: Disabled components should not respond to any interaction
+
+
+
+ +
+
+

Readonly Property API

+
Using readonly property to prevent value changes while maintaining accessibility
+
+
+ Editable: + + Read-only: + + Read-only display: + +
+
Test instructions: Read-only inputs should not allow changes but remain focusable
+
+
+
+ +
+
+

Placeholder Property API

+
Using placeholder property to provide user guidance
+
+
+ + + + +
+
Test instructions: Empty inputs should show placeholder text or format pattern
+
+
+
+ +
+
+

FormatPattern Property API

+
Using formatPattern property to control time display format
+
+
+ HH:mm:ss: + + hh:mm:ss a: + + HH:mm: + + mm:ss: + +
+
Test instructions: Different format patterns control display and input validation
+
+
+
+ +
+
+

Open Property API

+
Using open property to control popover state programmatically
+
+
+ + Open Picker + Close Picker + Status: Closed +
+
Test instructions: Use buttons to programmatically open/close the time picker
+
+
+
+ +
+
+

Required Property API

+
Using required property to mark time input as required for validation
+
+
+ Optional: + + Required: + + Required (empty): + +
+
Test instructions: Required fields should be visually indicated for form validation
+
+
+
+ +
+
+

AccessibleName Property API

+
Using accessibleName property to provide ARIA label for screen readers
+
+
+ + + +
+
Test instructions: Use screen reader to hear accessible names
+
+
+
+ +
+
+

AccessibleNameRef Property API

+
Using accessibleNameRef property to reference labeling elements
+
+
+ Start Time + + End Time + +
+
Test instructions: Labels should be announced by screen readers
+
+
+
+ +
+
+

AccessibleDescription Property API

+
Using accessibleDescription property to provide additional context
+
+
+ + +
+
Test instructions: Screen readers should announce additional descriptions
+
+
+
+ +
+
+

AccessibleDescriptionRef Property API

+
Using accessibleDescriptionRef property to reference descriptive elements
+
+
+ +
Use arrow keys to adjust time or click to open picker
+
+
Test instructions: Referenced descriptions should be available to screen readers
+
+
+
+ +
+
+

ValueStateMessage Slot API

+
Using valueStateMessage slot to provide custom validation messages
+
+
+ +
Invalid time format. Please use HH:mm:ss format.
+ + +
Perfect time selection!
+ + +
Very late time - consider earlier hours.
+ + +
Recommended lunch time.
+ +
+
Test instructions: Value state messages provide validation and guidance feedback
+
+
+
+ +
+
+

Change Event API

+
Using change event to handle time value changes
+
+
+ + No change events yet +
+
Test instructions: Select a new time to trigger change event
+
+
+
+ +
+
+

Input Event API

+
Using input event to handle real-time input changes
+
+
+ + No input events yet +
+
Test instructions: Type directly in the field to see input events
+
+
+
+ +
+
+

Open Event API

+
Using open event to handle picker opening
+
+
+ + Picker not opened yet +
+
Test instructions: Click on the picker to open it and trigger open event
+
+
+
+ +
+
+

Close Event API

+
Using close event to handle picker closing
+
+
+ + Picker not closed yet +
+
Test instructions: Open picker and then close it to trigger close event
+
+
+
+ +
+
+

Keyboard Navigation API

+
Testing keyboard shortcuts for time manipulation
+
+
+ + Use keyboard shortcuts +
+
Test instructions: Focus and use Page Up/Down (hours), Shift+Page Up/Down (minutes), Shift+Ctrl+Page Up/Down (seconds), F4/Alt+Up/Down (open/close)
+
+
+
+ +
+
+

Time Format Variations API

+
Testing various time format patterns and localization
+
+
+
+ 24h full: + + 12h AM/PM: + +
+ +
+ Hours only: + + Minutes only: + + Min:Sec: + +
+
+
Test instructions: Different format patterns control input parsing and display
+
+
+
+
+
+ + + + + + + \ No newline at end of file