Merge pull request #1733 from guilherme-gm/fix-rightpanel

fix(cv-header): fix crash when focusing out of right panels

Author: guilherme-gm

src/components/CvUIShell/CvHeader.vue

@@ -192,10 +192,10 @@ function onCvPanelFocusout(payload) {
     item => item.ariaControls === srcComponent.id
   );
   if (
-    srcComponent.el !== srcEvent.relatedTarget &&
-    !srcComponent.el.contains(srcEvent.relatedTarget) &&
+    srcComponent.el.value !== srcEvent.relatedTarget &&
+    !srcComponent.el.value.contains(srcEvent.relatedTarget) &&
     found &&
-    found.el !== srcEvent.relatedTarget
+    found.el.value !== srcEvent.relatedTarget
   ) {
     onCvPanelControlToggle(found, false);
   }

src/components/CvUIShell/__tests__/CvHeader.spec.js

@@ -9,6 +9,8 @@ import CvSideNavItems from '../CvSideNavItems.vue';
 import CvSideNavMenu from '../CvSideNavMenu.vue';
 import CvSideNavMenuItem from '../CvSideNavMenuItem.vue';
 import CvSideNavLink from '../CvSideNavLink.vue';
+import PanelFocusTestComponent from './PanelFocusTestComponent.vue';
+import { nextTick } from 'vue';
 
 const globalHeader = {
   components: { CvHeaderGlobalAction },
@@ -101,6 +103,52 @@ describe('CvHeader', () => {
     expect(onResize.mock.calls.length).toBe(2);
   });
 
+  it('should allow user to focus between elements in the right panel', async () => {
+    const user = userEvent.setup();
+    const component = render(PanelFocusTestComponent);
+
+    const testPanel = await component.findByTestId('links-panel');
+    expect(testPanel.getAttribute('aria-hidden')).toBe('true'); // panel is closed
+
+    const actionButton = await component.findByTestId('action-button');
+    await user.click(actionButton);
+
+    expect(testPanel.getAttribute('aria-hidden')).toBe('false'); // panel is open
+
+    const link1 = await component.findByTestId('link-1');
+    const link2 = await component.findByTestId('link-2');
+
+    link1.focus();
+    expect(testPanel.getAttribute('aria-hidden')).toBe('false');
+
+    link2.focus();
+    expect(testPanel.getAttribute('aria-hidden')).toBe('false');
+  });
+
+  it('should close the right panel when focusing out of its elements', async () => {
+    const user = userEvent.setup();
+    const component = render(PanelFocusTestComponent);
+
+    const testPanel = await component.findByTestId('links-panel');
+    expect(testPanel.getAttribute('aria-hidden')).toBe('true'); // panel is closed
+
+    const actionButton = await component.findByTestId('action-button');
+    await user.click(actionButton);
+
+    expect(testPanel.getAttribute('aria-hidden')).toBe('false'); // panel is open
+
+    const link1 = await component.findByTestId('link-1');
+    link1.focus();
+    expect(testPanel.getAttribute('aria-hidden')).toBe('false');
+
+    const outerInput = await component.findByTestId('outer-input');
+    outerInput.focus();
+
+    await nextTick();
+
+    expect(testPanel.getAttribute('aria-hidden')).toBe('true'); // panel is closed
+  });
+
   it('CvHeader - side nav rail', async () => {
     const result = render(CvHeader, {
       slots: {

src/components/CvUIShell/__tests__/PanelFocusTestComponent.vue

@@ -0,0 +1,47 @@
+<script setup>
+import CvHeader from '../CvHeader.vue';
+import CvHeaderGlobalAction from '../CvHeaderGlobalAction.vue';
+import CvHeaderPanel from '../CvHeaderPanel.vue';
+import CvSwitcher from '../CvSwitcher.vue';
+import CvSwitcherItem from '../CvSwitcherItem.vue';
+import CvSwitcherItemLink from '../CvSwitcherItemLink.vue';
+</script>
+
+<template>
+  <cv-header>
+    <template #header-global>
+      <cv-header-global-action
+        data-testid="action-button"
+        aria-label="List links"
+        aria-controls="links-panel"
+        label="Links"
+      >
+        Links
+      </cv-header-global-action>
+    </template>
+    <template #right-panels>
+      <cv-header-panel id="links-panel" data-testid="links-panel">
+        <cv-switcher>
+          <cv-switcher-item>
+            <cv-switcher-item-link
+              href="javascript:void(0)"
+              data-testid="link-1"
+              selected
+            >
+              Selected app
+            </cv-switcher-item-link>
+          </cv-switcher-item>
+          <cv-switcher-item>
+            <cv-switcher-item-link
+              href="javascript:void(0)"
+              data-testid="link-2"
+            >
+              Other app
+            </cv-switcher-item-link>
+          </cv-switcher-item>
+        </cv-switcher>
+      </cv-header-panel>
+    </template>
+  </cv-header>
+  <input type="text" data-testid="outer-input" />
+</template>