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/SpecialCalendarDate_APIs.html b/packages/main/test/pages/acc-api-test-generation/SpecialCalendarDate_APIs.html new file mode 100644 index 000000000000..79a995d5637b --- /dev/null +++ b/packages/main/test/pages/acc-api-test-generation/SpecialCalendarDate_APIs.html @@ -0,0 +1,182 @@ + + + + + UI5 SpecialCalendarDate API Samples + + + + + + + + + + + + + + + + + +
+
+

UI5 SpecialCalendarDate Component API Samples

+ +
+
+

Value Property API

+
Using value property to define which date should be visually distinguished in the calendar
+
+
+
+ Calendar with Special Dates (Nov 2025) + + + + + +
+
+
+
+
+ +
+
+

Type Property API

+
Using type property to define the visual style of special dates: Type01-Type20, NonWorkingDay
+
+
+
+ Different Type Colors + + + + + + + + +
+
+
+
+
+ +
+
+

Usage with SpecialDates Slot

+
SpecialCalendarDate must be placed in the specialDates slot of ui5-calendar
+
+
+
+ Holidays and Events + + + + + +
+
+
+
+
+ +
+
+

Integration with CalendarLegend

+
Special dates can be explained using a CalendarLegend with matching types
+
+
+
+ Calendar with Legend + + + + + + + + + + +
+
+
Test instructions: Click legend items to filter special dates by type
+
+
+
+ +
+
+

Multiple Special Dates

+
Multiple SpecialCalendarDate elements can be used to mark various dates with different types
+
+
+
+ Mixed Special Dates + + + + + + + +
+
+
+
+
+
+
+ + + + + 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/Switch_APIs.html b/packages/main/test/pages/acc-api-test-generation/Switch_APIs.html new file mode 100644 index 000000000000..37afbf73349f --- /dev/null +++ b/packages/main/test/pages/acc-api-test-generation/Switch_APIs.html @@ -0,0 +1,347 @@ + + + + + UI5 Switch API Samples + + + + + + + + + + + + + + + +
+
+

UI5 Switch Component API Samples

+ +
+
+

Checked Property API

+
Using checked property to set the switch state
+
+
+
+ Unchecked Switch + +
+
+ Checked Switch + +
+
+
+
+
+ +
+
+

Disabled Property API

+
Using disabled property to prevent user interaction
+
+
+
+ Enabled Switch + +
+
+ Disabled Switch + +
+
+ Disabled Checked Switch + +
+
+
+
+
+ +
+
+

Design Property API

+
Using design property to set visual style: Textual or Graphical
+
+
+
+ Textual Design + +
+
+ Graphical Design + +
+
+
+
+
+ +
+
+

TextOn and TextOff Properties API

+
Using textOn and textOff properties to display custom text in Textual design
+
+
+
+ Default Texts + +
+
+ Custom Texts + +
+
+ Short Texts + +
+
+
+
+
+ +
+
+

Change Event API

+
Fired when switch checked state changes
+

Test instruction: Toggle the switch to trigger the event

+
+
+
+ Toggle to trigger event + +
+
+ Current state: + unchecked +
+
+ Change count: + 0 +
+
+
+
+
+ +
+
+

AccessibleName Property API

+
Using accessibleName to provide ARIA label for screen readers
+

Test instruction: Use screen reader to verify the accessible name

+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+

AccessibleNameRef Property API

+
Using accessibleNameRef to reference external label element
+

Test instruction: Use screen reader to verify label association

+
+
+
+ Enable Feature A + +
+
+ Enable Feature B + +
+
+
+
+
+ +
+
+

Tooltip Property API

+
Using tooltip property to provide additional information on hover
+

Test instruction: Hover over switches to see tooltips

+
+
+
+ + With tooltip +
+
+ + Checked with tooltip +
+
+
+
+
+ +
+
+

Required Property API

+
Using required property for form validation
+
+
+
+ Required Switch + +
+
+ Optional Switch + +
+
+
+
+
+ +
+
+

Name and Value Properties API

+
Using name and value properties for HTML form submission
+
+
+
+ Newsletter Subscription + +
+
+ Email Notifications + +
+
+
+
+
+ +
+
+

Keyboard Navigation

+
Switch can be toggled using Space and Enter keys
+

Test instruction: Tab to focus, press Space or Enter to toggle

+
+
+
+ Keyboard Accessible Switch + +
+
+ State: + unchecked +
+
+
+
+
+ +
+
+

CSS Parts API

+
Switch exposes CSS parts for custom styling: slider, text-on, text-off, handle
+
+
+
+ Standard Switch + +
+
+ Graphical Switch + +
+
+
+
+
+ +
+
+

ARIA Switch Role

+
Switch has role="switch" and aria-checked state for accessibility
+

Test instruction: Use screen reader to verify switch role and state

+
+
+ + +
+
+
+
+
+
+ + + + + + + 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 diff --git a/packages/main/test/pages/acc-api-test-generation/ToggleButton_APIs.html b/packages/main/test/pages/acc-api-test-generation/ToggleButton_APIs.html new file mode 100644 index 000000000000..111a06eb37f1 --- /dev/null +++ b/packages/main/test/pages/acc-api-test-generation/ToggleButton_APIs.html @@ -0,0 +1,271 @@ + + + + + UI5 ToggleButton API Samples + + + + + + + + + + + + + + + +
+
+

UI5 ToggleButton Component API Samples

+ +
+
+

Pressed Property API

+
Using pressed property to set the toggle state
+

Test instruction: Click buttons to toggle their state

+
+
+ Not Pressed + Pressed +
+
+
+
+ +
+
+

Inherited Button Properties

+
ToggleButton inherits all Button properties: design, icon, disabled, etc.
+
+
+ Emphasized + Positive + Negative + Transparent + Disabled +
+
+
+
+ +
+
+

Click Event API

+
Fired when toggle button is clicked, toggles pressed state automatically
+

Test instruction: Click the button to toggle and see state changes

+
+
+ Toggle Me +
+ State: + not pressed +
+
+ Click count: + 0 +
+
+
+
+
+ +
+
+

Icon Toggle Usage

+
Common use case: toggle button with icon to indicate state
+

Test instruction: Click to toggle favorite state

+
+
+ Add to Favorites +
+
+
+
+ +
+
+

Keyboard Navigation

+
ToggleButton can be toggled using Space and Enter keys
+

Test instruction: Tab to focus, press Space or Enter to toggle

+
+
+ Keyboard Toggle +
+ State: + not pressed +
+
+
+
+
+ +
+
+

ARIA Pressed State

+
ToggleButton has aria-pressed attribute that reflects the pressed state
+

Test instruction: Use screen reader to verify aria-pressed state changes

+
+
+ Not Pressed (aria-pressed=false) + Pressed (aria-pressed=true) +
+
+
+
+ +
+
+

Toggle Group Usage

+
Multiple toggle buttons can be used together as independent choices
+

Test instruction: Click buttons to select multiple options

+
+
+ Select Text Formatting: +
+ Bold + Italic + Underline +
+
+ Selected: + None +
+
+
+
+
+ +
+
+

Preventable Click Event

+
Click event can be prevented to keep current state
+

Test instruction: Click button - toggle is prevented, state doesn't change

+
+
+ Click me (prevented) +
+ State: + Always not pressed +
+
+
+
+
+
+
+ + + + + + +