ilhan007 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/packages/fiori/src/Bar.ts b/packages/fiori/src/Bar.ts
@@ -33,7 +33,7 @@ import BarCss from "./generated/themes/Bar.css.js";
  * ### Keyboard Handling
  *
  * #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
  * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *

diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts
@@ -107,13 +107,13 @@ type FlexibleColumnLayoutAccessibilityRoles = {
  *
  * #### Basic Navigation
  *
- * - [SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).
- * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * - [Space] / [Enter] or [Return] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).
+ * - This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
  * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
  * #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
  * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *

diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts
@@ -72,10 +72,10 @@ const COLUMNS_COUNT: Record<string, number> = {
  * When the thumbnails menu is focused the following keyboard
  * shortcuts allow the user to navigate through the thumbnail items:
  *
- * - [UP/DOWN] - Navigates up and down the items
- * - [HOME] - Navigates to first item
- * - [END] - Navigates to the last item
- * - [SPACE/ENTER] - Select an item
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Home] - Navigates to first item
+ * - [End] - Navigates to the last item
+ * - [Space], [Enter] - Selects an item
  *
  * ### ES6 Module Import
  * `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`

diff --git a/packages/fiori/src/MediaGalleryItem.ts b/packages/fiori/src/MediaGalleryItem.ts
@@ -29,7 +29,7 @@ import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemp
  * When focused, the user can use the following keyboard
  * shortcuts in order to perform a navigation:
  *
- * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  *
  * ### ES6 Module Import
  * `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";` (comes with `ui5-media-gallery`)

diff --git a/packages/fiori/src/ProductSwitch.ts b/packages/fiori/src/ProductSwitch.ts
@@ -50,9 +50,9 @@ interface IProductSwitchItem extends HTMLElement, ITabbable {
  * When focused, the user can use the following keyboard
  * shortcuts in order to perform a navigation:
  *
- * - [TAB] - Move focus to the next interactive element after the `ui5-product-switch`
- * - [UP/DOWN] - Navigates up and down the items
- * - [LEFT/RIGHT] - Navigates left and right the items
+ * - [Tab] - Move focus to the next interactive element after the `ui5-product-switch`
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Left] or [Right] - Navigates left and right the items
  *
  * ### ES6 Module Import
  * `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";`

diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts
@@ -24,7 +24,7 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
  * When focused, the user can use the following keyboard
  * shortcuts in order to perform a navigation:
  *
- * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  *
  * ### ES6 Module Import
  * `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`

diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
@@ -153,7 +153,7 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
  * ### Keyboard Handling
  *
  * #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
  * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *

diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
@@ -84,7 +84,7 @@ type NavigationMenuClickEventDetail = MenuItemClickEventDetail & {
  * ### Keyboard Handling
  *
  * ### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
  * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *

diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
@@ -632,7 +632,7 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	/**
-	 * If the dialog is closed by [ESC] key, do the same as if the `Cancel` button is pressed.
+	 * If the dialog is closed by [Escape] key, do the same as if the `Cancel` button is pressed.
 	 * @param evt
 	 */
 	_restoreConfirmedOnEscape(evt: CustomEvent) { // Dialog#before-close

diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts
@@ -125,14 +125,14 @@ type StepInfo = {
  *
  * #### Wizard Progress Navigation
  *
- * 	- [LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.
- * 	- [UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.
- * 	- [SPACE] or [ENTER], [RETURN] - Selects an active step
- * 	- [HOME] or [PAGE UP] - Focus goes to the first step
- * 	- [END] or [PAGE DOWN] - Focus goes to the last step
+ * 	- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.
+ * 	- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.
+ * 	- [Space] / [Enter] or [Return] - Selects an active step
+ * 	- [Home] or [PAGE UP] - Focus goes to the first step
+ * 	- [End] or [PAGE DOWN] - Focus goes to the last step
  *
  * #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
  * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *

diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts
@@ -42,8 +42,8 @@ import "@ui5/webcomponents-icons/dist/alert.js";
  *
  * ### Keyboard Handling
  *
- * - [SPACE, ENTER, RETURN] - Fires the `click` event if the `interactive` property is set to true.
- * - [SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.
+ * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.
  *
  * ### ES6 Module Import
  * `import "@ui5/webcomponents/dist/Avatar.js";`

diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts
@@ -95,13 +95,6 @@ type AvatarGroupClickEventDetail = {
  * - `Individual` type: The avatars are displayed side-by-side and each
  * avatar has its own click/tap area.
  *
- * ### Responsive Behavior
- *
- * When the available space is less than the width required to display all avatars,
- * an overflow visualization appears as a button placed at the end with the same shape
- * and size as the avatars. The visualization displays the number of avatars that have overflowed
- * and are not currently visible.
- *
  * ### Usage
  *
  * Use the `AvatarGroup` if:
@@ -115,24 +108,31 @@ type AvatarGroupClickEventDetail = {
  * - You want to display a gallery for simple images.
  * - You want to use it for other visual content than avatars.
  *
+ * ### Responsive Behavior
+ *
+ * When the available space is less than the width required to display all avatars,
+ * an overflow visualization appears as a button placed at the end with the same shape
+ * and size as the avatars. The visualization displays the number of avatars that have overflowed
+ * and are not currently visible.
+ *
  * ### Keyboard Handling
  * The component provides advanced keyboard handling.
  * When focused, the user can use the following keyboard
  * shortcuts in order to perform a navigation:
  *
  * `type` Individual:
  *
- * - [TAB] - Move focus to the overflow button
- * - [LEFT] - Navigate one avatar to the left
- * - [RIGHT] - Navigate one avatar to the right
- * - [HOME] - Navigate to the first avatar
- * - [END] - Navigate to the last avatar
- * - [SPACE],[ENTER],[RETURN] - Trigger `ui5-click` event
+ * - [Tab] - Move focus to the overflow button
+ * - [Left] - Navigate one avatar to the left
+ * - [Right] - Navigate one avatar to the right
+ * - [Home] - Navigate to the first avatar
+ * - [End] - Navigate to the last avatar
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  *
  * `type` Group:
  *
- * - [TAB] - Move focus to the next interactive element after the component
- * - [SPACE],[ENTER],[RETURN] - Trigger `ui5-click` event
+ * - [Tab] - Move focus to the next interactive element after the component
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  * @constructor
  * @extends UI5Element
  * @since 1.0.0-rc.11

diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts
@@ -67,15 +67,15 @@ type BreadcrumbsItemClickEventDetail = {
  * ### Keyboard Handling
  * The `ui5-breadcrumbs` provides advanced keyboard handling.
  *
- * - [F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - If the dropdown arrow is focused - opens/closes the drop-down.
- * - [SPACE, ENTER] - Activates the focused item and triggers the `item-click` event.
- * - [ESC] - Closes the drop-down.
- * - [LEFT] - If the drop-down is closed - navigates one item to the left.
- * - [RIGHT] - If the drop-down is closed - navigates one item to the right.
- * - [UP] - If the drop-down is open - moves focus to the next item.
- * - [DOWN] - If the drop-down is open - moves focus to the previous item.
- * - [HOME] - Navigates to the first item.
- * - [END] - Navigates to the last item.
+ * - [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.
+ * - [Space],[Enter] - Activates the focused item and triggers the `item-click` event.
+ * - [Escape] - Closes the drop-down.
+ * - [Left] - If the drop-down is closed - navigates one item to the left.
+ * - [Right] - If the drop-down is closed - navigates one item to the right.
+ * - [Up] - If the drop-down is open - moves focus to the next item.
+ * - [Down] - If the drop-down is open - moves focus to the previous item.
+ * - [Home] - Navigates to the first item.
+ * - [End] - Navigates to the last item.
  * @constructor
  * @extends UI5Element
  * @public

diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
@@ -91,38 +91,38 @@ type SpecialCalendarDateT = {
  * - Day picker:
  *
  * - [F4] - Shows month picker
- * - [SHIFT] + [F4] - Shows year picker
- * - [PAGEUP] - Navigate to the previous month
- * - [PAGEDOWN] - Navigate to the next month
- * - [SHIFT] + [PAGEUP] - Navigate to the previous year
- * - [SHIFT] + [PAGEDOWN] - Navigate to the next year
- * - [CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards
- * - [CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards
- * - [HOME] - Navigate to the first day of the week
- * - [END] - Navigate to the last day of the week
- * - [CTRL] + [HOME] - Navigate to the first day of the month
- * - [CTRL] + [END] - Navigate to the last day of the month
+ * - [Shift] + [F4] - Shows year picker
+ * - [Page Up] - Navigate to the previous month
+ * - [Page Down] - Navigate to the next month
+ * - [Shift] + [Page Up] - Navigate to the previous year
+ * - [Shift] + [Page Down] - Navigate to the next year
+ * - [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards
+ * - [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards
+ * - [Home] - Navigate to the first day of the week
+ * - [End] - Navigate to the last day of the week
+ * - [Ctrl] + [Home] - Navigate to the first day of the month
+ * - [Ctrl] + [End] - Navigate to the last day of the month
  *
  * - Month picker:
  *
- * - [PAGEUP] - Navigate to the previous year
- * - [PAGEDOWN] - Navigate to the next year
- * - [HOME] - Navigate to the first month of the current row
- * - [END] - Navigate to the last month of the current row
- * - [CTRL] + [HOME] - Navigate to the first month of the current year
- * - [CTRL] + [END] - Navigate to the last month of the year
+ * - [Page Up] - Navigate to the previous year
+ * - [Page Down] - Navigate to the next year
+ * - [Home] - Navigate to the first month of the current row
+ * - [End] - Navigate to the last month of the current row
+ * - [Ctrl] + [Home] - Navigate to the first month of the current year
+ * - [Ctrl] + [End] - Navigate to the last month of the year
  *
  * - Year picker:
  *
- * - [PAGEUP] - Navigate to the previous year range
- * - [PAGEDOWN] - Navigate the next year range
- * - [HOME] - Navigate to the first year of the current row
- * - [END] - Navigate to the last year of the current row
- * - [CTRL] + [HOME] - Navigate to the first year of the current year range
- * - [CTRL] + [END] - Navigate to the last year of the current year range
+ * - [Page Up] - Navigate to the previous year range
+ * - [Page Down] - Navigate the next year range
+ * - [Home] - Navigate to the first year of the current row
+ * - [End] - Navigate to the last year of the current row
+ * - [Ctrl] + [Home] - Navigate to the first year of the current year range
+ * - [Ctrl] + [End] - Navigate to the last year of the current year range
  *
  * #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
  * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *

diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts
@@ -76,11 +76,11 @@ type CarouselNavigateEventDetail = {
  * When the `ui5-carousel` is focused the user can navigate between the items
  * with the following keyboard shortcuts:
  *
- * - [UP/DOWN] - Navigates to previous and next item
- * - [LEFT/RIGHT] - Navigates to previous and next item
+ * - [Up] or [Down] - Navigates to previous and next item
+ * - [Left] or [Right] - Navigates to previous and next item
  *
  * ### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
  *
  * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`

diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts
@@ -65,7 +65,7 @@ let activeCb: CheckBox;
  *
  * The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.
  *
- * - [SPACE, ENTER] - Toggles between different states: checked, not checked.
+ * - [Space],[Enter] - Toggles between different states: checked, not checked.
  *
  * ### ES6 Module Import
  *

diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -135,15 +135,15 @@ type ComboBoxSelectionChangeEventDetail = {
  *
  * The `ui5-combobox` provides advanced keyboard handling.
  *
- * - [F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.
- * - [ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.
- * - [ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.
- * - [DOWN] - Selects the next matching item in the picker.
- * - [UP] - Selects the previous matching item in the picker.
- * - [PAGEDOWN] - Moves selection down by page size (10 items by default).
- * - [PAGEUP] - Moves selection up by page size (10 items by default).
- * - [HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
- * - [END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
+ * - [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.
+ * - [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.
+ * - [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.
+ * - [Down] - Selects the next matching item in the picker.
+ * - [Up] - Selects the previous matching item in the picker.
+ * - [Page Down] - Moves selection down by page size (10 items by default).
+ * - [Page Up] - Moves selection up by page size (10 items by default).
+ * - [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
+ * - [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
  *
  * ### ES6 Module Import
  *

diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
@@ -103,21 +103,21 @@ type DatePickerInputEventDetail = {
  * ### Keyboard Handling
  * The `ui5-date-picker` provides advanced keyboard handling.
  * If the `ui5-date-picker` is focused,
- * you can open or close the drop-down by pressing `F4`, `ALT+UP` or `ALT+DOWN` keys.
- * Once the drop-down is opened, you can use the `UP`, `DOWN`, `LEFT`, `RIGHT` arrow keys
+ * you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
+ * Once the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys
  * to navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can
  * use TAB to reach the buttons for changing month and year.
  *
  * If the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,
  * then users can increment or decrement the date referenced by `dateValue` property
  * by using the following shortcuts:
  *
- * - [PAGEDOWN] - Decrements the corresponding day of the month by one
- * - [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one
- * - [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one
- * - [PAGEUP] - Increments the corresponding day of the month by one
- * - [SHIFT] + [PAGEUP] - Increments the corresponding month by one
- * - [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one
+ * - [Page Down] - Decrements the corresponding day of the month by one
+ * - [Shift] + [Page Down] - Decrements the corresponding month by one
+ * - [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one
+ * - [Page Up] - Increments the corresponding day of the month by one
+ * - [Shift] + [Page Up] - Increments the corresponding month by one
+ * - [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one
  *
  * ### Calendar types
  * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.