Lerna versionbump [ci skip]

- @navikt/ds-react@0.16.20 - @navikt/ds-react-internal@0.11.20
[FIX] Modal aria-label (#1449 )
2026-10-16 02:32:02 +00:00 · 2022-03-02 10:10:05 +00:00 · 2022-03-02 11:01:45 +01:00 · 2022-03-01 10:13:40 +00:00 · 2022-03-01 11:03:45 +01:00
10 changed files with 67 additions and 76 deletions
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.15.11",
+  "version": "0.15.12",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -69,7 +69,8 @@
  flex-shrink: 0;
 }

-.navds-toggle-group__button[aria-pressed="true"] {
+.navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group__button[aria-checked="true"] {
  background-color: var(--navds-toggle-group-color-background-pressed);
  color: var(--navds-toggle-group-color-text-pressed);
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.16.18",
+  "version": "0.16.20",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -37,7 +37,7 @@
    "@material-ui/core": "^4.12.3",
    "@navikt/ds-icons": "^0.8.4",
    "@popperjs/core": "^2.10.1",
-    "@radix-ui/react-toggle-group": "0.1.4",
+    "@radix-ui/react-toggle-group": "0.1.5",
    "classnames": "^2.2.6",
    "react-collapse": "^5.1.0",
    "react-merge-refs": "^1.1.0",
@@ -36,6 +36,11 @@ export interface ModalProps {
  "aria-labelledby"?: string;
  "aria-describedby"?: string;
  "aria-modal"?: boolean;
+  /**
+   * Sets aria-label on modal
+   * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
+   */
+  "aria-label"?: string;
 }

 interface ModalComponent
@@ -62,6 +67,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
      "aria-describedby": ariaDescribedBy,
      "aria-labelledby": ariaLabelledBy,
      "aria-modal": ariaModal,
+      "aria-label": contentLabel,
      ...rest
    },
    ref
@@ -92,6 +98,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
          labelledby: ariaLabelledBy,
          modal: ariaModal,
        }}
+        contentLabel={contentLabel}
      >
        {children}
        {closeButton && (
@@ -16,9 +16,13 @@ export const All = () => {
  return (
    <>
      <button onClick={() => setOpen(true)}>Open modal</button>
-      <Modal open={open} onClose={() => setOpen(false)}>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="header123"
+      >
        <Modal.Content>
-          <h1>Header</h1>
+          <h1 id="header123">Header</h1>
          <h2>subheader</h2>
          <p>Cupidatat irure ipsum veniam ad in esse.</p>
          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
@@ -32,9 +36,10 @@ export const All = () => {
        shouldCloseOnOverlayClick={false}
        open={openTwo}
        onClose={() => setOpenTwo(false)}
+        aria-labelledby="header123"
      >
        <Modal.Content>
-          <h1>Header</h1>
+          <h1 id="header123">Header</h1>
          <h2>subheader</h2>
          <p>
            Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
@@ -54,10 +59,9 @@ export const All = () => {
        open={openThree}
        closeButton={false}
        onClose={() => setOpenThree(false)}
+        aria-label="Min modal"
      >
        <Modal.Content>
-          <h1>Header</h1>
-          <h2>subheader</h2>
          <p>Cupidatat irure ipsum veniam ad in esse.</p>
          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
        </Modal.Content>
@@ -1,32 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Modal } from "../../index";
-
-<Meta title="ds-react/modal/intro" />
-
-# Hvordan ta i bruk Modal
-
-NOTE: For at modalen skal mountes riktig må man kjøre
-`Modal.setAppElement("#root");` før man bruke modalen, da i eks useEffect/useLayoutEffect.
-`#root` kan da her erstattes med andre elementer, men root er relativt vanlig.
-Dette er nødvendig for at skjermlesere ikke skal lese opp innholdet feil i open/closed state
-
-Modalen styres med `open`-proppen som triggrer modal-staten til å endre. Når bruker ønsker å lukke modalen
-vil `onClose`-triggre og det er opp til systemet å håndtere det.
-
-```jsx
-<Modal open={open} onClose={() => setOpen(false)}>
-  <Modal.Content>
-    <h2>Heading</h2>
-    <p>
-      Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
-      laboriselit sit dolor aliquip velit esse. Excepteur sint non minim nulla
-      excepteur labore non magna eu.
-    </p>
-  </Modal.Content>
-</Modal>
-```
-
-## shouldCloseOnOverlayClick
-
-Proppen `shouldCloseOnOverlayClick` toggler om `onClose` skal triggres
-når bruker trykker utenfor modalen (overlayet). Er default: true .
@@ -51,6 +51,17 @@ const Items = (icon?: boolean, both?: boolean) => (
  </>
 );

+export const UUDemo = () => {
+  const [activeValue, setActiveValue] = useState("ulest");
+  return (
+    <ToggleGroup value={activeValue} onChange={setActiveValue}>
+      <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
+      <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
+      <ToggleGroup.Item value="sendt">Sendte</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+};
+
 export const All = () => {
  const [activeValue, setActiveValue] = useState("first");

@@ -120,7 +120,7 @@ const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
              `navds-toggle-group--${size}`
            )}
            {...(describeBy && { "aria-describedby": describeBy })}
-            role="toolbar"
+            role="radiogroup"
            type="single"
          >
            {children}
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "0.11.18",
+  "version": "0.11.20",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
  },
  "dependencies": {
    "@navikt/ds-icons": "^0.8.4",
-    "@navikt/ds-react": "^0.16.18",
+    "@navikt/ds-react": "^0.16.20",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
@@ -2607,15 +2607,15 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

-"@radix-ui/react-collection@0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-0.1.3.tgz#7b584f5db40ce165883b87c383d3bd16c0000d69"
-  integrity sha512-tMBY65l87tj77fMX44EBjm5p8clR6swkcNFr0/dDVdEPC0Vf3fwkv62dezCnZyrRBpkOgZPDOp2kO73hYlCfXw==
+"@radix-ui/react-collection@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-0.1.4.tgz#734061ffd5bb93e88889d49b87391a73a63824c9"
+  integrity sha512-3muGI15IdgaDFjOcO7xX8a35HQRBRF6LH9pS6UCeZeRmbslkVeHyJRQr2rzICBUoX7zgIA0kXyMDbpQnJGyJTA==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "0.1.0"
    "@radix-ui/react-context" "0.1.1"
-    "@radix-ui/react-primitive" "0.1.3"
+    "@radix-ui/react-primitive" "0.1.4"
    "@radix-ui/react-slot" "0.1.2"

 "@radix-ui/react-compose-refs@0.1.0":
@@ -2632,34 +2632,34 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

-"@radix-ui/react-id@0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-0.1.4.tgz#4cd6126e6ac8a43ebe6d52948a068b797cc9ad71"
-  integrity sha512-/hq5m/D0ZfJWOS7TLF+G0l08KDRs87LBE46JkAvgKkg1fW4jkucx9At9D9vauIPSbdNmww5kXEp566hMlA8eXA==
+"@radix-ui/react-id@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-0.1.5.tgz#010d311bedd5a2884c1e9bb6aaaa4e6cc1d1d3b8"
+  integrity sha512-IPc4H/63bes0IZ1GJJozSEkSWcDyhNGtKFWUpJ+XtaLyQ1X3x7Mf6fWwWhDcpqlYEP+5WtAvfqcyEsyjP+ZhBQ==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-use-layout-effect" "0.1.0"

-"@radix-ui/react-primitive@0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.3.tgz#585c35ef2ec06bab0ea9e0fc5c916e556661b881"
-  integrity sha512-fcyADaaAx2jdqEDLsTs6aX50S3L1c9K9CC6XMpJpuXFJCU4n9PGTFDZRtY2gAoXXoRCPIBsklCopSmGb6SsDjQ==
+"@radix-ui/react-primitive@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1"
+  integrity sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-slot" "0.1.2"

-"@radix-ui/react-roving-focus@0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-0.1.4.tgz#693ca3eaab153feabe37f9d50987d6d2911cf819"
-  integrity sha512-zaixcAxRcWQliUSx6l9rdfJhvcbuY7Tb4Emb7H4DWCTx1kenXH8+n9mwa8gaSIJLLSSSMzBpQATlpFw9xv/bJQ==
+"@radix-ui/react-roving-focus@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-0.1.5.tgz#cc48d17a36b56f253d54905b0fd60ee134cb97ee"
+  integrity sha512-ClwKPS5JZE+PaHCoW7eu1onvE61pDv4kO8W4t5Ra3qMFQiTJLZMdpBQUhksN//DaVygoLirz4Samdr5Y1x1FSA==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/primitive" "0.1.0"
-    "@radix-ui/react-collection" "0.1.3"
+    "@radix-ui/react-collection" "0.1.4"
    "@radix-ui/react-compose-refs" "0.1.0"
    "@radix-ui/react-context" "0.1.1"
-    "@radix-ui/react-id" "0.1.4"
-    "@radix-ui/react-primitive" "0.1.3"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-primitive" "0.1.4"
    "@radix-ui/react-use-callback-ref" "0.1.0"
    "@radix-ui/react-use-controllable-state" "0.1.0"

@@ -2671,27 +2671,27 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "0.1.0"

-"@radix-ui/react-toggle-group@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-0.1.4.tgz#e8204e1c458f0673acb58eb82677c35b867c04f8"
-  integrity sha512-pzs3Cc5I9JKnBdCBCB4xfhbQpWNKY9dYwKVxcYLzGmaUsVPUiAq2AYr/Ht3LebhIxWYHkggjX8EOTeO6ExMr8Q==
+"@radix-ui/react-toggle-group@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle-group/-/react-toggle-group-0.1.5.tgz#9e4d65e22c4fc0ba3a42fbc8d5496c430e5e9852"
+  integrity sha512-Yp14wFiqe00azF+sG5CCJz4JGOP/f5Jj+CxLlZCmMpG5qhVTWeaeG4YH6pvX4KL41fS8x9FAaLb8wW9y01o67g==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/primitive" "0.1.0"
    "@radix-ui/react-context" "0.1.1"
-    "@radix-ui/react-primitive" "0.1.3"
-    "@radix-ui/react-roving-focus" "0.1.4"
-    "@radix-ui/react-toggle" "0.1.3"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-roving-focus" "0.1.5"
+    "@radix-ui/react-toggle" "0.1.4"
    "@radix-ui/react-use-controllable-state" "0.1.0"

-"@radix-ui/react-toggle@0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-0.1.3.tgz#ca471d1b49bdf0c9b821f4c4e39feca70b7cde6a"
-  integrity sha512-ig2LsivpVOxbPoBpNy/6dgB5WNm0mkPMaBBgwo7yufDhlUExdp+bRCqkcWkN9EV42SEbd4etNEIrLAqppfgq3g==
+"@radix-ui/react-toggle@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-toggle/-/react-toggle-0.1.4.tgz#c5c63f7cc5a03556bb58e0a763735b41bb0331f9"
+  integrity sha512-gxUq6NgMc4ChV8VJnwdYqueeoblspwXHAexYo+jM9N2hFLbI1C587jLjdTHzIcUa9q68Xaw4jtiImWDOokEhRw==
  dependencies:
    "@babel/runtime" "^7.13.10"
    "@radix-ui/primitive" "0.1.0"
-    "@radix-ui/react-primitive" "0.1.3"
+    "@radix-ui/react-primitive" "0.1.4"
    "@radix-ui/react-use-controllable-state" "0.1.0"

 "@radix-ui/react-use-callback-ref@0.1.0":
Author	SHA1	Message	Date
github-actions[bot]	7e8899df34	Lerna versionbump [ci skip] - @navikt/ds-react@0.16.20 - @navikt/ds-react-internal@0.11.20	2022-03-02 10:10:05 +00:00
Ken	3926b24350	[FIX] Modal aria-label (#1449 )	2022-03-02 11:01:45 +01:00
github-actions[bot]	f1c2c718e5	Lerna versionbump [ci skip] - @navikt/ds-css@0.15.12 - @navikt/ds-react@0.16.19 - @navikt/ds-react-internal@0.11.19	2022-03-01 10:13:40 +00:00
Ken	ddcc6b8bd7	[FIX] Ny versjon av Radix ToggleGroup (#1448 )	2022-03-01 11:03:45 +01:00