fix: add aria-controls to details toggle button (#175)

Author: Nii Yeboah

packages/vaadin-details/src/vaadin-details.js

@@ -82,14 +82,15 @@ class DetailsElement extends ControlStateMixin(ElementMixin(ThemableMixin(Polyme
           on-keydown="_onToggleKeyDown"
           disabled$="[[disabled]]"
           aria-expanded$="[[_getAriaExpanded(opened)]]"
+          aria-controls$="[[_contentId]]"
         >
           <span part="toggle"></span>
           <span part="summary-content"><slot name="summary"></slot></span>
         </div>
       </div>
-      <div part="content" aria-hidden$="[[_getAriaHidden(opened)]]">
+      <section id$="[[_contentId]]" part="content" aria-hidden$="[[_getAriaHidden(opened)]]">
         <slot></slot>
-      </div>
+      </section>
     `;
   }
 
@@ -136,6 +137,8 @@ class DetailsElement extends ControlStateMixin(ElementMixin(ThemableMixin(Polyme
 
   ready() {
     super.ready();
+    const uniqueId = (DetailsElement._uniqueId = 1 + DetailsElement._uniqueId || 0);
+    this._contentId = `${this.constructor.is}-content-${uniqueId}`;
     // prevent Shift + Tab on content from host blur
     this._collapsible.addEventListener('keydown', (e) => {
       if (e.shiftKey && e.keyCode === 9) {

packages/vaadin-details/test/details.test.js

@@ -129,6 +129,40 @@ describe('vaadin-details', () => {
       details.opened = true;
       expect(content.getAttribute('aria-hidden')).to.equal('false');
     });
+
+    it('should set aria-controls on toggle button', () => {
+      const idRegex = /^vaadin-details-content-\d+$/;
+      expect(idRegex.test(toggle.getAttribute('aria-controls'))).to.be.true;
+    });
+  });
+
+  describe('unique IDs', () => {
+    const idRegex = /^vaadin-details-content-\d+$/;
+    let container, details;
+
+    beforeEach(() => {
+      container = fixtureSync(`
+        <div>
+          <vaadin-details>
+            <div slot="summary">Summary</div>
+            <input>
+          </vaadin-details>
+          <vaadin-details>
+            <div slot="summary">Summary</div>
+            <input>
+          </vaadin-details>
+        </div>
+      `);
+      details = container.querySelectorAll('vaadin-details');
+    });
+
+    it('should set unique id on the content', () => {
+      const detailsId1 = details[0]._collapsible.id;
+      const detailsId2 = details[1]._collapsible.id;
+      expect(idRegex.test(detailsId1)).to.be.true;
+      expect(idRegex.test(detailsId2)).to.be.true;
+      expect(detailsId1).to.not.equal(detailsId2);
+    });
   });
 
   describe('keyboard events', () => {