@vygruppen/spor-react 12.24.9 → 12.24.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.24.9",
+  "version": "12.24.11",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-icon-react": "4.5.2",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-design-tokens": "4.3.3"
+    "@vygruppen/spor-icon-react": "4.5.3",
+    "@vygruppen/spor-design-tokens": "4.3.3",
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/accordion/Accordion.tsx

@@ -106,14 +106,19 @@ export const AccordionItemContent = forwardRef<
   HTMLDivElement,
   AccordionItemContentProps
 >(function AccordionItemContent(props, ref) {
-  const { children } = props;
+  const { children, "aria-labelledby": ariaLabelledBy, ...otherProps } = props;
 
   const recipe = useSlotRecipe({ key: "accordion" });
   const styles = recipe();
 
+  // We need to be able to override aria-labelledby here to prevent an issue on voiceover on iPhone where the related AccordionItemTrigger
+  // is announced after announcing the ItemContent. This issue occurs because the default aria-labelledby is set to the id of the AccordionItemTrigger.
   return (
-    <ChakraAccordion.ItemContent css={styles.itemContent}>
-      <ChakraAccordion.ItemBody {...props} ref={ref}>
+    <ChakraAccordion.ItemContent
+      css={styles.itemContent}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <ChakraAccordion.ItemBody {...otherProps} ref={ref}>
         {children}
       </ChakraAccordion.ItemBody>
     </ChakraAccordion.ItemContent>

package/src/input/Autocomplete.tsx

@@ -73,7 +73,7 @@ export const Autocomplete = ({
 
   const combobox = useCombobox({
     collection,
-    openOnClick,
+    openOnClick: filteredChildren.length > 0 ? openOnClick : false,
     onInputValueChange: (event) => {
       if (!filteredExternally) {
         filter(event.inputValue);
@@ -107,26 +107,25 @@ export const Autocomplete = ({
             required={required}
             onFocus={(event) => {
               onFocus?.(event);
-              if (openOnFocus) combobox.setOpen(true);
+              if (openOnFocus && filteredChildren.length > 0)
+                combobox.setOpen(true);
             }}
           />
         </Combobox.Input>
         <Combobox.IndicatorGroup>
           <Combobox.ClearTrigger asChild aria-label={t(texts.clearValue)}>
-            <CloseButton size="xs" />
+            <CloseButton size="xs" tabIndex={0} />
           </Combobox.ClearTrigger>
         </Combobox.IndicatorGroup>
       </Combobox.Control>
       <Combobox.Positioner>
         <Combobox.Content>
-          <Combobox.Empty>
-            {!loading && (emptyLabel ?? t(texts.noItemsFound))}
-          </Combobox.Empty>
-          {loading ? (
-            <ColorSpinner width="1.5rem" p="2" />
-          ) : (
-            <>{filteredChildren}</>
+          {!loading && (
+            <Combobox.Empty>
+              {emptyLabel ?? t(texts.noItemsFound)}
+            </Combobox.Empty>
           )}
+          {loading ? <ColorSpinner width="1.5rem" p="2" /> : filteredChildren}
         </Combobox.Content>
       </Combobox.Positioner>
     </Combobox.RootProvider>

package/src/layout/RadioCard.tsx

@@ -4,7 +4,7 @@ import {
   RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import React, { forwardRef, useId } from "react";
 
 import { radioCardSlotRecipe } from "../theme/slot-recipes/radio-card";
 
@@ -41,12 +41,24 @@ type RadioCardItemProps = Exclude<
 export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
   (props, ref) => {
     const { inputProps, children } = props;
+    const uniqueId = useId();
+    const itemControlId = `radio-card-item-control-${uniqueId}`;
+
+    const inputHasAriaLabel =
+      inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
 
     return (
       <ChakraRadioCard.Item {...props}>
-        <ChakraRadioCard.ItemHiddenInput ref={ref} {...inputProps} />
-
-        <ChakraRadioCard.ItemControl>{children}</ChakraRadioCard.ItemControl>
+        <ChakraRadioCard.ItemHiddenInput
+          aria-labelledby={
+            inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
+          }
+          ref={ref}
+          {...inputProps}
+        />
+        <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
+          {children}
+        </ChakraRadioCard.ItemControl>
       </ChakraRadioCard.Item>
     );
   },