feat(ui5-li-notification): edit documentation and code comments

SAP · Apr 19, 2024 · 5f2f57d · 5f2f57d
1 parent 9b7e7aa
commit 5f2f57d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 22 deletions.
diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts
@@ -51,24 +51,23 @@ type NotificationListGroupItemToggleEventDetail = {
  * The component can be used in a standard `ui5-list`.
  *
  * ### Keyboard Handling
+ * The `ui5-li-notification-group` provides advanced keyboard handling.
  *
  * #### Basic Navigation
- * The `ui5-li-notification-group` provides advanced keyboard handling.
- * When a list is focused the user can use the following keyboard
- * shortcuts in order to perform a navigation:
+ * When a list is focused, the user can use the following keyboard shortcuts in order to navigate:
  *
- * - [Up] or [Down] - Navigates up and down the items
- * - [Home] - Navigates to first item
- * - [End] - Navigates to the last item
+ * - [Up] or [Down] - navigates up or down the items
+ * - [Home] - navigates to the first item
+ * - [End] - navigates to the last item
  *
  * #### Fast Navigation
- * This component provides a fast navigation when the Header si focused using the the following keyboard shortcuts:
+ * This component provides fast navigation when the header is focused using the following keyboard shortcuts:
  *
- * - [Space] - toggles "expand" / "collapse" of the group
- * - [Plus] - expands the  group
- * - [Minus] - collapses the  group
- * - [Right] - expands the  group
- * - [Left] - collapses the  group
+ * - [Space] - toggles expand / collapse of the group
+ * - [Plus] - expands the group
+ * - [Minus] - collapses the group
+ * - [Right] - expands the group
+ * - [Left] - collapses the group
  *
  * ### ES6 Module Import
  *
@@ -181,7 +180,7 @@ class NotificationListGroupItem extends NotificationListItemBase {
 	 *
 	 */
 	_onBtnToggleClick() {
-		// handled by the Header with _onHeaderToggleClick
+		// handled by the header with _onHeaderToggleClick
 	}
 
 	_onHeaderToggleClick() {
@@ -221,7 +220,7 @@ class NotificationListGroupItem extends NotificationListItemBase {
 			const notificationItems = this.items;
 			const firstAvailableItem = notificationItems.find(item => !item.hasAttribute("busy"));
 
-			// if the focus is on the Header (whole group) move it to the first Notification item
+			// if the focus is on the header (whole group) move it to the first notification item
 			if (!this.collapsed && this.hasAttribute("focused") && firstAvailableItem) {
 				firstAvailableItem.focus();
 			}
@@ -231,7 +230,7 @@ class NotificationListGroupItem extends NotificationListItemBase {
 			const notificationItems = this.items;
 			const firstAvailableItem = notificationItems.find(item => !item.hasAttribute("busy"));
 
-			// if the focus is on the first Notification item move it to the Header (whole group)
+			// if the focus is on the first notification item move it to the header (whole group)
 			if (!this.collapsed && firstAvailableItem && e.target === firstAvailableItem) {
 				this.focus();
 			}

diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
@@ -97,14 +97,14 @@ const ICON_PER_STATUS = {
  * #### Basic Navigation
  * The user can use the following keyboard shortcuts to perform actions (such as select, delete):
  *
- * - [Enter] - Select an item (trigger "item-click" event)
- * - [Delete] - Close an item (trigger "item-close" event)
+ * - [Enter] - select an item (trigger "item-click" event)
+ * - [Delete] - close an item (trigger "item-close" event)
  *
  * #### Fast Navigation
  * This component provides a fast navigation using the the following keyboard shortcuts:
  *
- * - [Shift + Enter] - "More"/"Less" link will be triggered
- * - [Shift + F10] - Menu (actions) button will be triggered (clicked)
+ * - [Shift] + [Enter] - 'More'/'Less' link will be triggered
+ * - [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)
  *
  * ### ES6 Module Import
  *
@@ -173,7 +173,7 @@ class NotificationListItem extends NotificationListItemBase {
 	state!: `${NotificationListItemState}`;
 
 	/**
-	 * Defines if the `close` button would be displayed.
+	 * Defines if the `Close` button would be displayed.
 	 * @default false
 	 * @public
 	 */
@@ -221,7 +221,7 @@ class NotificationListItem extends NotificationListItemBase {
 	*
 	* **Note:** Use this for implementing actions.
 	*
-	* **Note:** Should be used instead i5-notification-action, which is deprecated as of ui5-web-components version 2.0.
+	* **Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.
 	* @public
 	*/
 	@slot()

diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html
@@ -17,7 +17,7 @@
 	<ui5-shellbar id="shellbar" primary-title="Product Title" show-notifications>
 	</ui5-shellbar>
 
-	<ui5-list id="notificationListWithMenu" header-text="Notifications that uses Menu for actions as per the new design (2024)">
+	<ui5-list id="notificationListWithMenu" header-text="Notifications that use Menu for actions as per the new design (2024)">
 		<ui5-li-notification
 			show-close
 			priority="High"