List: Focus group header after interaction with header if collapsibleGroups: true, skip invisible items

Author: marker-dao

packages/devextreme/js/__internal/ui/collection/m_collection_widget.base.ts

@@ -388,12 +388,39 @@ const CollectionWidget = Widget.inherit({
     this._updateParentActiveDescendant();
   },
 
+  _getElementClassToSkipRefreshId: noop,
+
+  _shouldSkipRefreshId(target) {
+    const elementClass = this._getElementClassToSkipRefreshId() ?? '';
+    const shouldSkipRefreshId = $(target).hasClass(elementClass);
+
+    return shouldSkipRefreshId;
+  },
+
   _refreshActiveDescendant($target) {
-    this.setAria('activedescendant', isDefined(this.option('focusedElement')) ? this.getFocusedItemId() : null, $target);
+    const { focusedElement } = this.option();
+
+    if (isDefined(focusedElement)) {
+      const shouldSetExistingId = this._shouldSkipRefreshId(focusedElement);
+      const id = shouldSetExistingId ? $(focusedElement).attr('id') : this.getFocusedItemId();
+
+      this.setAria('activedescendant', id, $target);
+
+      return;
+    }
+
+    this.setAria('activedescendant', null, $target);
   },
 
   _refreshItemId($target, needCleanItemId) {
-    if (!needCleanItemId && this.option('focusedElement')) {
+    const { focusedElement } = this.option();
+    const shouldSkipRefreshId = this._shouldSkipRefreshId($target);
+
+    if (shouldSkipRefreshId) {
+      return;
+    }
+
+    if (!needCleanItemId && focusedElement) {
       this.setAria('id', this.getFocusedItemId(), $target);
     } else {
       this.setAria('id', null, $target);

packages/devextreme/js/__internal/ui/list/m_list.base.ts

@@ -305,7 +305,7 @@ export const ListBase = CollectionWidget.inherit({
 
     const $listGroup = this._getItemsContainer().children(`.${LIST_GROUP_CLASS}`);
 
-    const $items = $listGroup.find(itemAndHeaderSelector).filter(':visible');
+    const $items = $listGroup.find(itemAndHeaderSelector);
 
     return $items;
   },
@@ -314,7 +314,16 @@ export const ListBase = CollectionWidget.inherit({
     const { collapsibleGroups } = this.option();
 
     if (collapsibleGroups) {
-      return this._getItemAndHeaderElements();
+      const $elements = this._getItemAndHeaderElements();
+      const $visibleItems = $elements.filter((_, element) => {
+        if ($(element).hasClass(LIST_GROUP_HEADER_CLASS)) {
+          return true;
+        }
+
+        return !$(element).closest(`.${LIST_GROUP_CLASS}`).hasClass(LIST_GROUP_COLLAPSED_CLASS);
+      });
+
+      return $visibleItems;
     }
 
     return this.callBase($itemElements);
@@ -671,9 +680,9 @@ export const ListBase = CollectionWidget.inherit({
       this._collapseGroupHandler($group);
 
       if (focusStateEnabled) {
-        const listItemElement = getPublicElement($group.find(`.${LIST_ITEM_CLASS}`).eq(0));
+        const groupHeader = getPublicElement($group.find(`.${LIST_GROUP_HEADER_CLASS}`));
 
-        this.option({ focusedElement: listItemElement });
+        this.option({ focusedElement: groupHeader });
       }
     };
 
@@ -833,6 +842,10 @@ export const ListBase = CollectionWidget.inherit({
     }
   },
 
+  _getElementClassToSkipRefreshId() {
+    return LIST_GROUP_HEADER_CLASS;
+  },
+
   _attachSwipeEvent($itemElement) {
     const endEventName = addNamespace(swipeEventEnd, this.NAME);