fix some pr comments

alexwizp · alexwizp · commit 2741a2181b06 · 2026-02-17T14:33:16.000+02:00
diff --git a/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap b/packages/eui/src/components/popover/__snapshots__/popover.rtl.test.tsx.snap
@@ -7,7 +7,9 @@ exports[`EuiPopover snapshot testing renders 1`] = `
       class="euiPopover testClass1 testClass2 emotion-euiPopover-inline-block-euiTestCss"
       data-test-subj="test subject string"
     >
-      <button />
+      <button
+        aria-expanded="false"
+      />
     </div>
   </div>
 </body>
@@ -20,7 +22,10 @@ exports[`EuiPopover snapshot testing renders with popover contents 1`] = `
       class="euiPopover euiPopover-isOpen testClass1 testClass2 emotion-euiPopover-inline-block-euiTestCss"
       data-test-subj="test subject string"
     >
-      <button />
+      <button
+        aria-controls="euiPopover_generated-id_panelId"
+        aria-expanded="true"
+      />
     </div>
   </div>
   <div
diff --git a/packages/eui/src/components/popover/__snapshots__/popover.test.tsx.snap b/packages/eui/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`EuiPopover children is rendered 1`] = `
   class="euiPopover emotion-euiPopover-inline-block"
   id="1"
 >
-  <button />
+  <button
+    aria-expanded="false"
+  />
 </div>
 `;
 
@@ -15,7 +17,9 @@ exports[`EuiPopover is rendered 1`] = `
   data-test-subj="test subject string"
   id="0"
 >
-  <button />
+  <button
+    aria-expanded="false"
+  />
 </div>
 `;
 
@@ -24,7 +28,9 @@ exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
   class="euiPopover emotion-euiPopover-inline-block"
   id="5"
 >
-  <button />
+  <button
+    aria-expanded="false"
+  />
 </div>
 `;
 
@@ -33,7 +39,9 @@ exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
   class="euiPopover emotion-euiPopover-inline-block"
   id="7"
 >
-  <button />
+  <button
+    aria-expanded="false"
+  />
 </div>
 `;
 
@@ -42,7 +50,9 @@ exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
   class="euiPopover emotion-euiPopover-inline-block"
   id="6"
 >
-  <button />
+  <button
+    aria-expanded="false"
+  />
 </div>
 `;
 
@@ -52,7 +62,10 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="19"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -98,7 +111,10 @@ exports[`EuiPopover props buffer 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="20"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -144,7 +160,10 @@ exports[`EuiPopover props buffer for all sides 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="21"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -189,7 +208,9 @@ exports[`EuiPopover props display block is rendered 1`] = `
   class="euiPopover emotion-euiPopover-block"
   id="2"
 >
-  <button />
+  <button
+    aria-expanded="false"
+  />
 </div>
 `;
 
@@ -199,7 +220,10 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="15"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -244,7 +268,9 @@ exports[`EuiPopover props isOpen defaults to false 1`] = `
   class="euiPopover emotion-euiPopover-inline-block"
   id="8"
 >
-  <button />
+  <button
+    aria-expanded="false"
+  />
 </div>
 `;
 
@@ -254,7 +280,10 @@ exports[`EuiPopover props isOpen renders true 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="9"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -300,7 +329,10 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="10"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -346,7 +378,10 @@ exports[`EuiPopover props ownFocus renders false 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="11"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -383,7 +418,10 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="12"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -429,7 +467,10 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="13"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -475,7 +516,10 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="14"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
@@ -522,7 +566,10 @@ exports[`EuiPopover props popoverScreenReaderText 1`] = `
     class="euiPopover euiPopover-isOpen emotion-euiPopover-inline-block"
     id="22"
   >
-    <button />
+    <button
+      aria-controls="euiPopover_generated-id_panelId"
+      aria-expanded="true"
+    />
     <div
       data-focus-guard="true"
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
diff --git a/packages/eui/src/components/popover/popover.test.tsx b/packages/eui/src/components/popover/popover.test.tsx
@@ -656,109 +656,71 @@ describe('EuiPopover', () => {
     });
   });
 
-  describe('aria attributes on toggle button', () => {
+  describe('ARIA attributes on toggle button', () => {
     beforeAll(() => jest.useFakeTimers());
     afterAll(() => jest.useRealTimers());
 
-    it('sets aria-expanded=true and aria-controls attrs for button trigger', async () => {
-      const toggleButton = <button data-test-subj="toggleButton" />;
+    it('sets aria-expanded="false" and no aria-controls on initial render', async () => {
+      const buttonTrigger = <button data-test-subj="buttonTrigger" />;
 
-      const { rerender, getByTestSubject } = render(
-        <EuiPopover
-          id={getId()}
-          isOpen={false}
-          button={toggleButton}
-          closePopover={() => {}}
-        />
+      const { getByTestSubject } = render(
+        <EuiPopover button={buttonTrigger} closePopover={() => {}} />
       );
 
-      // Open the popover
-      rerender(
+      const button = getByTestSubject('buttonTrigger');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+      expect(button).not.toHaveAttribute('aria-controls');
+    });
+
+    it('not set ARIA attributes for non-button triggers', async () => {
+      const inputTrigger = <input data-test-subj="inputTrigger" />;
+
+      const { getByTestSubject } = render(
         <EuiPopover
-          id={getId()}
-          isOpen={true}
-          button={toggleButton}
+          button={inputTrigger}
+          isOpen={false}
           closePopover={() => {}}
         />
       );
 
-      actAdvanceTimersByTime(openingTransitionTime);
-      await waitForEuiPopoverOpen();
-
-      const btn = getByTestSubject('toggleButton');
-      expect(btn).toHaveAttribute('aria-expanded', 'true');
-      // Should set aria-controls to the popover panel id
-      expect(btn.getAttribute('aria-controls')).toBe(
-        'euiPopover_generated-id_panelId'
-      );
+      const input = getByTestSubject('inputTrigger');
+      expect(input).not.toHaveAttribute('aria-expanded');
+      expect(input).not.toHaveAttribute('aria-controls');
     });
 
-    it('sets aria-expanded=false when closing', async () => {
-      const toggleButton = <button data-test-subj="toggleButton" />;
+    it('updates ARIA attributes to reflect the open state.', async () => {
+      const buttonTrigger = <button data-test-subj="buttonTrigger" />;
 
-      const id = getId();
       const { rerender, getByTestSubject } = render(
         <EuiPopover
-          id={id}
           isOpen={true}
-          button={toggleButton}
-          closePopover={() => {}}
-        />
-      );
-
-      actAdvanceTimersByTime(openingTransitionTime);
-      await waitForEuiPopoverOpen();
-
-      // Close the popover
-      rerender(
-        <EuiPopover
-          id={id}
-          isOpen={false}
-          button={toggleButton}
+          button={buttonTrigger}
           closePopover={() => {}}
         />
       );
 
-      await waitForEuiPopoverClose();
-      actAdvanceTimersByTime(closingTransitionTime);
+      const button = getByTestSubject('buttonTrigger');
 
-      const btn = getByTestSubject('toggleButton');
-      expect(btn).toHaveAttribute('aria-expanded', 'false');
-      // aria-controls should remain set to a panel id string if previously set
-      expect(btn.getAttribute('aria-controls')).toBe(
+      expect(button).toHaveAttribute('aria-expanded', 'true');
+      expect(button).toHaveAttribute(
+        'aria-controls',
         'euiPopover_generated-id_panelId'
       );
-    });
 
-    it('sets NOT set aria-expanded=true and aria-controls attrs for input trigger', async () => {
-      const toggleButton = <input data-test-subj="triggerInput" />;
-
-      const { rerender, getByTestSubject } = render(
-        <EuiPopover
-          id={getId()}
-          isOpen={false}
-          button={toggleButton}
-          closePopover={() => {}}
-        />
-      );
-
-      // Open the popover
+      // Close the popover
       rerender(
         <EuiPopover
-          id={getId()}
-          isOpen={true}
-          button={toggleButton}
+          isOpen={false}
+          button={buttonTrigger}
           closePopover={() => {}}
         />
       );
 
       actAdvanceTimersByTime(openingTransitionTime);
-      await waitForEuiPopoverOpen();
-
-      const btn = getByTestSubject('triggerInput');
+      await waitForEuiPopoverClose();
 
-      expect(btn).not.toHaveAttribute('aria-expanded');
-      expect(btn).not.toHaveAttribute('aria-controls');
+      expect(button).toHaveAttribute('aria-expanded', 'false');
+      expect(button).not.toHaveAttribute('aria-controls');
     });
   });
 });
diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx
