Merge pull request #363 from Zankel-Engineering/feature/accessibility

Author: shairez

apps/website/src/routes/docs/headless/(components)/popover/examples.tsx

@@ -10,7 +10,7 @@ export const MainExample = component$(() => {
           <PopoverContent>
             <div class="p-4 bg-gray-500">Hi, I'm the content</div>
           </PopoverContent>
-          <PopoverTrigger> Click on me </PopoverTrigger>
+          <PopoverTrigger>Click on me</PopoverTrigger>
         </Popover>
       </div>
       <div q:slot="codeExample">
@@ -28,7 +28,7 @@ export const Example1 = component$(() => {
           <PopoverContent>
             <div class="p-4 bg-gray-500">Hi, I'm the content, but now on top</div>
           </PopoverContent>
-          <PopoverTrigger> Click on me </PopoverTrigger>
+          <PopoverTrigger>Click on me</PopoverTrigger>
         </Popover>
       </div>
       <div q:slot="codeExample">

apps/website/src/routes/docs/tailwind/(components)/popover/index.tsx

@@ -26,9 +26,7 @@ export default component$(() => {
           <Box />
         </PopoverContent>
         <PopoverTrigger>
-          <Button onClick$={() => console.log('here')}>
-            Offset and position
-          </Button>
+          <Button onClick$={() => console.log('here')}>Offset and position</Button>
         </PopoverTrigger>
       </Popover>
 
@@ -88,8 +86,8 @@ export default component$(() => {
 
       <h1 class="mt-8">DISABLE CLICK OUTSIDE</h1>
       <p>
-        Popovers are not closed when click outside but they can be closed
-        clicking their own trigger button only
+        Popovers are not closed when click outside but they can be closed clicking their
+        own trigger button only
       </p>
 
       <div class="flex flex-col gap-2">
@@ -140,8 +138,8 @@ export default component$(() => {
         <code>Current state: {JSON.stringify(controlledPopover.value)}</code>
       </div>
       <p>
-        The popover can be closed clicking outside or clicking the CLOSE button
-        inside the popover
+        The popover can be closed clicking outside or clicking the CLOSE button inside the
+        popover
       </p>
       <p>the onUpdate$ callback allows you to sync local and popover states</p>
 
@@ -156,16 +154,12 @@ export default component$(() => {
           <Card>
             <CardBody>
               <CardTitle>title</CardTitle>
-              <Button onClick$={() => (controlledPopover.value = false)}>
-                CLOSE ME
-              </Button>
+              <Button onClick$={() => (controlledPopover.value = false)}>CLOSE ME</Button>
             </CardBody>
           </Card>
         </PopoverContent>
         <PopoverTrigger>
-          <Button onClick$={() => console.log('clicked')}>
-            TOGGLE POPOVER
-          </Button>
+          <Button onClick$={() => console.log('clicked')}>TOGGLE POPOVER</Button>
         </PopoverTrigger>
       </Popover>
 

cla-signs/v1/cla.json

@@ -288,6 +288,14 @@
       "repoId": 545159943,
       "pullRequestNo": 340
     },
+    {
+      "name": "Zankel-Engineering",
+      "id": 43412711,
+      "comment_id": 1802088836,
+      "created_at": "2023-07-15T17:00:00Z",
+      "repoId": 666652720,
+      "pullRequestNo": 363
+    },
     {
       "name": "balaji-sivasakthi",
       "id": 65065614,
@@ -305,4 +313,4 @@
       "pullRequestNo": 385
     }
   ]
-}
+}

packages/kit-headless/CHANGELOG.md

@@ -1,40 +1,45 @@
 import {
   $,
-  component$,
+  QwikIntrinsicElements,
   Slot,
-  useVisibleTask$,
+  component$,
   useContext,
   useSignal,
   useStylesScoped$,
+  useVisibleTask$
 } from '@builder.io/qwik';
 import { PopoverContext } from './popover-context';
 import styles from './popover-trigger.css?inline';
 
-export const PopoverTrigger = component$(() => {
-  const ref = useSignal<HTMLElement>();
-  const contextService = useContext(PopoverContext);
-  useStylesScoped$(styles);
-
-  useVisibleTask$(() => {
-    contextService.setTriggerRef$(ref);
-  });
+export const PopoverTrigger = component$(
+  (
+    props: QwikIntrinsicElements['span'] & {
+      tabIndex?: number;
+    }
+  ) => {
+    const ref = useSignal<HTMLElement>();
+    const contextService = useContext(PopoverContext);
+    useStylesScoped$(styles);
 
-  const mouseOverHandler = $(() => {
-    contextService.isOpen = true;
-  });
+    useVisibleTask$(() => {
+      contextService.setTriggerRef$(ref);
+    });
 
-  return (
-    <span
-      ref={ref}
-      role="button"
-      class="popover-trigger"
-      onMouseOver$={
-        contextService.triggerEvent === 'mouseOver'
-          ? mouseOverHandler
-          : undefined
-      }
-    >
-      <Slot />
-    </span>
-  );
-});
+    const mouseOverHandler = $(() => {
+      contextService.isOpen = true;
+    });
+    return (
+      <span
+        ref={ref}
+        {...props}
+        role="button"
+        class="popover-trigger"
+        onMouseOver$={
+          contextService.triggerEvent === 'mouseOver' ? mouseOverHandler : undefined
+        }
+      >
+        <Slot />
+      </span>
+    );
+  }
+);

packages/kit-headless/src/components/popover/popover-trigger.tsx

@@ -7,7 +7,7 @@ const PopoverComponent = component$((props: PopoverProps) => {
   return (
     <Popover {...props}>
       <PopoverContent>popover content</PopoverContent>
-      <PopoverTrigger>trigger text</PopoverTrigger>
+      <PopoverTrigger {...props}>trigger text</PopoverTrigger>
     </Popover>
   );
 });
@@ -110,4 +110,10 @@ describe('Popover', () => {
 
     assertClosed();
   });
+
+  it('should set the arial label', () => {
+    const label = 'hello';
+    cy.mount(<PopoverComponent aria-label={label} />);
+    cy.findByRole('button').should('have.attr', 'aria-label', label);
+  });
 });