feat(popover): Making the solution more reliable

Author: Zankel-Engineering

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

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

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

@@ -4,19 +4,37 @@ import {
   component$,
   useContext,
   useSignal,
+  useStore,
   useStylesScoped$,
+  useTask$,
   useVisibleTask$,
 } from '@builder.io/qwik';
-import { ExtendedPropsByAriaAttribute } from '../../utils';
-import { useAriaAttributes } from '../../utils/aria-attributes-helper';
+import {
+  ExtendedPropsByAriaAttribute,
+  QwikUiAreaAttributesFunctionReturnType,
+  getAriaAttributes,
+} from '../../utils';
 import { PopoverContext } from './popover-context';
 import styles from './popover-trigger.css?inline';
 
 export const PopoverTrigger = component$(
-  ({ ariaAttributes }: ExtendedPropsByAriaAttribute) => {
+  (props: ExtendedPropsByAriaAttribute) => {
     const ref = useSignal<HTMLElement>();
     const contextService = useContext(PopoverContext);
     useStylesScoped$(styles);
+    const store = useStore<Partial<QwikUiAreaAttributesFunctionReturnType>>({
+      lastKey: undefined,
+      ariaAttributes: {},
+    });
+    useTask$(({ track }) => {
+      track(() => ({ ...props }));
+      const { lastKey, ariaAttributes } = getAriaAttributes(
+        props,
+        store.lastKey
+      );
+      store.ariaAttributes = ariaAttributes;
+      store.lastKey = lastKey;
+    });
 
     useVisibleTask$(() => {
       contextService.setTriggerRef$(ref);
@@ -25,13 +43,10 @@ export const PopoverTrigger = component$(
     const mouseOverHandler = $(() => {
       contextService.isOpen = true;
     });
-
-    const interesstingAriaAttributes = useAriaAttributes(ariaAttributes);
-
     return (
       <span
         ref={ref}
-        {...interesstingAriaAttributes}
+        {...store.ariaAttributes}
         role="button"
         class="popover-trigger"
         onMouseOver$={

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

@@ -1,16 +1,19 @@
-import { component$ } from '@builder.io/qwik';
+import { AriaAttributes, component$ } from '@builder.io/qwik';
+import { ExtendedPropsByAriaAttribute } from '../../utils';
 import { Popover, PopoverProps } from './popover';
 import { PopoverContent } from './popover-content';
 import { PopoverTrigger } from './popover-trigger';
 
-const PopoverComponent = component$((props: PopoverProps) => {
-  return (
-    <Popover {...props}>
-      <PopoverContent>popover content</PopoverContent>
-      <PopoverTrigger>trigger text</PopoverTrigger>
-    </Popover>
-  );
-});
+const PopoverComponent = component$(
+  (props: ExtendedPropsByAriaAttribute<PopoverProps>) => {
+    return (
+      <Popover {...props}>
+        <PopoverContent>popover content</PopoverContent>
+        <PopoverTrigger {...props}>trigger text</PopoverTrigger>
+      </Popover>
+    );
+  }
+);
 
 describe('Popover', () => {
   function clickOnTrigger() {
@@ -35,6 +38,18 @@ describe('Popover', () => {
     cy.findByRole('button').trigger('mouseover');
   }
 
+  function assertAriaAttribute(attributes: AriaAttributes) {
+    const trigger = cy.findByRole('button');
+    Object.keys(attributes).forEach((attributeKey) => {
+      trigger.should(
+        'have.a.property',
+        `[${attributeKey}]="${
+          attributes[attributeKey as keyof AriaAttributes]
+        }]`
+      );
+    });
+  }
+
   it('INIT', () => {
     cy.mount(<PopoverComponent />);
 
@@ -110,4 +125,10 @@ describe('Popover', () => {
 
     assertClosed();
   });
+
+  it('should set the arial label', () => {
+    const label = 'hello';
+    cy.mount(<PopoverComponent ariaLabel={label} />);
+    assertAriaAttribute({ 'aria-label': label });
+  });
 });

packages/kit-headless/src/utils/aria-attributes-helper.ts

@@ -1,5 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { AriaAttributes } from '@builder.io/qwik';
 import {
+  ExtendedPropsByAriaAttribute,
+  QwikUiAreaAttributesFunctionType,
   QwikUiAriaAttributesKebab,
   isKeyOfAriaAttributes,
   isKeyOfQwikUiAriaAttributes,
@@ -16,42 +19,61 @@ export function keyToKebabCase(str: string): keyof AriaAttributes {
   }
 }
 
-type FunctionType = (
-  ariaAttributes?: Partial<QwikUiAriaAttributesKebab>
-) => Partial<AriaAttributes>;
-
 const cacheMap: Map<string, Partial<AriaAttributes>> = new Map();
 
-const memoize = (func: FunctionType): FunctionType => {
+const memoize = (
+  func: QwikUiAreaAttributesFunctionType
+): QwikUiAreaAttributesFunctionType => {
   return (
-    ariaAttributes?: Partial<QwikUiAriaAttributesKebab>
-  ): Partial<AriaAttributes> => {
-    const key = JSON.stringify(ariaAttributes);
-    if (!cacheMap.has(key) || !ariaAttributes) {
-      const out = func(ariaAttributes);
-      cacheMap.set(key, out);
-      return out;
+    qwikUiAriaAttributes?: Partial<QwikUiAriaAttributesKebab>,
+    lastKey?: string
+  ): ReturnType<QwikUiAreaAttributesFunctionType> => {
+    const key = JSON.stringify(qwikUiAriaAttributes);
+    if (lastKey) {
+      cacheMap.delete(lastKey);
+    }
+    if (!cacheMap.has(key) || !qwikUiAriaAttributes) {
+      const { ariaAttributes } = func(qwikUiAriaAttributes);
+      cacheMap.set(key, ariaAttributes);
+      return { lastKey: key, ariaAttributes };
     } else {
-      return cacheMap.get(key) || {};
+      return { lastKey: key, ariaAttributes: cacheMap.get(key) || {} };
     }
   };
 };
 
-export const useAriaAttributes = (
-  ariaAttributes?: Partial<QwikUiAriaAttributesKebab>
-): Partial<AriaAttributes> => {
+export const extractQwikUiAriaAttributes = <T = any>(
+  props: ExtendedPropsByAriaAttribute<T>
+) => {
+  return Object.keys(props).reduce(
+    (cur, propKey) =>
+      isKeyOfQwikUiAriaAttributes(propKey)
+        ? { ...cur, [propKey]: props[propKey] }
+        : cur,
+    {}
+  );
+};
+
+export const getAriaAttributes = <T = any>(
+  props: ExtendedPropsByAriaAttribute<T>,
+  lastKey?: string
+): ReturnType<QwikUiAreaAttributesFunctionType> => {
   const process = (
-    ariaAttributes?: Partial<QwikUiAriaAttributesKebab>
-  ): Partial<AriaAttributes> => {
-    return ariaAttributes
-      ? Object.keys(ariaAttributes).reduce(
-          (cur, key) =>
-            isKeyOfQwikUiAriaAttributes(key)
-              ? { ...cur, [keyToKebabCase(key)]: ariaAttributes[key] }
-              : cur,
-          {}
-        )
-      : {};
+    qwikUiAriaAttributes?: Partial<QwikUiAriaAttributesKebab>
+  ): ReturnType<QwikUiAreaAttributesFunctionType> => {
+    return {
+      lastKey: JSON.stringify(qwikUiAriaAttributes),
+      ariaAttributes: qwikUiAriaAttributes
+        ? Object.keys(qwikUiAriaAttributes).reduce(
+            (cur, key) =>
+              isKeyOfQwikUiAriaAttributes(key)
+                ? { ...cur, [keyToKebabCase(key)]: qwikUiAriaAttributes[key] }
+                : cur,
+            {}
+          )
+        : {},
+    };
   };
-  return memoize(process)(ariaAttributes);
+  const qwikUiAriaAttributes = extractQwikUiAriaAttributes<T>(props);
+  return memoize(process)(qwikUiAriaAttributes, lastKey);
 };

packages/kit-headless/src/utils/aria-attributes.type.ts

@@ -22,30 +22,34 @@ type CamelToKebabKeys<T> = {
   [K in keyof T as FromCamelCase<string & K>]: T[K];
 };
 
-type AA = {
-  ariaAttributes?: QwikUiAriaAttributesKebab;
-};
-
 export type QwikUiAriaAttributesKebab = KebabToCamelKeys<AriaAttributes>;
 
 export type ExtendedPropsByAriaAttribute<T = undefined> = T extends object
-  ? T & AA
+  ? T & QwikUiAriaAttributesKebab
   : T extends undefined
-  ? AA
+  ? QwikUiAriaAttributesKebab
   : never;
 
+export type QwikUiAreaAttributesFunctionType = (
+  ariaAttributes?: Partial<QwikUiAriaAttributesKebab>,
+  lastKey?: string
+) => { lastKey: string; ariaAttributes: Partial<AriaAttributes> };
+
+export type QwikUiAreaAttributesFunctionReturnType =
+  ReturnType<QwikUiAreaAttributesFunctionType>;
+
 export function isKeyOfQwikUiAriaAttributes(
   key: string
 ): key is keyof QwikUiAriaAttributesKebab {
   // const ariaAttributeKeys = propertiesOf<QwikUiAriaAttributesKebab>();
   // return ariaAttributeKeys.includes(key as keyof QwikUiAriaAttributesKebab);
-  return true;
+  return key.startsWith('aria') && key.indexOf('-') === -1;
 }
 
 export function isKeyOfAriaAttributes(
   key: string
 ): key is keyof AriaAttributes {
   // const ariaAttributeKeys = propertiesOf<AriaAttributes>();
   // return ariaAttributeKeys.includes(key as keyof AriaAttributes);
-  return true;
+  return key.startsWith('aria') && key.indexOf('-') > -1;
 }

packages/kit-headless/src/utils/index.ts

@@ -1,2 +1,3 @@
+export * from './aria-attributes-helper';
 export * from './aria-attributes.type';
 export * from './key-code.type';