From d2145788ff51bf20973fe520b26624cd64cc7fd8 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Tue, 15 Feb 2022 10:27:47 +0100
Subject: [PATCH] fix: set aria-hidden on details toggle button (#3436) (#3442)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 packages/details/src/vaadin-details.js        |  2 +-
 .../dom/__snapshots__/details.test.snap.js    | 77 +++++++++++++++++++
 packages/details/test/dom/details.test.js     | 33 ++++++++
 3 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 packages/details/test/dom/__snapshots__/details.test.snap.js
 create mode 100644 packages/details/test/dom/details.test.js

diff --git a/packages/details/src/vaadin-details.js b/packages/details/src/vaadin-details.js
index 62abd28270..d6d33bb8f0 100644
--- a/packages/details/src/vaadin-details.js
+++ b/packages/details/src/vaadin-details.js
@@ -84,7 +84,7 @@ class Details extends ShadowFocusMixin(ElementMixin(ThemableMixin(PolymerElement
           aria-expanded$="[[_getAriaExpanded(opened)]]"
           aria-controls$="[[_contentId]]"
         >
-          <span part="toggle"></span>
+          <span part="toggle" aria-hidden="true"></span>
           <span part="summary-content"><slot name="summary"></slot></span>
         </div>
       </div>
diff --git a/packages/details/test/dom/__snapshots__/details.test.snap.js b/packages/details/test/dom/__snapshots__/details.test.snap.js
new file mode 100644
index 0000000000..366c8d8c12
--- /dev/null
+++ b/packages/details/test/dom/__snapshots__/details.test.snap.js
@@ -0,0 +1,77 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["vaadin-crud host default"] = 
+`<vaadin-details tabindex="0">
+  <div slot="summary">
+    Summary
+  </div>
+  <input>
+</vaadin-details>
+`;
+/* end snapshot vaadin-crud host default */
+
+snapshots["vaadin-crud shadow default"] = 
+`<div role="heading">
+  <div
+    aria-controls="vaadin-details-content-1"
+    aria-expanded="false"
+    part="summary"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      aria-hidden="true"
+      part="toggle"
+    >
+    </span>
+    <span part="summary-content">
+      <slot name="summary">
+      </slot>
+    </span>
+  </div>
+</div>
+<section
+  aria-hidden="true"
+  id="vaadin-details-content-1"
+  part="content"
+  style="max-height: 0px;"
+>
+  <slot>
+  </slot>
+</section>
+`;
+/* end snapshot vaadin-crud shadow default */
+
+snapshots["vaadin-crud shadow opened"] = 
+`<div role="heading">
+  <div
+    aria-controls="vaadin-details-content-2"
+    aria-expanded="true"
+    part="summary"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      aria-hidden="true"
+      part="toggle"
+    >
+    </span>
+    <span part="summary-content">
+      <slot name="summary">
+      </slot>
+    </span>
+  </div>
+</div>
+<section
+  aria-hidden="false"
+  id="vaadin-details-content-2"
+  part="content"
+  style=""
+>
+  <slot>
+  </slot>
+</section>
+`;
+/* end snapshot vaadin-crud shadow opened */
+
diff --git a/packages/details/test/dom/details.test.js b/packages/details/test/dom/details.test.js
new file mode 100644
index 0000000000..89a6ba7215
--- /dev/null
+++ b/packages/details/test/dom/details.test.js
@@ -0,0 +1,33 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import '../../vaadin-details.js';
+
+describe('vaadin-crud', () => {
+  let details;
+
+  beforeEach(() => {
+    details = fixtureSync(`
+      <vaadin-details>
+        <div slot="summary">Summary</div>
+        <input>
+      </vaadin-details>
+    `);
+  });
+
+  describe('host', () => {
+    it('default', async () => {
+      await expect(details).dom.to.equalSnapshot();
+    });
+  });
+
+  describe('shadow', () => {
+    it('default', async () => {
+      await expect(details).shadowDom.to.equalSnapshot();
+    });
+
+    it('opened', async () => {
+      details.opened = true;
+      await expect(details).shadowDom.to.equalSnapshot();
+    });
+  });
+});