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

when focusing out of right panels, the emitted event contains a ref to the panel,
but the access was not using '.value' to get the actual DOM element,
crashing the rest of the logic that relied on it

tests were also added to cover the focus processing.

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>