Lerna versionbump [ci skip]

- @navikt/ds-css@0.6.5
 - @navikt/ds-react@0.6.5

.specifyrc.json

@@ -0,0 +1,57 @@
+{
+  "repository": "@nav/designsystem",
+  "head": "updated-specify-tokens",
+  "base": "master",
+  "rules": [
+    {
+      "name": "Specify / Icons",
+      "path": "@navikt/ds-icons/svg",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "name-assets-files-by-pattern",
+          "options": {
+            "pattern": "{{name}}.{{format}}"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Specify / Icons - metadata",
+      "path": "@navikt/ds-icons/figma-api/metadata-specify.json",
+      "filter": {
+        "types": ["vector"]
+      },
+      "parsers": [
+        {
+          "name": "pascalcasify",
+          "options": {
+            "keys": ["name"]
+          }
+        },
+        {
+          "name": "pick",
+          "options": {
+            "keys": [
+              "name",
+              "createdAt",
+              "updatedAt",
+              "meta.description",
+              "meta.parentFrame",
+              "meta.frame",
+              "page"
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}

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

@@ -22,18 +22,11 @@
   text-decoration: underline;
 }
 
-.navds-accordion-menu-collapsable .navds-accordion-menu__list,
-.navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable
-  .navds-accordion-menu-collapsable__button {
-  font-weight: var(--navds-font-weight-regular);
-}
-
 .navds-accordion-menu-item,
 .navds-accordion-menu-collapsable__button {
   display: flex;
   padding: var(--navds-spacing-3) var(--navds-spacing-4);
-  line-height: 1.5rem; /* TODO: fix typography. */
+  text-decoration: none;
 }
 
 .navds-accordion-menu-collapsable__expand-icon {
@@ -82,16 +75,16 @@
 .navds-accordion-menu-collapsable__button:focus {
   outline: 3px solid var(--navds-text-focus);
   outline-offset: -3px;
+  color: var(--navds-color-darkgray);
 }
 
 .navds-accordion-menu-item:hover,
 .navds-accordion-menu-collapsable__button:hover {
-  background-color: var(--navds-color-gray-20);
+  background-color: var(--navds-color-blue-10);
 }
 
 .navds-accordion-menu-item--active {
   box-shadow: inset 0.5rem 0 var(--navds-color-text-link);
   color: var(--navds-color-text);
   text-decoration: none;
-  font-weight: var(--navds-font-weight-bold);
 }

@navikt/ds-css/alert.css

@@ -3,18 +3,19 @@
   border: var(--navds-border-default);
 
   /* Padding calculated based on 18px font for 64px tall alert */
-  padding: 1.0625rem var(--navds-spacing-4);
+  padding: var(--navds-spacing-4) var(--navds-spacing-4);
   display: grid;
   grid-auto-flow: column;
   justify-content: start;
+  min-height: 64px;
 }
 
 .navds-alert--s {
-  padding: 0.1875rem var(--navds-spacing-4);
+  padding: var(--navds-spacing-1) var(--navds-spacing-4);
+  min-height: 32px;
 }
 
-.navds-alert > svg {
-  align-self: center;
+.navds-alert > span > svg {
   margin-right: var(--navds-spacing-3);
   font-size: 1.5rem;
   background: radial-gradient(
@@ -25,8 +26,15 @@
   );
 }
 
+.navds-alert > div {
+  display: flex;
+  align-items: center;
+}
+
 .navds-alert > span {
-  margin-top: 1px;
+  display: flex;
+  align-items: center;
+  max-height: calc(var(--navds-spacing-8) - 2px);
 }
 
 .navds-alert--error {
@@ -34,7 +42,7 @@
   background-color: var(--navds-color-error-background);
 }
 
-.navds-alert--error > svg {
+.navds-alert--error > span > svg {
   color: var(--navds-color-red-60);
 }
 
@@ -43,7 +51,7 @@
   background-color: var(--navds-color-warning-background);
 }
 
-.navds-alert--warning > svg {
+.navds-alert--warning > span > svg {
   color: var(--navds-color-orange-40);
   background: radial-gradient(
     circle,
@@ -58,7 +66,7 @@
   background-color: var(--navds-color-info-background);
 }
 
-.navds-alert--info > svg {
+.navds-alert--info > span > svg {
   color: var(--navds-color-lightblue-70);
 }
 
@@ -67,6 +75,6 @@
   background-color: var(--navds-color-success-background);
 }
 
-.navds-alert--success > svg {
+.navds-alert--success > span > svg {
   color: var(--navds-color-green-70);
 }

@navikt/ds-css/package.json

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

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",

@navikt/ds-react/src/accordion-menu/AccordionMenuCollapsable.tsx

@@ -32,6 +32,7 @@ const AccordionMenuCollapsable = forwardRef<
         {title}
         <Expand
           role="img"
+          focusable="false"
           aria-label={isOpen ? "Pil peker opp" : "Pil peker ned"}
           className="navds-accordion-menu-collapsable__expand-icon"
         />

@navikt/ds-react/src/accordion/Accordion.tsx

@@ -88,12 +88,16 @@ const Accordion = forwardRef<HTMLButtonElement, AccordionProps>(
             {heading}
           </span>
           <Expand
+            focusable="false"
+            role="img"
             className={cl(
               "navds-accordion__chevron",
               `navds-accordion__chevron--${internalOpen ? "up" : "down"}`
             )}
           />
           <ExpandFilled
+            focusable="false"
+            role="img"
             className={cl(
               "navds-accordion__chevron",
               "navds-accordion__chevron--filled",

@navikt/ds-react/src/alert/Alert.tsx

@@ -30,13 +30,37 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 const Icon = ({ variant }) => {
   switch (variant) {
     case "error":
-      return <ErrorFilled />;
+      return (
+        <ErrorFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "warning":
-      return <WarningFilled />;
+      return (
+        <WarningFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "info":
-      return <InformationFilled />;
+      return (
+        <InformationFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     case "success":
-      return <SuccessFilled />;
+      return (
+        <SuccessFilled
+          aria-label={`${variant}-ikon`}
+          focusable="false"
+          role="img"
+        />
+      );
     default:
       return null;
   }
@@ -56,8 +80,11 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
       )}
       {...rest}
     >
-      <Icon variant={variant} />
-      <span>{children}</span>
+      <span>
+        <span className="sr-only">{`${variant}-ikon`}</span>
+        <Icon variant={variant} />
+      </span>
+      <div>{children}</div>
     </div>
   )
 );

@navikt/ds-react/src/copy-to-clipboard/CopyToClipboard.tsx

@@ -61,7 +61,15 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
           onClick={handleClick}
           {...rest}
         >
-          {icon ? <>{icon}</> : <Copy aria-label="Fil ikon for kopiering" />}
+          {icon ? (
+            <>{icon}</>
+          ) : (
+            <Copy
+              focusable="false"
+              role="img"
+              aria-label="Fil ikon for kopiering"
+            />
+          )}
           {children ? children : <span className="sr-only">{title}</span>}
         </Button>
         <Popover

@navikt/ds-react/src/modal/Modal.tsx

@@ -86,7 +86,11 @@ const Modal: ModalLifecycle &
           aria-label="lukk modalvindu"
           onClick={onClose}
         >
-          <Close />
+          <Close
+            focusable="false"
+            role="img"
+            aria-label="X-ikon for å lukke modal"
+          />
         </Button>
       </ReactModal>
     );