From 4f36e6c1e8f9dff638848c2f5d86adfcd1499f8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 18 Mar 2022 09:46:07 +0100
Subject: [PATCH] MOBILE-3814 a11y: Add aria-controls to collapsible-item

---
 src/core/directives/collapsible-item.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts
index 41990f722..caffa6270 100644
--- a/src/core/directives/collapsible-item.ts
+++ b/src/core/directives/collapsible-item.ts
@@ -16,6 +16,7 @@ import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
 import { CoreLoadingComponent } from '@components/loading/loading';
 import { CoreDomUtils } from '@services/utils/dom';
+import { CoreUtils } from '@services/utils/utils';
 import { Translate } from '@singletons';
 import { CoreComponentsRegistry } from '@singletons/components-registry';
 import { CoreEventObserver } from '@singletons/events';
@@ -50,11 +51,14 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
     protected expandedHeight = 0;
     protected resizeListener?: CoreEventObserver;
     protected domPromise?: CoreCancellablePromise<void>;
+    protected uniqueId: string;
 
     constructor(el: ElementRef<HTMLElement>) {
         this.element = el.nativeElement;
 
         this.element.addEventListener('click', this.elementClicked.bind(this));
+        this.uniqueId = 'collapsible-item-' + CoreUtils.getUniqueId('CoreCollapsibleItemDirective');
+        this.element.id = this.uniqueId;
     }
 
     /**
@@ -153,6 +157,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
         const toggleButton = document.createElement('ion-button');
         toggleButton.classList.add('collapsible-toggle');
         toggleButton.setAttribute('fill', 'clear');
+        toggleButton.setAttribute('aria-controls', this.uniqueId);
 
         const toggleText = document.createElement('span');
         toggleText.classList.add('collapsible-toggle-text');
@@ -163,7 +168,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
         expandArrow.classList.add('collapsible-toggle-arrow');
         toggleButton.appendChild(expandArrow);
 
-        this.element.appendChild(toggleButton);
+        this.element.append(toggleButton);
 
         this.toggleExpand(this.expanded);
     }
@@ -194,6 +199,9 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
             expand = !this.expanded;
         }
         this.expanded = expand;
+
+        // Reset scroll inside the element to show always the top part.
+        this.element.scrollTo(0, 0);
         this.element.classList.toggle('collapsible-collapsed', !expand);
         this.setHeight(!expand ? this.maxHeight: undefined);