Styled accordion 100 score on lighthouse (#1024)

* Revert "fix(select): types for multiple yes/no (#1021)"

This reverts commit 7a98c2c.

* docs(styled accordion): 100 score on lighthouse

Author: maiieul

.changeset/shy-bottles-agree.md

@@ -5,7 +5,7 @@ export default component$(() => {
   return (
     <Accordion.Root class="w-full">
       <Accordion.Item>
-        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+        <Accordion.Trigger header="h2">Is it accessible?</Accordion.Trigger>
         <Accordion.Content>
           Yes. It adheres to the WAI-ARIA design pattern.
         </Accordion.Content>

.changeset/tender-pens-run.md

@@ -1,9 +1,11 @@
 ---
 title: Qwik UI | Styled Accordion Component
+description: A vertically stacked set of interactive headings that each reveal a section of content. Copy/paste into your project from the documentation or by using the CLI. Easily customize the CVA variants according to your brand requirements.
 ---
 
 import { statusByComponent } from '~/_state/component-statuses';
 
+
 <StatusBanner status={statusByComponent.styled.Accordion} />
 
 # Accordion

apps/website/src/routes/docs/styled/accordion/examples/hero.tsx

@@ -11,6 +11,7 @@ export const HModalTrigger = component$((props: PropsOf<'button'>) => {
   return (
     <button
       aria-haspopup="dialog"
+      aria-label="Open Theme Customization Panel"
       aria-expanded={context.showSig.value}
       data-open={context.showSig.value ? '' : undefined}
       data-closed={!context.showSig.value ? '' : undefined}

apps/website/src/routes/docs/styled/accordion/index.mdx

@@ -1,4 +1,4 @@
-import { type JSXNode, type PublicProps } from '@builder.io/qwik';
+import { type JSXNode, Component } from '@builder.io/qwik';
 import { HSelectImpl, type SelectProps } from './select-root';
 import { HSelectItem as InternalSelectItem } from './select-item';
 import { HSelectItemLabel as InternalSelectItemLabel } from './select-item-label';
@@ -14,8 +14,8 @@ type InlineCompProps = {
   This is an inline component. An example use case of an inline component to get the proper indexes with CSR. See issue #4757
   for more information.
 */
-export const HSelectRoot = <M extends true>(
-  props: PublicProps<SelectProps<M> & InlineCompProps>,
+export const HSelectRoot: Component<SelectProps & InlineCompProps> = (
+  props: SelectProps & InlineCompProps,
 ) => {
   const {
     children: myChildren,

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

@@ -32,24 +32,44 @@ export type InternalSelectProps = {
   _itemsMap: TItemsMap;
 };
 
-export type SelectProps<
-  M extends true,
-  T = boolean extends M ? string : M extends true ? string[] : string,
-> = Omit<PropsOf<'div'>, 'onChange$'> & {
+export type TMultiple<M> = M extends true ? string[] : string;
+
+/**
+ *  Value sets an initial value for the select. If multiple is true, value is disabled
+ *
+ */
+type TMultiValue =
+  | { multiple: true; value?: never }
+  | { multiple?: false; value?: string };
+
+type TStringOrArray =
+  | {
+    multiple?: true;
+    onChange$?: QRL<(value: string[]) => void>;
+  }
+  | {
+    multiple?: false;
+    onChange$?: QRL<(value: string) => void>;
+  };
+
+export type SelectProps<M extends boolean = boolean> = Omit<
+  PropsOf<'div'>,
+  'onChange$'
+> & {
   /** A signal that controls the current selected value (controlled). */
-  'bind:value'?: T extends string ? Signal<T> : never;
+  'bind:value'?: Signal<TMultiple<M>>;
 
   /** A signal that controls the current open state (controlled). */
   'bind:open'?: Signal<boolean>;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  'bind:displayValue'?: T extends string ? Signal<T> : never;
+  'bind:displayValue'?: Signal<TMultiple<M>>;
 
   /**
    * QRL handler that runs when a select value changes.
    * @param value The new value as a string.
    */
-  onChange$?: QRL<(value: T) => void>;
+  onChange$?: QRL<(value: TMultiple<M>) => void>;
   /**
    * QRL handler that runs when the listbox opens or closes.
    * @param open The new state of the listbox.
@@ -87,18 +107,13 @@ export type SelectProps<
    */
   multiple?: M;
 
-  /**
-   *  Value sets an initial value for the select. If multiple is true, value is disabled
-   *
-   */
-  value?: M extends false ? string : never;
-
   invalid?: boolean;
-};
+} & TMultiValue &
+  TStringOrArray;
 
 /* root component in select-inline.tsx */
-export const HSelectImpl = component$(
-  <M extends true, T>(props: SelectProps<M, T> & InternalSelectProps) => {
+export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps>(
+  (props: SelectProps<boolean> & InternalSelectProps) => {
     const {
       _itemsMap,
       _valuePropIndex: givenValuePropIndex,
@@ -244,7 +259,7 @@ export const HSelectImpl = component$(
       }
 
       if (onChange$ && selectedIndexSetSig.value.size > 0) {
-        await onChange$(context.multiple ? (values as T) : (values[0] as T));
+        await onChange$(context.multiple ? values : values[0]);
       }
 
       // sync the user's given signal when an option is selected
@@ -254,9 +269,9 @@ export const HSelectImpl = component$(
 
         if (currUserSigValues !== newUserSigValues) {
           if (context.multiple) {
-            bindValueSig.value = values as T;
+            bindValueSig.value = values;
           } else {
-            bindValueSig.value = values[0] as T;
+            bindValueSig.value = values[0];
           }
         }
       }
@@ -266,8 +281,8 @@ export const HSelectImpl = component$(
       // sync the user's given signal for the display value
       if (bindDisplayTextSig && context.currDisplayValueSig.value) {
         bindDisplayTextSig.value = context.multiple
-          ? (context.currDisplayValueSig.value as T)
-          : (context.currDisplayValueSig.value[0] as T);
+          ? context.currDisplayValueSig.value
+          : context.currDisplayValueSig.value[0];
       }
     });
 

packages/kit-headless/src/components/select/select-inline.tsx

@@ -1,11 +1,9 @@
-import { type PropsOf, type PublicProps, Slot, component$ } from '@builder.io/qwik';
+import { type PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { Select as HeadlessSelect } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 import { LuCheck, LuChevronDown } from '@qwikest/icons/lucide';
 
-const Root = <M extends true>(
-  props: PublicProps<PropsOf<typeof HeadlessSelect.Root<M>>>,
-) => (
+const Root = (props: PropsOf<typeof HeadlessSelect.Root>) => (
   <HeadlessSelect.Root
     {...props}
     selectItemComponent={Item}