Lerna versionbump [ci skip]

- @navikt/ds-icons@0.2.1
 - @navikt/ds-react@0.2.6

@navikt/ds-css/accordion-menu.css

@@ -69,7 +69,7 @@
 .navds-accordion-menu-item:focus,
 .navds-accordion-menu-collapsable__button:focus {
   outline: 3px solid var(--navds-text-focus);
-  outline-offset: 0;
+  outline-offset: -3px;
 }
 
 .navds-accordion-menu-item:hover,

@navikt/ds-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",

@navikt/ds-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -22,6 +22,7 @@
   "files": [
     "/cjs",
     "/esm",
+    "/src",
     "/svg"
   ],
   "scripts": {

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -28,11 +28,12 @@
   ],
   "scripts": {
     "cjs-package": "copyfiles -f config/package.json cjs",
-    "build": "tsc -p tsconfig.json && tsc -p tsconfig-esm.json && yarn cjs-package",
+    "clean": "rm -rf cjs esm",
+    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn cjs-package",
     "watch": "tsc --watch -p tsconfig.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^0.2.0",
+    "@navikt/ds-icons": "^0.2.1",
     "@popperjs/core": "^2.5.4",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",

docs/components/layout/sidebar/Menu.tsx

@@ -1,47 +1,34 @@
-import { NavdsPage } from "../../../src/pages";
+import { useRouter } from "next/router";
 import Link from "next/link";
+import {
+  AccordionMenu,
+  AccordionMenuCollapsable,
+  AccordionMenuItem,
+} from "@navikt/ds-react";
+
+const MenuLink = (node) => {
+  const { asPath } = useRouter();
 
-/* TODO: Replace with accordion-menu when ready */
-const subLinks = (page: NavdsPage) => {
   return (
-    <div key={page.title}>
-      <span>{page.title}</span>
-      <ul id={"collapse " + page.title}>{parsePages(page.children)}</ul>
-    </div>
+    <Link href={node.pathName} passHref>
+      <AccordionMenuItem active={asPath === node.pathName}>
+        {node.title}
+      </AccordionMenuItem>
+    </Link>
   );
 };
 
-const parsePages = (pages) => {
-  return pages?.map((page) => {
-    if (page.pathName) {
-      return (
-        <li key={page.pathName}>
-          <Link href={page.pathName}>
-            {page.title ? page.title : parseTitle(page.pathName)}
-          </Link>
-        </li>
-      );
-    } else if (page.title && page.children) {
-      return subLinks(page);
-    } else {
-      return null;
-    }
-  });
-};
-
-const parseTitle = (path: string) =>
-  path
-    .split("/")
-    .pop()
-    .replace(/^\w/, (c) => c.toUpperCase())
-    .replace("-", " ") || "ERR: Default Title";
-
-const Menu = ({ menu }) => {
-  return (
-    <nav>
-      <ul>{parsePages(menu)}</ul>
-    </nav>
+const mapToComponents = (node) =>
+  node.children ? (
+    <AccordionMenuCollapsable key={node.title} title={node.title}>
+      {node.children.map(mapToComponents)}
+    </AccordionMenuCollapsable>
+  ) : (
+    <MenuLink key={node.title} {...node} />
   );
-};
+
+const Menu = ({ menu }) => (
+  <AccordionMenu>{menu.map(mapToComponents)}</AccordionMenu>
+);
 
 export default Menu;

docs/components/layout/sidebar/Sidebar.tsx

@@ -11,7 +11,12 @@ interface SidebarProps {
   menu: any[];
 }
 
-const Sidebar = ({ sidebar, small, onSidebarChange, menu }: SidebarProps) => {
+const Sidebar = ({
+  sidebar,
+  small,
+  onSidebarChange,
+  menu = [],
+}: SidebarProps) => {
   return (
     <>
       {sidebar && small && (

website/src/pages/accessibility/overview.mdx

@@ -19,6 +19,11 @@ import Panel from "nav-frontend-paneler";
   vi bygger i NAV være universelt utformet slik at de aller fleste kan klare seg
   selv.
 </Ingress>
+<Ingress>
+  Utdypende informasjon om hvordan håndtere universell utforming av IT i NAV
+  finner du på{" "}
+  <a href="https://navikt.github.io/uu/">https://navikt.github.io/uu/</a>
+</Ingress>
 
 ## Nødvendig for noen, bra for alle
 
@@ -144,7 +149,9 @@ Dette er noen av de viktigste tingene du bør huske på for å unngå de vanligs
 
 ### For designere
 
-1.  Bruk aktuell versjon av [NAVs komponent- og illustrasjonsbibliotek i Sketch](/resources/new-project#for-designere) når du designer.
+[Flere tips for produktdesignere](https://navikt.github.io/uu/hvordan-faa-det-til/tips-etter-rolle/Produktdesigner/) og [tjenestedesignere](https://navikt.github.io/uu/hvordan-faa-det-til/tips-etter-rolle/Tjenestedesigner/) finner du på uu-sidene.
+
+1.  Bruk aktuell versjon av [NAVs komponent- og illustrasjonsbibliotek](/resources/new-project#for-designere) når du designer.
 2.  Design for grupper med spesielle behov («ytterkantene»). Spør deg selv: Hadde bestemoren min klart å bruke tjenesten? [Om inklusiv design (University of Cambridge)](http://www.inclusivedesigntoolkit.com/whatis/whatis.html)
 3.  Husk [god kontrast](/resources/colors/accessibility#krav-til-kontrast), både på tekst, interaktive elementer, grafer og illustrasjoner.
 4.  Husk [beskrivende alt-tekster](/accessibility/alt-text) på bilder, illustrasjoner og grafer.
@@ -152,21 +159,23 @@ Dette er noen av de viktigste tingene du bør huske på for å unngå de vanligs
 6.  Video: Husk å ha en tekstversjon som har samme innhold som videoen på siden, samt tekste video og bruk nyeste versjon av QBrick. Snart kommer en lovendring om at videoer også må være synstolket. Det betyr at man skal tilby en audiobeskrivelse av det som vises i videoen som ikke blir tydelig av selve lydsporet.
 7.  Språk og begreper: Skriv så forståelig som mulig og test teksten på reelle brukere. Bruk beskrivende overskrifter, deloverskrifter og punktlister der det er hensiktsmessig. Husk å ha en hovedoverskrift som beskriver hovedinnholdet på siden. Les mer om [tekst og struktur (Difi)]([https://uu.difi.no/krav-og-regelverk/losningsforslag-web/tekst-og-struktur) og våre [retningslinjer for språk](https://design.nav.no/resources/language)
 8.  Lenker: Skriv lenketekster slik at det er tydelig hvor lenken går. Ikke åpne lenker i ny fane/vindu. Se [retningslinjer for gode lenker](https://design.nav.no/components/lenke/accessibility).
-9.  Lag gode og [beskrivende feilmeldinger (Difi)](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/feilhandtering) og pass på at meldingene er i tråd med Designsystemet.
-10. Test med reelle brukere, også med personer som bruker hjelpemidler. Bruk Sanselaben i Sannergata (rom 5006).
+9.  Lag gode og [beskrivende feilmeldinger (DigDir)](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/feilhandtering) og pass på at meldingene er i tråd med Designsystemet.
+10. Test med reelle brukere, også med personer som bruker hjelpemidler. Bruk Sanselaben i Fyrstikkaleen.
 
 ### For utviklere
 
+[Flere tips for utviklere(https://navikt.github.io/uu/hvordan-faa-det-til/tips-etter-rolle/Utvikler/) på uu-sidene.
+
 1.  Bruk [komponentene våre](/components).
 2.  Sjekk at koderekkefølgen gjenspeiler den visuelle rekkefølgen.
 3.  Test at alt kan betjenes med tastatur og at fokusmarkering flyttes i forventet rekkefølge.
 4.  Bruk de [semantiske egenskapene i HTML (MDN)](https://developer.mozilla.org/en-US/docs/Glossary/Semantics).
 5.  Sjekk at du har med [hopp-lenkene (W3)](https://www.w3.org/TR/WCAG21/#bypass-blocks) og at de fungerer.
 6.  Sjekk at du har med [riktig &lt;title&gt; (W3)](https://www.w3.org/TR/WCAG21/#page-titled). Formen skal være `[hovedinnhold/overskrift på siden] - www.nav.no`
-7.  Pass på riktig [overskriftshierarki (Difi)](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/tekst-og-struktur)
+7.  Pass på riktig [overskriftshierarki (DigDir)](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/tekst-og-struktur)
 8.  Sjekk at HTMLen din [validerer (W3)](https://validator.w3.org).
 9.  Bruk [WAI-Aria (W3)](https://www.w3.org/WAI/standards-guidelines/aria) der standard HTML ikke er tilstrekkelig, for eksempel på [feilmeldinger](https://www.w3.org/TR/WCAG21/#status-messages)
 10. Bruk automatiserte testverktøy (som f.eks. [WAVE](https://wave.webaim.org) eller [Sortsite](https://www.powermapper.com/products/sortsite/)) aktivt og ofte.
 11. Test med skjermleser på egen hånd. Med for eksempel [ChromeVox](https://www.chromevox.com), [VoiceOver på Mac](https://webaim.org/articles/voiceover/), eller [TalkBack på Android](https://support.google.com/accessibility/android/answer/6283677?hl=en) er dette enklere enn du tror.
-12. Hvis mulig, bruk [NAV-ally](https://www.npmjs.com/package/nav-ally) i utviklingsprosessen.
-13. Test med reelle brukere, også med personer som bruker hjelpemidler. Bruk Sanselaben i Sannergata (rom 5006).
+12. Hvis mulig, bruk [automatisert testing](https://navikt.github.io/uu/hvordan-faa-det-til/UU-testing/automatisert-testing/) i utviklingsprosessen. Husk at dette dekker maks 20-30 prosent av potensielle feil.
+13. Test med reelle brukere, også med personer som bruker hjelpemidler. Bruk Sanselaben i Fyrstikkaleen.