@bbl-digital/snorre 4.0.7 → 4.0.9

package/esm/core/Alert/index.js

@@ -1,8 +1,9 @@
 /** @jsxImportSource @emotion/react */
-import React from 'react';
+import React, { useRef } from 'react';
 import { styles } from './styles';
 import Button from '../Button';
 import IconClose from '../../icons/General/IconClose';
+import VisuallyHidden from '../../shared/components/VisuallyHidden';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const Alert = ({
@@ -14,17 +15,46 @@ const Alert = ({
   css,
   children,
   className,
-  onClose
+  onClose,
+  ...restProps
 }) => {
+  const ariaLivePolicy = success ? 'polite' : 'assertive';
+  // Random id for aria-describedby
+  const id = Math.random().toString(36).substring(7);
+  const descriptionId = useRef(`aria-describedby-${id}`);
+  const childTextContent = React.Children.toArray(children).filter(child => typeof child === 'string');
+  const getDefaultAriaLabel = () => {
+    if (success) {
+      return 'Suksess';
+    }
+    if (danger) {
+      return 'Fare';
+    }
+    return 'Informasjon';
+  };
+  const accessibilityProps = {
+    role: restProps['role'] || 'alert',
+    'aria-live': ariaLivePolicy,
+    'aria-atomic': restProps['aria-atomic'] || true,
+    'aria-label': restProps['aria-label'] || getDefaultAriaLabel(),
+    'aria-relevant': restProps['aria-relevant'] || 'all',
+    'aria-describedby': descriptionId.current
+  };
   return _jsxs("div", {
     css: theme => [styles.default(theme), success && styles.success(theme), info && styles.info(theme), danger && styles.danger(theme), rounded && styles.rounded, primary && styles.primary(theme), css && css],
     className: className,
+    ...restProps,
+    ...accessibilityProps,
     children: [children, onClose && _jsx(Button, {
       onClick: onClose,
       nostyle: true,
+      "aria-label": "Lukk",
       children: _jsx(IconClose, {
         size: 14
       })
+    }), _jsx(VisuallyHidden, {
+      id: descriptionId.current,
+      children: childTextContent
     })]
   });
 };

package/esm/core/AppLoader/AppLoader.stories.js

@@ -1,10 +1,9 @@
 import AppLoader from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/AppLoader',
   component: AppLoader
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(AppLoader, {}),
   name: 'Default'
 };

package/esm/core/AppLoader/index.js

@@ -4,10 +4,18 @@ import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 const AppLoader = ({
-  color
+  color,
+  ...restProps
 }) => {
+  const accessibilityProps = {
+    role: restProps['role'] || 'status',
+    'aria-live': restProps['aria-live'] || 'polite',
+    'aria-label': restProps['aria-label'] || 'Laster innhold'
+  };
   return _jsxs("div", {
     css: theme => [styles.default(theme, color)],
+    ...restProps,
+    ...accessibilityProps,
     children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})]
   });
 };

package/esm/core/Banner/Banner.stories.js

@@ -2,12 +2,13 @@ import Banner from '.';
 import Header from '../Header';
 import Button from '../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Banner',
   component: Banner
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Banner, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 4,
       children: "Title"
@@ -16,53 +17,60 @@ export const Default = {
       onClick: () => console.log('Hello'),
       children: "Hello I am button"
     }),
-    children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
-  }),
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
+    })
+  },
   name: 'Default'
 };
 export const Success = {
-  render: () => /*#__PURE__*/_jsx(Banner, {
+  args: {
     success: true,
     header: /*#__PURE__*/_jsx(Header, {
       level: 4,
       children: "Title"
     }),
-    children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
-  }),
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
+    })
+  },
   name: 'Success'
 };
 export const Info = {
-  render: () => /*#__PURE__*/_jsx(Banner, {
+  args: {
     info: true,
     header: /*#__PURE__*/_jsx(Header, {
       level: 4,
       children: "Title"
     }),
-    children: "Content"
-  }),
-  name: 'Info'
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
+    })
+  }
 };
 export const Danger = {
-  render: () => /*#__PURE__*/_jsx(Banner, {
+  args: {
     danger: true,
     header: /*#__PURE__*/_jsx(Header, {
       level: 4,
       children: "Title"
     }),
-    children: "Content"
-  }),
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Eu irure eiusmod amet tempor nisi veniam cupidatat duis nulla dolor. Eiusmod amet sit nostrud adipisicing qui pariatur do et duis fugiat magna laboris elit irure. Officia fugiat incididunt ipsum commodo quis aute qui reprehenderit reprehenderit fugiat. Voluptate quis tempor ea consequat."
+    })
+  },
   name: 'Danger'
 };
 export const WithoutChildren = {
-  render: () => /*#__PURE__*/_jsx(Banner, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 4,
-      children: "Just a header"
+      children: "Title"
     }),
     actionButton: /*#__PURE__*/_jsx(Button, {
       onClick: () => console.log('Hello'),
-      children: "And a button"
+      children: "Hello I am button"
     })
-  }),
+  },
   name: 'Without children'
 };

package/esm/core/Banner/index.js

@@ -10,15 +10,18 @@ const Banner = ({
   info,
   success,
   header,
-  actionButton
+  actionButton,
+  ...restProps
 }) => {
   const isDefault = !success && !danger && !info;
   return _jsx(Alert, {
+    role: "banner",
     rounded: true,
     primary: isDefault,
     success: success,
     danger: danger,
     info: info,
+    ...restProps,
     children: _jsxs(Wrapper, {
       children: [_jsxs(LeftSide, {
         children: [header, children && _jsx(Content, {

package/esm/core/Modal/Modal.stories.js

@@ -2,22 +2,16 @@ import Header from '../Header';
 import Text from '../Text';
 import Button from '../Button';
 import Modal from '.';
+import { Fragment } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Modal',
-  component: Modal,
-  parameters: {
-    docs: {
-      story: {
-        inline: false,
-        height: '500px'
-      }
-    }
-  }
+  component: Modal
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Modal, {
+  args: {
     open: true,
     onClose: () => console.log('closed'),
     header: /*#__PURE__*/_jsx(Header, {
@@ -36,11 +30,11 @@ export const Default = {
     children: /*#__PURE__*/_jsx(Text, {
       children: "Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."
     })
-  }),
+  },
   name: 'Default'
 };
 export const Collapse = {
-  render: () => /*#__PURE__*/_jsx(Modal, {
+  args: {
     open: true,
     onClose: () => console.log('closed'),
     onCollapse: () => console.log('collapse'),
@@ -54,14 +48,13 @@ export const Collapse = {
     children: /*#__PURE__*/_jsx(Text, {
       children: "Hello there! I am Modal, i can be collapsed, but not in storybook though, it has to be done from parent"
     })
-  }),
+  },
   name: 'Collapse'
 };
 export const Dynamic = {
-  render: () => /*#__PURE__*/_jsx(Modal, {
+  args: {
     open: true,
     onClose: () => console.log('closed'),
-    width: '600px',
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Her kommer en header"
@@ -69,18 +62,17 @@ export const Dynamic = {
     actionButton: /*#__PURE__*/_jsx(Button, {
       children: "Save changes"
     }),
+    width: '600px',
     children: /*#__PURE__*/_jsx(Text, {
-      children: "Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."
+      children: "Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."
     })
-  }),
+  },
   name: 'Dynamic'
 };
 export const Scrollable = {
-  render: () => /*#__PURE__*/_jsxs(Modal, {
+  args: {
     open: true,
     onClose: () => console.log('closed'),
-    disableScrollableContent: false,
-    width: '100%',
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Scrollable modal"
@@ -88,30 +80,55 @@ export const Scrollable = {
     actionButton: /*#__PURE__*/_jsx(Button, {
       children: "Button is allways shown"
     }),
-    children: [/*#__PURE__*/_jsxs(Text, {
-      children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
-    }), /*#__PURE__*/_jsxs(Text, {
-      children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
-    }), /*#__PURE__*/_jsxs(Text, {
-      children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
-    }), /*#__PURE__*/_jsxs(Text, {
-      children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
-    })]
-  }),
+    disableScrollableContent: false,
+    width: '100%',
+    children: /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsxs(Text, {
+        children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
+      }), /*#__PURE__*/_jsxs(Text, {
+        children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
+      }), /*#__PURE__*/_jsxs(Text, {
+        children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
+      }), /*#__PURE__*/_jsxs(Text, {
+        children: ["Her kommer masse stuff. Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), "Her kommer masse stuff.", /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), /*#__PURE__*/_jsx("br", {}), "Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff.Her kommer masse stuff", /*#__PURE__*/_jsx("br", {}), ".Her kommer masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her", /*#__PURE__*/_jsx("br", {}), "kommer", /*#__PURE__*/_jsx("br", {}), "masse", /*#__PURE__*/_jsx("br", {}), "stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff.Her kommer masse stuff. Her kommer masse stuff. Her kommer masse stuff.Her kommer masse stuff."]
+      })]
+    })
+  },
   name: 'Scrollable'
 };
-export const Fullscreeen = {
-  render: () => /*#__PURE__*/_jsx(Modal, {
+export const Accessible = {
+  args: {
     open: true,
-    toggleFullscreen: true,
     onClose: () => console.log('closed'),
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
-      children: "With fullscreen"
+      children: "Accessible modal"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      children: "Ok"
     }),
     children: /*#__PURE__*/_jsx(Text, {
-      children: "Hello there! I am Modal, i can be be toggled for fullscreen"
-    })
-  }),
-  name: 'Fullscreeen'
+      children: "With some content"
+    }),
+    'aria-label': 'This has a custom label'
+  },
+  name: 'AccessibleModal'
+};
+export const Fullscreen = {
+  args: {
+    open: true,
+    onClose: () => console.log('closed'),
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 3,
+      children: "Fullscreen modal"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      children: "Ok"
+    }),
+    children: /*#__PURE__*/_jsx(Text, {
+      children: "With some content"
+    }),
+    toggleFullscreen: true
+  },
+  name: 'Fullscreen'
 };

package/esm/core/Modal/index.js

@@ -28,13 +28,15 @@ function Modal({
   defaultFullscreen,
   disableFocusTrap,
   onClose,
-  onCollapse
+  onCollapse,
+  ...restProps
 }) {
   const modalRef = /*#__PURE__*/createRef();
   const [isOpen, setOpen] = useState(open);
   const [headerHeight, setHeaderHeight] = useState(0);
   const [isFullscreen, setIsFullscreen] = useState(!!defaultFullscreen);
   const hasCollapse = Boolean(onCollapse);
+  const headerText = header && header?.props?.children || '';
   const setClose = () => {
     enableBodyScroll(modalRef.current);
     if (!disableLocalClose) setOpen(false);
@@ -42,11 +44,21 @@ function Modal({
       onClose();
     }
   };
+
+  // Capture escape
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Escape') {
+      setClose();
+    }
+  }, [setClose]);
   const handleHeaderRef = useCallback(node => {
     setHeaderHeight(node?.clientHeight);
   }, []);
   useEffect(() => {
     if (!modalRef.current) return;
+    if (isOpen) {
+      modalRef.current.focus();
+    }
     if (isOpen && disableScroll) {
       disableBodyScroll(modalRef.current);
       if (targetRefs && targetRefs.length > 0) {
@@ -63,6 +75,12 @@ function Modal({
       clearAllBodyScrollLocks();
     };
   });
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  });
   const onOutsideClick = () => {
     if (disableOutsideClick) return;
     setClose();
@@ -75,20 +93,28 @@ function Modal({
     children: _jsx(Overlay, {
       onClick: onOutsideClick,
       children: _jsxs(Content, {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": restProps['aria-label'] ?? header ? headerText.toString() : 'Modal',
         width: width,
         isFullscreen: isFullscreen,
         canToggleFullscreen: !!toggleFullscreen,
         onClick: e => e.stopPropagation(),
+        ...restProps,
         children: [(!hideCloseButton || hasCollapse || toggleFullscreen) && _jsxs(CloseWrapper, {
           children: [hasCollapse && _jsx(Button, {
             nostyle: true,
             onClick: onCollapse,
             focusable: true,
+            "aria-label": hasCollapse && 'Minimer',
+            title: "Minimer",
             children: _jsx(IconMinus, {})
           }), toggleFullscreen && _jsx(Button, {
             nostyle: true,
             onClick: () => setIsFullscreen(!isFullscreen),
             focusable: true,
+            "aria-label": isFullscreen ? 'Lukk fullskjerm' : 'Fullskjerm',
+            title: isFullscreen ? 'Lukk fullskjerm' : 'Fullskjerm',
             children: isFullscreen ? _jsx(IconFullscreenClose, {
               size: "20px"
             }) : _jsx(IconFullscreenOpen, {
@@ -98,6 +124,8 @@ function Modal({
             nostyle: true,
             onClick: setClose,
             focusable: true,
+            "aria-label": "Lukk",
+            title: "Lukk",
             children: _jsx(IconClose, {})
           })]
         }), _jsx(HeaderWrapper, {

package/esm/core/Tag/Tag.stories.js

@@ -1,112 +1,113 @@
 import Tag from '.';
 import IconComment from '../../icons/General/IconComment';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Tag',
   component: Tag
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    children: "Here"
-  }),
-  name: 'Default'
+  name: 'Default',
+  args: {
+    children: 'Here'
+  }
 };
 export const Neutral = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    neutral: true,
-    children: "Here"
-  }),
-  name: 'Neutral'
+  name: 'Neutral',
+  args: {
+    children: 'Here',
+    neutral: true
+  }
 };
 export const Success = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    success: true,
-    children: "Here"
-  }),
-  name: 'Success'
+  name: 'Success',
+  args: {
+    children: 'here',
+    success: true
+  }
 };
 export const Info = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    info: true,
-    children: "Here"
-  }),
-  name: 'Info'
+  name: 'Info',
+  args: {
+    children: 'here',
+    info: true
+  }
 };
 export const Danger = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    danger: true,
-    children: "Here"
-  }),
-  name: 'Danger'
+  name: 'Danger',
+  args: {
+    children: 'here',
+    danger: true
+  }
 };
 export const Dark = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    dark: true,
-    children: "Here"
-  }),
-  name: 'Dark'
+  name: 'Dark',
+  args: {
+    children: 'here',
+    dark: true
+  }
 };
 export const Light = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    light: true,
-    children: "Here"
-  }),
-  name: 'Light'
+  name: 'Light',
+  args: {
+    children: 'here',
+    light: true
+  }
 };
 export const Outline = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    outline: true,
-    children: "There"
-  }),
-  name: 'Outline'
+  name: 'Outline',
+  args: {
+    children: 'here',
+    outline: true
+  }
 };
 export const TagWithClose = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'Tag with close',
+  args: {
+    children: 'Click me',
     withclose: true,
-    onClick: () => console.log('close'),
-    children: "Here"
-  }),
-  name: 'Tag with close'
+    onClick: () => console.log('close')
+  }
 };
 export const TagWithLoading = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
-    loading: true,
-    children: "Here"
-  }),
-  name: 'Tag with loading'
+  name: 'Tag with loading',
+  args: {
+    children: 'Here',
+    loading: true
+  }
 };
 export const TagWithCloseAndStrictClick = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'Tag with close and strict click',
+  args: {
+    children: 'Have to close by clicking the "x"',
     strictClose: true,
-    onClick: () => console.log('close'),
-    children: "Here"
-  }),
-  name: 'Tag with close and strict click'
+    onClick: () => console.log('close')
+  }
 };
 export const TagWithCloseLoadingAndStrictClick = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'Tag with close, loading and strict click',
+  args: {
+    children: 'With loading',
     strictClose: true,
     loading: true,
-    onClick: () => console.log('close'),
-    children: "Here"
-  }),
-  name: 'Tag with close, loading and strict click'
+    onClick: () => console.log('close')
+  }
 };
 export const TagWithCloseAndStrictClickWithColor = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'Tag with close and strict click with color',
+  args: {
+    children: 'With custom close color',
     strictClose: true,
-    closeColor: "red",
-    onClick: () => console.log('close'),
-    children: "Here"
-  }),
-  name: 'Tag with close and strict click with color'
+    closeColor: 'red',
+    onClick: () => console.log('close')
+  }
 };
 export const WithIcon = {
-  render: () => /*#__PURE__*/_jsx(Tag, {
+  name: 'With icon',
+  args: {
+    children: '3',
     icon: /*#__PURE__*/_jsx(IconComment, {
       size: 14
-    }),
-    children: "3"
-  }),
-  name: 'With icon'
+    })
+  }
 };