From 27a9edce29139b3d8ca746e5313c2f11ca96a94b Mon Sep 17 00:00:00 2001 From: Stoyan Date: Tue, 4 Nov 2025 16:30:10 +0200 Subject: [PATCH 1/6] 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 From 1e4823a50884bc4ff4bc1844c52adba94db95e9a Mon Sep 17 00:00:00 2001 From: Stoyan Date: Mon, 10 Nov 2025 16:16:44 +0200 Subject: [PATCH 4/6] docs: api pages framework used --- API_Pages_Framework.md | 137 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 API_Pages_Framework.md diff --git a/API_Pages_Framework.md b/API_Pages_Framework.md new file mode 100644 index 000000000000..fc4f219ba433 --- /dev/null +++ b/API_Pages_Framework.md @@ -0,0 +1,137 @@ +# Step-by-step framework on Team Balkan Components + +Below is the exact framework that we used, to generate API Test Pages of Team Balkan's web components. + +## Initial Setup and Prompt + +### Initial Setup + + - First we set-up a `components-list.instructions.md` file (we listed in a bulleted list all of the components Claude should iterate); + - Secondly we created another file with all of the instructions from the ui5-webc-acc-hub (but a little tweaked), in our case it was named `acc-test-page-generation.instructions.md` (included in the Prompt below); + +### Initial Prompt + +#### We instruct the AI to FIRST generate one-or-two pages, just to make sure we're on the same page. + +```prompt +I need you to create a comprehensive API test page for ALL of the components listed in #file:components-list.instructions.md file. + +Follow the instructions strictly. Let’s start with the first 2 components. Proceed step-by-step, following the instruction and be concise, DO NOT overengineer. +Use #file:Avatar_ACC_APIs.html and #file:Avatar_ACC_Standards.html files as examples/refferences on how the pages are expected to be. You can also refer to the template provided in the #file:acc-test-page-generation.instructions.md . + +Before implementing anything always double-consult with the instruction files. If uncertain for anything, better ask, instead of blindly making decisions. Proceed with the first two components. +``` + +**Note:** Make sure to actually link the files in the prompt. + +After that if the result were good, we instruct the Assistant to continue with the same patterns (we nailed it first try) + +```prompt +Perfect! Continue with all of the components listed in the #file:components-list.instructions.md file. The bar and the button are already implemented. As in the previous task, follow the instructions strictly. Proceed step-by-step, following the instructions and be concise, DO NOT overengineer. + +Use the #file:Avatar_ACC_APIs.html , #file:Avatar_ACC_Standards.html , #file:Button_APIs.html files as examples, refferences. Refer to the template provided in the #file:acc-test-page-generation.instructions.md file. Before implementing anything, always double-check with the instruction files. if uncertain for ANYTHING ask, instead of blindly making decisions. Proceed with the remaining components. +``` + +**Note**: Again, make sure to link the files in the prompt manually. + +### Avoid hallucinations + +A good practice to avoid hallucinations if you have components with large amount of lines, context or else, is to process the components in batches (we did it in batches of 6 to 10), depending on the complexity of the components. + +So in short: every 6 to 10 components → New Chat → Prompt including something like: + +```prompt +I need you to create a comprehensive API test page for ALL of the REMAINING components listed in #file:components-list.instructions.md file. + +Follow the instructions strictly. Proceed step-by-step, following the instruction and be concise, do not overengineer. +Use #file:Bar_APIs.html, #file:Calendar_APIs.html, #file:ColorPalette_APIs.html and all of the attached files as examples/refferences on how the pages are expected to be. You can also refer to the template provided in the #file:acc-test-page-generation.instructions.md. + +Before implementing anything always double-consult with the instruction files. If uncertain for anything, better ask, instead of blindly making decisions. Please proceed with ALL of the remaining components. You can split them in Batches to avoid token and context leakage. MAKE SURE TO NOT INCLUDE ANY DEPRECATED PROPERTIES AND TO INCLUDE ALL OF THE PROPERTIES (EXCEPT THE DEPRECATED ONES) in the test pages. +``` + +### Error handling + +As expected, not everything is always perfect from the first try, so we can encounter some errors, like imports, missing props and so on. + +So a good way to handle errors (or at least from my experience) is to use semantic prompts. What I mean by that is structure your prompts, in a semantic way like emphasizing end/start of the error message, giving context or tips what could be the cause of the error, hints and so on. For example: + +#### Error 1 + +Good! Unfortunately in the APIs page of the Date Components we are unable to see anything, and we've got the following error in the console: + +```error +LocaleData.ts:98 Uncaught (in promise) Error: CLDR data for locale en is not loaded! +``` + +#### Error 2 + +We are still unable to see the components (the calendar). You can check the #file:Calendar.html file for hints, or #file:Calendar.ts for more insights on the CLDR. + +```error +LocaleData.ts:98 Uncaught (in promise) Error: CLDR data for locale en is not loaded! + at getLocaleData (LocaleData.ts:98:9) + at Object.loadResource (LoaderExtensions.ts:10:9) + at getOrLoad (LocaleData.js:2520:55) + at getData (LocaleData.js:2572:13) + at new constructor (LocaleData.js:57:23) + at new LocaleData (LocaleData.ts:6:1) + at getCachedLocaleDataInstance (getCachedLocaleDataInstance.ts:9:21) + at get _primaryCalendarType (DateComponentBase.ts:129:22) + at Calendar.getFormat (DateComponentBase.ts:246:24) + at get _selectedDatesTimestamps (Calendar.ts:355:56) +``` + +## Manual AXE Testing + +After all of the errors are handled, all APIs, samples and whatnot are here and our API Pages look good, we can now proceed to the acc part. + +### What we did + 1. We manually traverse through our API pages and check for issues with the AXE tool + 2. All individual issues summarised and structured in Notes, .md file or else + 3. The file we did was structured in format like: + + ```md + # Accessibility Issues Report + + Files included in the report: + + - Component X; + - Component Y; + - Component Z; + + ## Overview + This document contains accessibility issues found across multiple API documentation pages. + + ## Component X + + ### Issues 1 of N (found with AXE) + + **Element Location:** + ```code + #element[class], .class[attr] + ``` + + **Element Code:** + ```html + #element[class], .class[attr] + ``` + + **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 + + **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 + ``` + 4. Then we gave the document to the AI to fix the issues (if they were sample issues) + 5. Most (if not all) of them were component level ACC issues, at least in our case. \ No newline at end of file From 38523cca0d276aa8e379920782066bb44e7bf4ad Mon Sep 17 00:00:00 2001 From: Stoyan Date: Wed, 12 Nov 2025 13:51:30 +0200 Subject: [PATCH 5/6] slight changes --- API_Pages_Framework.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/API_Pages_Framework.md b/API_Pages_Framework.md index fc4f219ba433..4a97658bc7d0 100644 --- a/API_Pages_Framework.md +++ b/API_Pages_Framework.md @@ -1,4 +1,4 @@ -# Step-by-step framework on Team Balkan Components +# Step-by-step framework for Team Balkan Components – API Pages Below is the exact framework that we used, to generate API Test Pages of Team Balkan's web components. @@ -16,7 +16,7 @@ Below is the exact framework that we used, to generate API Test Pages of Team Ba ```prompt I need you to create a comprehensive API test page for ALL of the components listed in #file:components-list.instructions.md file. -Follow the instructions strictly. Let’s start with the first 2 components. Proceed step-by-step, following the instruction and be concise, DO NOT overengineer. +Follow the instructions strictly. Let’s start with the first 2 components. Proceed step-by-step, following the instruction file, be concise and DO NOT overengineer. Use #file:Avatar_ACC_APIs.html and #file:Avatar_ACC_Standards.html files as examples/refferences on how the pages are expected to be. You can also refer to the template provided in the #file:acc-test-page-generation.instructions.md . Before implementing anything always double-consult with the instruction files. If uncertain for anything, better ask, instead of blindly making decisions. Proceed with the first two components. From 745071a9da61a6cff1be065b9d4239367afb7c21 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Tue, 18 Nov 2025 14:07:47 +0200 Subject: [PATCH 6/6] add all components' api pages --- .../acc-improvements-part-1.instructions.md | 221 ------ .../acc-test-page-generation.instructions.md | 1 + .github/components-list.instructions.md | 45 +- .../AI_Button_APIs.html | 425 ++++++++++++ .../DynamicDateRange_APIs.html | 304 +++++++++ .../DynamicSideContent_APIs.html | 484 +++++++++++++ .../FilterItemOption_APIs.html | 278 ++++++++ .../FilterItem_APIs.html | 269 ++++++++ .../SortItem_APIs.html | 265 +++++++ .../TimelineGroupItem_APIs.html | 453 ++++++++++++ .../TimelineItem_APIs.html | 645 ++++++++++++++++++ .../Timeline_APIs.html | 441 ++++++++++++ .../ViewSettingsDialog_APIs.html | 397 +++++++++++ 13 files changed, 3980 insertions(+), 248 deletions(-) delete mode 100644 .github/acc-improvements-part-1.instructions.md create mode 100644 packages/main/test/pages/acc-api-test-generation/AI_Button_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/DynamicDateRange_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/DynamicSideContent_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/FilterItemOption_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/FilterItem_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/SortItem_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/TimelineGroupItem_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/TimelineItem_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/Timeline_APIs.html create mode 100644 packages/main/test/pages/acc-api-test-generation/ViewSettingsDialog_APIs.html diff --git a/.github/acc-improvements-part-1.instructions.md b/.github/acc-improvements-part-1.instructions.md deleted file mode 100644 index ab49a8d95623..000000000000 --- a/.github/acc-improvements-part-1.instructions.md +++ /dev/null @@ -1,221 +0,0 @@ -# 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 -