fix: set aria-hidden on details toggle button (#3436) (#3442)

Co-authored-by: Serhii Kulykov <[email protected]>

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>

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 */
+

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();
+    });
+  });
+});