@vygruppen/spor-react 10.2.0 → 10.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.2.0 build
+> @vygruppen/spor-react@10.3.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
 ESM Build start
 DTS Build start
 ESM dist/index.mjs                      2.15 KB
-ESM dist/CountryCodeSelect-UFSVRLDY.mjs 1.19 KB
-ESM dist/chunk-BPDFFQ3U.mjs             416.17 KB
-ESM ⚡️ Build success in 2287ms
-CJS dist/index.js 527.91 KB
-CJS ⚡️ Build success in 2288ms
-DTS ⚡️ Build success in 15575ms
-DTS dist/index.d.ts  315.68 KB
-DTS dist/index.d.mts 315.68 KB
+ESM dist/CountryCodeSelect-KCPHU7A7.mjs 1.19 KB
+ESM dist/chunk-5HRYDWQ5.mjs             417.51 KB
+ESM ⚡️ Build success in 2131ms
+CJS dist/index.js 529.34 KB
+CJS ⚡️ Build success in 2132ms
+DTS ⚡️ Build success in 15282ms
+DTS dist/index.d.ts  315.84 KB
+DTS dist/index.d.mts 315.84 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 10.3.0
+
+### Minor Changes
+
+- d3cd54d: Added input field ariaLabelContext to NummericStepper to improve functionality with screen readers.
+
 ## 10.2.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-UFSVRLDY.mjs → CountryCodeSelect-KCPHU7A7.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-BPDFFQ3U.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5HRYDWQ5.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-BPDFFQ3U.mjs → chunk-5HRYDWQ5.mjs}

@@ -1508,8 +1508,10 @@ function NumericStepper({
   withInput = true,
   stepSize = 1,
   showZero = false,
+  ariaLabelContext = { singular: "", plural: "" },
   ...boxProps
 }) {
+  const addButtonRef = useRef(null);
   const { t: t2 } = useTranslation();
   const styles3 = useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = useControllableState({
@@ -1519,12 +1521,26 @@ function NumericStepper({
   });
   const formControlProps = useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+  const focusOnAddButton = () => {
+    var _a6;
+    (_a6 = addButtonRef.current) == null ? void 0 : _a6.focus();
+  };
   return /* @__PURE__ */ React84__default.createElement(Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React84__default.createElement(
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React84__default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.decrementButtonAriaLabel(clampedStepSize)),
-      onClick: () => onChange(Math.max(value - clampedStepSize, minValue)),
+      "aria-label": t2(
+        texts2.decrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
+      onClick: () => {
+        onChange(Math.max(value - clampedStepSize, minValue));
+        if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+          focusOnAddButton();
+        }
+      },
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
       id: value <= minValue ? void 0 : formControlProps.id
@@ -1543,13 +1559,16 @@ function NumericStepper({
       width: `${Math.max(value.toString().length + 1, 3)}ch`,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
       "aria-live": "assertive",
-      "aria-label": value.toString(),
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : "",
       onChange: (e) => {
         const numericInput = Number(e.target.value);
         if (Number.isNaN(numericInput)) {
           return;
         }
         onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+        if (!showZero && Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
+          focusOnAddButton();
+        }
       }
     }
   ) : /* @__PURE__ */ React84__default.createElement(
@@ -1557,14 +1576,21 @@ function NumericStepper({
     {
       sx: styles3.text,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
-      "aria-label": value.toString()
+      "aria-live": "assertive",
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : ""
     },
     value
   ), /* @__PURE__ */ React84__default.createElement(
     VerySmallButton,
     {
+      ref: addButtonRef,
       icon: /* @__PURE__ */ React84__default.createElement(AddIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.incrementButtonAriaLabel(clampedStepSize)),
+      "aria-label": t2(
+        texts2.incrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
       onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
       visibility: value >= maxValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
@@ -1572,10 +1598,19 @@ function NumericStepper({
     }
   ));
 }
-var VerySmallButton = (props) => {
+var VerySmallButton = React84__default.forwardRef((props, ref) => {
   const styles3 = useMultiStyleConfig("NumericStepper", {});
-  return /* @__PURE__ */ React84__default.createElement(IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
-};
+  return /* @__PURE__ */ React84__default.createElement(
+    IconButton,
+    {
+      variant: "primary",
+      size: "xs",
+      sx: styles3.button,
+      ref,
+      ...props
+    }
+  );
+});
 var SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, /* @__PURE__ */ React84__default.createElement(
   Box,
   {
@@ -1632,20 +1667,28 @@ var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React84__default.crea
   )
 ), stepLabel > 1 && /* @__PURE__ */ React84__default.createElement(chakra.span, { paddingRight: "1" }, stepLabel.toString()));
 var texts2 = createTexts({
-  decrementButtonAriaLabel(stepSize) {
+  currentNumberAriaLabel(ariaContext) {
+    return {
+      nb: `Valgt antall ${ariaContext}`,
+      en: `Chosen number of ${ariaContext}`,
+      nn: `Valgt antall ${ariaContext}`,
+      sv: `Valgt antall ${ariaContext}`
+    };
+  },
+  decrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Trekk fra ${stepSize}`,
-      en: `Subtract ${stepSize}`,
-      nn: `Trekk fr\xE5 ${stepSize}`,
-      sv: `Subtrahera ${stepSize}`
+      nb: `Trekk fra ${stepSize} ${ariaContext}`,
+      en: `Subtract ${stepSize} ${ariaContext}`,
+      nn: `Trekk fr\xE5 ${stepSize} ${ariaContext}`,
+      sv: `Subtrahera ${stepSize} ${ariaContext}`
     };
   },
-  incrementButtonAriaLabel(stepSize) {
+  incrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Legg til ${stepSize}`,
-      en: `Add ${stepSize}`,
-      nn: `Legg til ${stepSize}`,
-      sv: `L\xE4gg till ${stepSize}`
+      nb: `Legg til ${stepSize} ${ariaContext}`,
+      en: `Add ${stepSize} ${ariaContext}`,
+      nn: `Legg til ${stepSize} ${ariaContext}`,
+      sv: `L\xE4gg till ${stepSize} ${ariaContext}`
     };
   }
 });
@@ -1779,7 +1822,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-UFSVRLDY.mjs'));
+var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-KCPHU7A7.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.mts

@@ -1270,6 +1270,11 @@ type NumericStepperProps = {
     stepSize?: number;
     /** Whether to show the number input when value is zero  */
     showZero?: boolean;
+    /** Name added to the aria-label of subtract and add buttons. */
+    ariaLabelContext?: {
+        singular: string;
+        plural: string;
+    };
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -1295,7 +1300,7 @@ type NumericStepperProps = {
  * </FormControl>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React.JSX.Element;
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ariaLabelContext, ...boxProps }: NumericStepperProps): React.JSX.Element;
 
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;

package/dist/index.d.ts

@@ -1270,6 +1270,11 @@ type NumericStepperProps = {
     stepSize?: number;
     /** Whether to show the number input when value is zero  */
     showZero?: boolean;
+    /** Name added to the aria-label of subtract and add buttons. */
+    ariaLabelContext?: {
+        singular: string;
+        plural: string;
+    };
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -1295,7 +1300,7 @@ type NumericStepperProps = {
  * </FormControl>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React.JSX.Element;
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ariaLabelContext, ...boxProps }: NumericStepperProps): React.JSX.Element;
 
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;

package/dist/index.js

@@ -1654,8 +1654,10 @@ function NumericStepper({
   withInput = true,
   stepSize = 1,
   showZero = false,
+  ariaLabelContext = { singular: "", plural: "" },
   ...boxProps
 }) {
+  const addButtonRef = React85.useRef(null);
   const { t: t2 } = useTranslation();
   const styles3 = react.useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = react.useControllableState({
@@ -1665,12 +1667,26 @@ function NumericStepper({
   });
   const formControlProps = react.useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+  const focusOnAddButton = () => {
+    var _a6;
+    (_a6 = addButtonRef.current) == null ? void 0 : _a6.focus();
+  };
   return /* @__PURE__ */ React85__namespace.default.createElement(react.Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React85__namespace.default.createElement(
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React85__namespace.default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.decrementButtonAriaLabel(clampedStepSize)),
-      onClick: () => onChange(Math.max(value - clampedStepSize, minValue)),
+      "aria-label": t2(
+        texts2.decrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
+      onClick: () => {
+        onChange(Math.max(value - clampedStepSize, minValue));
+        if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+          focusOnAddButton();
+        }
+      },
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
       id: value <= minValue ? void 0 : formControlProps.id
@@ -1689,13 +1705,16 @@ function NumericStepper({
       width: `${Math.max(value.toString().length + 1, 3)}ch`,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
       "aria-live": "assertive",
-      "aria-label": value.toString(),
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : "",
       onChange: (e) => {
         const numericInput = Number(e.target.value);
         if (Number.isNaN(numericInput)) {
           return;
         }
         onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+        if (!showZero && Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
+          focusOnAddButton();
+        }
       }
     }
   ) : /* @__PURE__ */ React85__namespace.default.createElement(
@@ -1703,14 +1722,21 @@ function NumericStepper({
     {
       sx: styles3.text,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
-      "aria-label": value.toString()
+      "aria-live": "assertive",
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : ""
     },
     value
   ), /* @__PURE__ */ React85__namespace.default.createElement(
     VerySmallButton,
     {
+      ref: addButtonRef,
       icon: /* @__PURE__ */ React85__namespace.default.createElement(AddIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.incrementButtonAriaLabel(clampedStepSize)),
+      "aria-label": t2(
+        texts2.incrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
       onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
       visibility: value >= maxValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
@@ -1722,10 +1748,19 @@ var VerySmallButton, SubtractIcon, AddIcon, texts2;
 var init_NumericStepper = __esm({
   "src/input/NumericStepper.tsx"() {
     init_src();
-    VerySmallButton = (props) => {
+    VerySmallButton = React85__namespace.default.forwardRef((props, ref) => {
       const styles3 = react.useMultiStyleConfig("NumericStepper", {});
-      return /* @__PURE__ */ React85__namespace.default.createElement(exports.IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
-    };
+      return /* @__PURE__ */ React85__namespace.default.createElement(
+        exports.IconButton,
+        {
+          variant: "primary",
+          size: "xs",
+          sx: styles3.button,
+          ref,
+          ...props
+        }
+      );
+    });
     SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React85__namespace.default.createElement(React85__namespace.default.Fragment, null, /* @__PURE__ */ React85__namespace.default.createElement(
       react.Box,
       {
@@ -1782,20 +1817,28 @@ var init_NumericStepper = __esm({
       )
     ), stepLabel > 1 && /* @__PURE__ */ React85__namespace.default.createElement(react.chakra.span, { paddingRight: "1" }, stepLabel.toString()));
     texts2 = createTexts({
-      decrementButtonAriaLabel(stepSize) {
+      currentNumberAriaLabel(ariaContext) {
+        return {
+          nb: `Valgt antall ${ariaContext}`,
+          en: `Chosen number of ${ariaContext}`,
+          nn: `Valgt antall ${ariaContext}`,
+          sv: `Valgt antall ${ariaContext}`
+        };
+      },
+      decrementButtonAriaLabel(stepSize, ariaContext) {
         return {
-          nb: `Trekk fra ${stepSize}`,
-          en: `Subtract ${stepSize}`,
-          nn: `Trekk fr\xE5 ${stepSize}`,
-          sv: `Subtrahera ${stepSize}`
+          nb: `Trekk fra ${stepSize} ${ariaContext}`,
+          en: `Subtract ${stepSize} ${ariaContext}`,
+          nn: `Trekk fr\xE5 ${stepSize} ${ariaContext}`,
+          sv: `Subtrahera ${stepSize} ${ariaContext}`
         };
       },
-      incrementButtonAriaLabel(stepSize) {
+      incrementButtonAriaLabel(stepSize, ariaContext) {
         return {
-          nb: `Legg til ${stepSize}`,
-          en: `Add ${stepSize}`,
-          nn: `Legg til ${stepSize}`,
-          sv: `L\xE4gg till ${stepSize}`
+          nb: `Legg til ${stepSize} ${ariaContext}`,
+          en: `Add ${stepSize} ${ariaContext}`,
+          nn: `Legg til ${stepSize} ${ariaContext}`,
+          sv: `L\xE4gg till ${stepSize} ${ariaContext}`
         };
       }
     });

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-BPDFFQ3U.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-5HRYDWQ5.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/input/NumericStepper.tsx

@@ -4,7 +4,7 @@ import {
   useFormControl,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useRef } from "react";
 import {
   Box,
   BoxProps,
@@ -35,6 +35,8 @@ type NumericStepperProps = {
   stepSize?: number;
   /** Whether to show the number input when value is zero  */
   showZero?: boolean;
+  /** Name added to the aria-label of subtract and add buttons. */
+  ariaLabelContext?: { singular: string; plural: string };
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -72,8 +74,10 @@ export function NumericStepper({
   withInput = true,
   stepSize = 1,
   showZero = false,
+  ariaLabelContext = { singular: "", plural: "" },
   ...boxProps
 }: NumericStepperProps) {
+  const addButtonRef = useRef<HTMLButtonElement>(null);
   const { t } = useTranslation();
   const styles = useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = useControllableState<number>({
@@ -84,12 +88,26 @@ export function NumericStepper({
   const formControlProps = useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
 
+  const focusOnAddButton = () => {
+    addButtonRef.current?.focus();
+  };
+
   return (
     <Flex __css={styles.container} {...boxProps}>
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
-        aria-label={t(texts.decrementButtonAriaLabel(clampedStepSize))}
-        onClick={() => onChange(Math.max(value - clampedStepSize, minValue))}
+        aria-label={t(
+          texts.decrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural,
+          ),
+        )}
+        onClick={() => {
+          onChange(Math.max(value - clampedStepSize, minValue));
+          if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+            focusOnAddButton();
+          }
+        }}
         visibility={value <= minValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
         id={value <= minValue ? undefined : formControlProps.id}
@@ -107,27 +125,48 @@ export function NumericStepper({
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
-          aria-label={value.toString()}
+          aria-label={
+            ariaLabelContext.plural !== ""
+              ? t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
+              : ""
+          }
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const numericInput = Number(e.target.value);
             if (Number.isNaN(numericInput)) {
               return;
             }
             onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+            if (
+              !showZero &&
+              Math.max(Math.min(numericInput, maxValue), minValue) === 0
+            ) {
+              focusOnAddButton();
+            }
           }}
         />
       ) : (
         <chakra.text
           sx={styles.text}
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
-          aria-label={value.toString()}
+          aria-live="assertive"
+          aria-label={
+            ariaLabelContext.plural !== ""
+              ? t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
+              : ""
+          }
         >
           {value}
         </chakra.text>
       )}
       <VerySmallButton
+        ref={addButtonRef}
         icon={<AddIcon stepLabel={clampedStepSize} />}
-        aria-label={t(texts.incrementButtonAriaLabel(clampedStepSize))}
+        aria-label={t(
+          texts.incrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural,
+          ),
+        )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         visibility={value >= maxValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
@@ -152,12 +191,18 @@ type VerySmallButtonProps = {
   id?: string;
 };
 /** Internal override for extra small icon buttons */
-const VerySmallButton = (props: VerySmallButtonProps) => {
+const VerySmallButton = React.forwardRef((props: VerySmallButtonProps, ref) => {
   const styles = useMultiStyleConfig("NumericStepper", {});
   return (
-    <IconButton variant="primary" size="xs" sx={styles.button} {...props} />
+    <IconButton
+      variant="primary"
+      size="xs"
+      sx={styles.button}
+      ref={ref}
+      {...props}
+    />
   );
-};
+});
 
 type IconPropTypes = BoxProps & { stepLabel: number };
 
@@ -221,20 +266,28 @@ const AddIcon = ({ stepLabel, ...props }: IconPropTypes) => (
 );
 
 const texts = createTexts({
-  decrementButtonAriaLabel(stepSize) {
+  currentNumberAriaLabel(ariaContext) {
+    return {
+      nb: `Valgt antall ${ariaContext}`,
+      en: `Chosen number of ${ariaContext}`,
+      nn: `Valgt antall ${ariaContext}`,
+      sv: `Valgt antall ${ariaContext}`,
+    };
+  },
+  decrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Trekk fra ${stepSize}`,
-      en: `Subtract ${stepSize}`,
-      nn: `Trekk frå ${stepSize}`,
-      sv: `Subtrahera ${stepSize}`,
+      nb: `Trekk fra ${stepSize} ${ariaContext}`,
+      en: `Subtract ${stepSize} ${ariaContext}`,
+      nn: `Trekk frå ${stepSize} ${ariaContext}`,
+      sv: `Subtrahera ${stepSize} ${ariaContext}`,
     };
   },
-  incrementButtonAriaLabel(stepSize) {
+  incrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Legg til ${stepSize}`,
-      en: `Add ${stepSize}`,
-      nn: `Legg til ${stepSize}`,
-      sv: `Lägg till ${stepSize}`,
+      nb: `Legg til ${stepSize} ${ariaContext}`,
+      en: `Add ${stepSize} ${ariaContext}`,
+      nn: `Legg til ${stepSize} ${ariaContext}`,
+      sv: `Lägg till ${stepSize} ${ariaContext}`,
     };
   },
 });