@navikt/ds-react 5.12.2 → 5.12.4

package/cjs/form/Fieldset/Fieldset.js

@@ -60,7 +60,7 @@ exports.Fieldset = (0, react_1.forwardRef)((props, ref) => {
             disabled: (_c = props.disabled) !== null && _c !== void 0 ? _c : false,
             readOnly,
         } },
-        react_1.default.createElement("fieldset", Object.assign({}, (0, util_1.omit)(rest, ["errorId", "error", "size", "readOnly"]), inputProps, { ref: ref, className: (0, clsx_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, {
+        react_1.default.createElement("fieldset", Object.assign({}, (0, util_1.omit)(rest, ["errorId", "error", "size", "readOnly"]), (0, util_1.omit)(inputProps, ["aria-describedby", "aria-invalid"]), { ref: ref, className: (0, clsx_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, {
                 "navds-fieldset--error": hasError,
                 "navds-fieldset--readonly": readOnly,
             }) }),

package/cjs/form/checkbox/Checkbox.js

@@ -35,6 +35,8 @@ const ReadOnlyIcon_1 = require("../ReadOnlyIcon");
 const useCheckbox_1 = __importDefault(require("./useCheckbox"));
 exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, hasError, size, readOnly, nested } = (0, useCheckbox_1.default)(props);
+    const labelId = (0, util_1.useId)();
+    const descriptionId = (0, util_1.useId)();
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
@@ -49,7 +51,7 @@ exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
             "indeterminate",
             "errorId",
             "readOnly",
-        ]), inputProps, { type: "checkbox", className: "navds-checkbox__input", "aria-checked": props.indeterminate ? "mixed" : inputProps.checked, ref: (el) => {
+        ]), (0, util_1.omit)(inputProps, ["aria-invalid"]), { type: "checkbox", className: "navds-checkbox__input", "aria-checked": props.indeterminate ? "mixed" : inputProps.checked, ref: (el) => {
                 var _a;
                 if (el) {
                     el.indeterminate = (_a = props.indeterminate) !== null && _a !== void 0 ? _a : false;
@@ -60,7 +62,9 @@ exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
                 else if (ref != null) {
                     ref.current = el;
                 }
-            } })),
+            }, "aria-labelledby": (0, clsx_1.default)(labelId, !!props["aria-labelledby"] && props["aria-labelledby"], {
+                [descriptionId]: props.description,
+            }) })),
         react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
             react_1.default.createElement("span", { className: "navds-checkbox__icon" },
                 react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0.8125rem", height: "0.625rem", viewBox: "0 0 13 10", fill: "none", focusable: false, role: "img", "aria-hidden": true },
@@ -68,9 +72,9 @@ exports.Checkbox = (0, react_1.forwardRef)((props, ref) => {
             react_1.default.createElement("span", { className: (0, clsx_1.default)("navds-checkbox__content", {
                     "navds-sr-only": props.hideLabel,
                 }) },
-                react_1.default.createElement(typography_1.BodyShort, { as: "span", size: size, className: "navds-checkbox__label-text" },
+                react_1.default.createElement(typography_1.BodyShort, { as: "span", id: labelId, size: size, className: "navds-checkbox__label-text", "aria-hidden": true },
                     !nested && (react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIcon, { readOnly: readOnly, nativeReadOnly: false })),
                     props.children),
-                props.description && (react_1.default.createElement(typography_1.BodyShort, { as: "span", size: size, className: "navds-form-field__subdescription navds-checkbox__description" }, props.description))))));
+                props.description && (react_1.default.createElement(typography_1.BodyShort, { as: "span", id: descriptionId, size: size, className: "navds-form-field__subdescription navds-checkbox__description", "aria-hidden": true }, props.description))))));
 });
 exports.default = exports.Checkbox;

package/cjs/form/radio/Radio.js

@@ -34,15 +34,19 @@ const util_1 = require("../../util");
 const useRadio_1 = require("./useRadio");
 exports.Radio = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, size, hasError, readOnly } = (0, useRadio_1.useRadio)(props);
+    const labelId = (0, util_1.useId)();
+    const descriptionId = (0, util_1.useId)();
     return (react_1.default.createElement("div", { className: (0, clsx_1.default)(props.className, "navds-radio", `navds-radio--${size}`, {
             "navds-radio--error": hasError,
             "navds-radio--disabled": inputProps.disabled,
             "navds-radio--readonly": readOnly,
         }) },
-        react_1.default.createElement("input", Object.assign({}, (0, util_1.omit)(props, ["children", "size", "description", "readOnly"]), inputProps, { className: "navds-radio__input", ref: ref })),
+        react_1.default.createElement("input", Object.assign({}, (0, util_1.omit)(props, ["children", "size", "description", "readOnly"]), (0, util_1.omit)(inputProps, ["aria-invalid"]), { "aria-labelledby": (0, clsx_1.default)(labelId, !!props["aria-labelledby"] && props["aria-labelledby"], {
+                [descriptionId]: props.description,
+            }), className: "navds-radio__input", ref: ref })),
         react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-radio__label" },
             react_1.default.createElement("span", { className: "navds-radio__content" },
-                react_1.default.createElement(typography_1.BodyShort, { as: "span", size: size }, props.children),
-                props.description && (react_1.default.createElement(typography_1.BodyShort, { as: "span", size: size, className: "navds-form-field__subdescription navds-radio__description" }, props.description))))));
+                react_1.default.createElement(typography_1.BodyShort, { as: "span", id: labelId, size: size, "aria-hidden": true }, props.children),
+                props.description && (react_1.default.createElement(typography_1.BodyShort, { as: "span", id: descriptionId, size: size, className: "navds-form-field__subdescription navds-radio__description", "aria-hidden": true }, props.description))))));
 });
 exports.default = exports.Radio;

package/esm/form/Fieldset/Fieldset.js

@@ -31,7 +31,7 @@ export const Fieldset = forwardRef((props, ref) => {
             disabled: (_c = props.disabled) !== null && _c !== void 0 ? _c : false,
             readOnly,
         } },
-        React.createElement("fieldset", Object.assign({}, omit(rest, ["errorId", "error", "size", "readOnly"]), inputProps, { ref: ref, className: cl(className, "navds-fieldset", `navds-fieldset--${size}`, {
+        React.createElement("fieldset", Object.assign({}, omit(rest, ["errorId", "error", "size", "readOnly"]), omit(inputProps, ["aria-describedby", "aria-invalid"]), { ref: ref, className: cl(className, "navds-fieldset", `navds-fieldset--${size}`, {
                 "navds-fieldset--error": hasError,
                 "navds-fieldset--readonly": readOnly,
             }) }),

package/esm/form/Fieldset/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../src/form/Fieldset/Fieldset.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../src/form/Fieldset/Fieldset.tsx"],"names":[],"mappings":"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"}

package/esm/form/checkbox/Checkbox.js

@@ -1,11 +1,13 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import useCheckbox from "./useCheckbox";
 export const Checkbox = forwardRef((props, ref) => {
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
+    const labelId = useId();
+    const descriptionId = useId();
     return (React.createElement("div", { className: cl(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
             "navds-checkbox--error": hasError,
             "navds-checkbox--disabled": inputProps.disabled,
@@ -20,7 +22,7 @@ export const Checkbox = forwardRef((props, ref) => {
             "indeterminate",
             "errorId",
             "readOnly",
-        ]), inputProps, { type: "checkbox", className: "navds-checkbox__input", "aria-checked": props.indeterminate ? "mixed" : inputProps.checked, ref: (el) => {
+        ]), omit(inputProps, ["aria-invalid"]), { type: "checkbox", className: "navds-checkbox__input", "aria-checked": props.indeterminate ? "mixed" : inputProps.checked, ref: (el) => {
                 var _a;
                 if (el) {
                     el.indeterminate = (_a = props.indeterminate) !== null && _a !== void 0 ? _a : false;
@@ -31,7 +33,9 @@ export const Checkbox = forwardRef((props, ref) => {
                 else if (ref != null) {
                     ref.current = el;
                 }
-            } })),
+            }, "aria-labelledby": cl(labelId, !!props["aria-labelledby"] && props["aria-labelledby"], {
+                [descriptionId]: props.description,
+            }) })),
         React.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
             React.createElement("span", { className: "navds-checkbox__icon" },
                 React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0.8125rem", height: "0.625rem", viewBox: "0 0 13 10", fill: "none", focusable: false, role: "img", "aria-hidden": true },
@@ -39,10 +43,10 @@ export const Checkbox = forwardRef((props, ref) => {
             React.createElement("span", { className: cl("navds-checkbox__content", {
                     "navds-sr-only": props.hideLabel,
                 }) },
-                React.createElement(BodyShort, { as: "span", size: size, className: "navds-checkbox__label-text" },
+                React.createElement(BodyShort, { as: "span", id: labelId, size: size, className: "navds-checkbox__label-text", "aria-hidden": true },
                     !nested && (React.createElement(ReadOnlyIcon, { readOnly: readOnly, nativeReadOnly: false })),
                     props.children),
-                props.description && (React.createElement(BodyShort, { as: "span", size: size, className: "navds-form-field__subdescription navds-checkbox__description" }, props.description))))));
+                props.description && (React.createElement(BodyShort, { as: "span", id: descriptionId, size: size, className: "navds-form-field__subdescription navds-checkbox__description", "aria-hidden": true }, props.description))))));
 });
 export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

package/esm/form/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE5E,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;YAC/C,0BAA0B,EAAE,QAAQ;SACrC,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;YACX,eAAe;YACf,SAAS;YACT,UAAU;SACX,CAAC,EACE,UAAU,IACd,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uBAAuB,kBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAChE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;;gBACV,IAAI,EAAE,EAAE,CAAC;oBACP,EAAE,CAAC,aAAa,GAAG,MAAA,KAAK,CAAC,aAAa,mCAAI,KAAK,CAAC;gBAClD,CAAC;gBAED,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;oBAC9B,GAAG,CAAC,EAAE,CAAC,CAAC;gBACV,CAAC;qBAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;oBACvB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;gBACnB,CAAC;YACH,CAAC,IACD;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,8BAAM,SAAS,EAAC,sBAAsB;gBACpC,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,WAAW,EACjB,MAAM,EAAC,UAAU,EACjB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;oBAGV,8BACE,CAAC,EAAC,6WAA6W,EAC/W,IAAI,EAAC,cAAc,GACnB,CACE,CACD;YACP,8BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,4BAA4B;oBAErC,CAAC,MAAM,IAAI,CACV,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,GAAI,CAC5D;oBACA,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,8DAA8D,IAEvE,KAAK,CAAC,WAAW,CACR,CACb,CACI,CACD,CACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE5E,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;YAC/C,0BAA0B,EAAE,QAAQ;SACrC,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;YACX,eAAe;YACf,SAAS;YACT,UAAU;SACX,CAAC,EACE,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,CAAC,CAAC,IACtC,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uBAAuB,kBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAChE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;;gBACV,IAAI,EAAE,EAAE,CAAC;oBACP,EAAE,CAAC,aAAa,GAAG,MAAA,KAAK,CAAC,aAAa,mCAAI,KAAK,CAAC;gBAClD,CAAC;gBAED,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;oBAC9B,GAAG,CAAC,EAAE,CAAC,CAAC;gBACV,CAAC;qBAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;oBACvB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;gBACnB,CAAC;YACH,CAAC,qBACgB,EAAE,CACjB,OAAO,EACP,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,EACtD;gBACE,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW;aACnC,CACF,IACD;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,8BAAM,SAAS,EAAC,sBAAsB;gBACpC,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,WAAW,EACjB,MAAM,EAAC,UAAU,EACjB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;oBAGV,8BACE,CAAC,EAAC,6WAA6W,EAC/W,IAAI,EAAC,cAAc,GACnB,CACE,CACD;YACP,8BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,4BAA4B;oBAGrC,CAAC,MAAM,IAAI,CACV,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,GAAI,CAC5D;oBACA,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,8DAA8D,yBAGvE,KAAK,CAAC,WAAW,CACR,CACb,CACI,CACD,CACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/form/radio/Radio.js

@@ -1,20 +1,24 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { useRadio } from "./useRadio";
 export const Radio = forwardRef((props, ref) => {
     const { inputProps, size, hasError, readOnly } = useRadio(props);
+    const labelId = useId();
+    const descriptionId = useId();
     return (React.createElement("div", { className: cl(props.className, "navds-radio", `navds-radio--${size}`, {
             "navds-radio--error": hasError,
             "navds-radio--disabled": inputProps.disabled,
             "navds-radio--readonly": readOnly,
         }) },
-        React.createElement("input", Object.assign({}, omit(props, ["children", "size", "description", "readOnly"]), inputProps, { className: "navds-radio__input", ref: ref })),
+        React.createElement("input", Object.assign({}, omit(props, ["children", "size", "description", "readOnly"]), omit(inputProps, ["aria-invalid"]), { "aria-labelledby": cl(labelId, !!props["aria-labelledby"] && props["aria-labelledby"], {
+                [descriptionId]: props.description,
+            }), className: "navds-radio__input", ref: ref })),
         React.createElement("label", { htmlFor: inputProps.id, className: "navds-radio__label" },
             React.createElement("span", { className: "navds-radio__content" },
-                React.createElement(BodyShort, { as: "span", size: size }, props.children),
-                props.description && (React.createElement(BodyShort, { as: "span", size: size, className: "navds-form-field__subdescription navds-radio__description" }, props.description))))));
+                React.createElement(BodyShort, { as: "span", id: labelId, size: size, "aria-hidden": true }, props.children),
+                props.description && (React.createElement(BodyShort, { as: "span", id: descriptionId, size: size, className: "navds-form-field__subdescription navds-radio__description", "aria-hidden": true }, props.description))))));
 });
 export default Radio;
 //# sourceMappingURL=Radio.js.map

package/esm/form/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEjE,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YACpE,oBAAoB,EAAE,QAAQ;YAC9B,uBAAuB,EAAE,UAAU,CAAC,QAAQ;YAC5C,uBAAuB,EAAE,QAAQ;SAClC,CAAC;QAEF,+CACM,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,EAC5D,UAAU,IACd,SAAS,EAAC,oBAAoB,EAC9B,GAAG,EAAE,GAAG,IACR;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,oBAAoB;YAC3D,8BAAM,SAAS,EAAC,sBAAsB;gBACpC,oBAAC,SAAS,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,IAC5B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2DAA2D,IAEpE,KAAK,CAAC,WAAW,CACR,CACb,CACI,CACD,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YACpE,oBAAoB,EAAE,QAAQ;YAC9B,uBAAuB,EAAE,UAAU,CAAC,QAAQ;YAC5C,uBAAuB,EAAE,QAAQ;SAClC,CAAC;QAEF,+CACM,IAAI,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,EAC5D,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,CAAC,CAAC,uBACrB,EAAE,CACjB,OAAO,EACP,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,EACtD;gBACE,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW;aACnC,CACF,EACD,SAAS,EAAC,oBAAoB,EAC9B,GAAG,EAAE,GAAG,IACR;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,oBAAoB;YAC3D,8BAAM,SAAS,EAAC,sBAAsB;gBACpC,oBAAC,SAAS,IAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,yBACzC,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2DAA2D,yBAGpE,KAAK,CAAC,WAAW,CACR,CACb,CACI,CACD,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/esm/util/useId.d.ts

@@ -4,4 +4,4 @@
  * @param idOverride
  * @returns {string}
  */
-export declare function useId(idOverride?: string): string | undefined;
+export declare function useId(idOverride?: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.12.2",
+  "version": "5.12.4",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.12.2",
-    "@navikt/ds-tokens": "^5.12.2",
+    "@navikt/aksel-icons": "^5.12.4",
+    "@navikt/ds-tokens": "^5.12.4",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/form/Fieldset/Fieldset.tsx

@@ -70,7 +70,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
       >
         <fieldset
           {...omit(rest, ["errorId", "error", "size", "readOnly"])}
-          {...inputProps}
+          {...omit(inputProps, ["aria-describedby", "aria-invalid"])}
           ref={ref}
           className={cl(
             className,

package/src/form/checkbox/Checkbox.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import faker from "faker";
+import React from "react";
 import { Checkbox, CheckboxGroup } from ".";
 
 const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];

package/src/form/checkbox/Checkbox.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
@@ -10,6 +10,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
 
+    const labelId = useId();
+    const descriptionId = useId();
+
     return (
       <div
         className={cl(
@@ -34,7 +37,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             "errorId",
             "readOnly",
           ])}
-          {...inputProps}
+          {...omit(inputProps, ["aria-invalid"])}
           type="checkbox"
           className="navds-checkbox__input"
           aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
@@ -49,6 +52,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               ref.current = el;
             }
           }}
+          aria-labelledby={cl(
+            labelId,
+            !!props["aria-labelledby"] && props["aria-labelledby"],
+            {
+              [descriptionId]: props.description,
+            }
+          )}
         />
         <label htmlFor={inputProps.id} className="navds-checkbox__label">
           <span className="navds-checkbox__icon">
@@ -75,8 +85,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           >
             <BodyShort
               as="span"
+              id={labelId}
               size={size}
               className="navds-checkbox__label-text"
+              aria-hidden
             >
               {!nested && (
                 <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
@@ -86,8 +98,10 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             {props.description && (
               <BodyShort
                 as="span"
+                id={descriptionId}
                 size={size}
                 className="navds-form-field__subdescription navds-checkbox__description"
+                aria-hidden
               >
                 {props.description}
               </BodyShort>

package/src/form/checkbox/checkbox.stories.tsx

@@ -134,27 +134,31 @@ export const SingleSmall = () => (
   </div>
 );
 
-export const SingleDescription = () => (
-  <div className="colspan">
-    <Checkbox value="tekst" description="checkboxdescription">
-      Checkboxtekst
-    </Checkbox>
-    <Checkbox value="tekst" defaultChecked description="checkboxdescription">
-      Checkboxtekst
-    </Checkbox>
-  </div>
-);
-
-export const SingleError = () => (
-  <div className="colspan">
-    <Checkbox value="tekst" error>
-      Checkboxtekst
-    </Checkbox>
-    <Checkbox value="tekst" defaultChecked error>
-      Checkboxtekst
-    </Checkbox>
-  </div>
-);
+export const SingleDescription = () => {
+  const [isValueSelected, setValueSelected] = useState(false);
+  return (
+    <CheckboxGroup
+      legend="Hvor vil du sitte?"
+      className="colspan"
+      error={!isValueSelected ? "Du må velge en sitteplass" : undefined}
+    >
+      <Checkbox
+        onChange={() => setValueSelected(true)}
+        value="foran"
+        description="Tilgjengelig med rullestol"
+      >
+        Foran
+      </Checkbox>
+      <Checkbox
+        onChange={() => setValueSelected(true)}
+        value="tekst"
+        description="Adgang via trapp med to trinn"
+      >
+        Bak
+      </Checkbox>
+    </CheckboxGroup>
+  );
+};
 
 export const Indeterminate = () => {
   const [checked, setChecked] = useState([true, false]);

package/src/form/radio/Radio.tsx

@@ -1,13 +1,16 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { inputProps, size, hasError, readOnly } = useRadio(props);
 
+  const labelId = useId();
+  const descriptionId = useId();
+
   return (
     <div
       className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
@@ -18,20 +21,29 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
     >
       <input
         {...omit(props, ["children", "size", "description", "readOnly"])}
-        {...inputProps}
+        {...omit(inputProps, ["aria-invalid"])}
+        aria-labelledby={cl(
+          labelId,
+          !!props["aria-labelledby"] && props["aria-labelledby"],
+          {
+            [descriptionId]: props.description,
+          }
+        )}
         className="navds-radio__input"
         ref={ref}
       />
       <label htmlFor={inputProps.id} className="navds-radio__label">
         <span className="navds-radio__content">
-          <BodyShort as="span" size={size}>
+          <BodyShort as="span" id={labelId} size={size} aria-hidden>
             {props.children}
           </BodyShort>
           {props.description && (
             <BodyShort
               as="span"
+              id={descriptionId}
               size={size}
               className="navds-form-field__subdescription navds-radio__description"
+              aria-hidden
             >
               {props.description}
             </BodyShort>

package/src/form/radio/radio.stories.tsx

@@ -60,16 +60,33 @@ export const Group = () => (
   </RadioGroup>
 );
 
-export const GroupError = () => (
-  <RadioGroup
-    legend="Group legend"
-    defaultValue="tekst2"
-    error="Group errormelding"
-  >
-    <Radio value="tekst">Radiotekst</Radio>
-    <Radio value="tekst2">Radiotekst</Radio>
-  </RadioGroup>
-);
+export const GroupError = () => {
+  const [isValueSelected, setValueSelected] = useState(false);
+  return (
+    <>
+      <button>Stop her</button>
+      <RadioGroup
+        legend="Velg din aldersgruppe"
+        description="Informasjonen blir brukt for å gi deg bedre søketreff."
+        error={!isValueSelected ? "Du må velge en aldersgruppe" : undefined}
+      >
+        <Radio onChange={() => setValueSelected(true)} value="0-20">
+          0-20 år
+        </Radio>
+        <Radio
+          onChange={() => setValueSelected(true)}
+          value="21-45"
+          description="Gjelder fra året man blir 21"
+        >
+          21-45 år
+        </Radio>
+        <Radio onChange={() => setValueSelected(true)} value="46-100">
+          46-100 år
+        </Radio>
+      </RadioGroup>
+    </>
+  );
+};
 
 export const GroupSmall = () => (
   <RadioGroup legend="Group legend" defaultValue="tekst2" size="small">

package/src/util/useId.ts

@@ -27,7 +27,7 @@ const maybeReactUseId: undefined | (() => string) = (React as any)[
  * @param idOverride
  * @returns {string}
  */
-export function useId(idOverride?: string): string | undefined {
+export function useId(idOverride?: string): string {
   if (maybeReactUseId !== undefined) {
     const reactId = maybeReactUseId();
     return idOverride ?? reactId.replace(/(:)/g, "");