@bbl-digital/snorre 4.0.10 → 4.0.11

package/esm/core/Alert/index.js

@@ -33,7 +33,6 @@ const Alert = ({
     return 'Informasjon';
   };
   const accessibilityProps = {
-    role: restProps['role'] || 'alert',
     'aria-live': ariaLivePolicy,
     'aria-atomic': restProps['aria-atomic'] || true,
     'aria-label': restProps['aria-label'] || getDefaultAriaLabel(),
@@ -41,6 +40,7 @@ const Alert = ({
     'aria-describedby': descriptionId.current
   };
   return _jsxs("div", {
+    role: "alert",
     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,

package/esm/core/AppLoader/index.js

@@ -8,11 +8,11 @@ const AppLoader = ({
   ...restProps
 }) => {
   const accessibilityProps = {
-    role: restProps['role'] || 'status',
     'aria-live': restProps['aria-live'] || 'polite',
     'aria-label': restProps['aria-label'] || 'Laster innhold'
   };
   return _jsxs("div", {
+    role: "status",
     css: theme => [styles.default(theme, color)],
     ...restProps,
     ...accessibilityProps,

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

@@ -73,4 +73,21 @@ export const WithoutChildren = {
     })
   },
   name: 'Without children'
+};
+export const WithAriaLabel = {
+  args: {
+    header: /*#__PURE__*/_jsx(Header, {
+      level: 4,
+      children: "Title"
+    }),
+    'aria-label': 'Title. Some content.',
+    children: /*#__PURE__*/_jsx("p", {
+      children: "Some content"
+    }),
+    actionButton: /*#__PURE__*/_jsx(Button, {
+      onClick: () => console.log('Hello'),
+      children: "Hello I am button"
+    })
+  },
+  name: 'With aria-label'
 };

package/esm/core/Banner/index.js

@@ -15,7 +15,7 @@ const Banner = ({
 }) => {
   const isDefault = !success && !danger && !info;
   return _jsx(Alert, {
-    role: "banner",
+    "aria-live": "assertive",
     rounded: true,
     primary: isDefault,
     success: success,

package/esm/core/Box/Box.stories.js

@@ -1,89 +1,90 @@
 import Header from '../Header';
 import Box from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Box',
   component: Box
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Box, {
-    children: "Stuff"
-  }),
+  args: {
+    children: 'Stuff'
+  },
   name: 'Default'
 };
 export const Collapsable = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
     collapsable: true,
-    children: "Stuff"
-  }),
+    children: 'Stuff'
+  },
   name: 'Collapsable'
 };
 export const Rounded = {
-  render: () => /*#__PURE__*/_jsx(Box, {
-    type: "mysite",
-    children: "Stuff"
-  }),
+  args: {
+    type: 'mysite',
+    children: 'Stuff'
+  },
   name: 'Rounded'
 };
 export const WithHeader = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
-    children: "Stuff"
-  }),
+    children: 'Stuff'
+  },
   name: 'With header'
 };
 export const WithHeaderAndCollapse = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
     collapsable: true,
-    children: "Stuff"
-  }),
+    children: 'Stuff'
+  },
   name: 'With header and collapse'
 };
 export const CollapsableMysite = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
     collapsable: true,
-    type: "mysite",
-    children: "Stuff"
-  }),
+    type: 'mysite',
+    children: 'Stuff'
+  },
   name: 'Collapsable mysite'
 };
 export const Noshadow = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     noshadow: true,
-    children: "Stuff"
-  }),
+    children: 'Stuff'
+  },
   name: 'Noshadow'
 };
 export const Background = {
-  render: () => /*#__PURE__*/_jsx(Box, {
-    background: "#ececec",
-    children: "Stuff"
-  }),
+  args: {
+    background: '#ececec',
+    children: 'Stuff'
+  },
   name: 'Background'
 };
 export const HideContent = {
-  render: () => /*#__PURE__*/_jsx(Box, {
+  args: {
     header: /*#__PURE__*/_jsx(Header, {
       level: 3,
       children: "Header"
     }),
     hideContent: true,
-    children: "Content"
-  }),
+    children: 'Stuff'
+  },
   name: 'Hide content'
 };

package/esm/core/Box/index.js

@@ -28,12 +28,18 @@ const Box = ({
   const onCollapseIconClicked = e => {
     setIsOpen(!isOpen);
   };
-  const icon = collapseIcon === 'plus/minus' ? isOpen ? _jsx(IconMinus, {}) : _jsx(IconPlus, {}) : _jsx(IconChevronDown, {
+  const icon = collapseIcon === 'plus/minus' ? isOpen ? _jsx(IconMinus, {
+    "aria-hidden": "true"
+  }) : _jsx(IconPlus, {
+    "aria-hidden": "true"
+  }) : _jsx(IconChevronDown, {
     flipVertical: isOpen,
-    size: "14px"
+    size: "14px",
+    "aria-hidden": "true"
   });
   const headerWrapper = collapsable ? _jsx(CollapseButton, {
-    "aria-label": "Toggle box open close",
+    "aria-label": `Toggle box ${isOpen ? 'closed' : 'open'}`,
+    "aria-expanded": isOpen,
     onClick: onCollapseIconClicked,
     nostyle: true,
     children: _jsxs(HeaderWrapper, {
@@ -45,6 +51,7 @@ const Box = ({
     children: header
   });
   return _jsxs("div", {
+    role: "group",
     css: theme => [styles.default(theme), css && css, type === 'mysite' && styles.mysite(theme), noshadow && styles.noshadow, background && styles.background(background)],
     className: className,
     ...restProps,

package/esm/core/Button/index.js

@@ -6,7 +6,7 @@ import AppLoader from '../AppLoader';
 import { useTheme } from '@emotion/react';
 import IconChevronLeft from '../../icons/General/IconChevronLeft';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-const Button = props => {
+const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     danger,
     success,
@@ -49,6 +49,7 @@ const Button = props => {
     tabIndex: tabIndex,
     disabled: disabled,
     loading: loading,
+    ref: ref,
     css: theme => [styles.default(theme), outline && styles.outline(theme), danger && styles.danger(theme), success && styles.success(theme), highlight && styles.highlighted, disabled && styles.disabled(theme), (beforeIcon || afterIcon) && styles.icon(theme), beforeIcon && styles.beforeIcon, afterIcon && styles.afterIcon, border && styles.border(border), nostyle && styles.nostyle, loading && styles.loading(theme), back && styles.back(theme), css && css, small && styles.small, danger && outline && styles.dangerOutline(theme), success && outline && styles.successOutline(theme), transparentBg && styles.transparentBg, focusable && styles.focusable],
     afterIcon: afterIcon,
     beforeIcon: back ? _jsx(IconChevronLeft, {
@@ -60,5 +61,5 @@ const Button = props => {
       color: getLoaderColor()
     }) : props.children
   });
-};
+});
 export default Button;

package/esm/core/Card/Card.stories.js

@@ -2,21 +2,22 @@ import Card from '.';
 import Dropdown from '../Dropdown';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Card',
   component: Card
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Card, {
-    children: "Stuff"
-  }),
+  args: {
+    children: 'Stuff'
+  },
   name: 'Default'
 };
 export const WithHover = {
-  render: () => /*#__PURE__*/_jsx(Card, {
+  args: {
     withhover: true,
-    children: "Hover me!"
-  }),
+    children: 'Hover me!'
+  },
   name: 'With hover'
 };
 export const WithShadow = {

package/esm/core/Card/index.js

@@ -20,6 +20,7 @@ const Card = ({
     onClick: props.onClick,
     onKeyPress: handleOnKeyPress,
     className: className,
+    ...props,
     children: props.children
   });
 };

package/esm/core/Checkbox/Checkbox.stories.js

@@ -1,43 +1,43 @@
 import Checkbox from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/Checkbox',
   component: Checkbox
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1",
-    children: "Option"
-  }),
+  args: {
+    value: 'value1',
+    children: 'Option'
+  },
   name: 'Default'
 };
 export const WithoutLabel = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1"
-  }),
+  args: {
+    value: 'value1'
+  },
   name: 'Without label'
 };
 export const Subtle = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1",
-    type: "subtle",
-    children: "Option"
-  }),
+  args: {
+    value: 'value1',
+    type: 'subtle',
+    children: 'Option'
+  },
   name: 'Subtle'
 };
 export const Checked = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1",
+  args: {
+    value: 'value1',
     checked: true,
-    children: "Option"
-  }),
+    children: 'Option'
+  },
   name: 'Checked'
 };
 export const Disabled = {
-  render: () => /*#__PURE__*/_jsx(Checkbox, {
-    value: "value1",
+  args: {
+    value: 'value1',
     disabled: true,
-    children: "Disabled option"
-  }),
+    children: 'Disabled option'
+  },
   name: 'Disabled'
 };

package/esm/core/CollapseList/CollapseList.stories.js

@@ -1,43 +1,51 @@
 import CollapseList from '.';
 import CollapseListItem from './Item';
 import Text from '../Text';
+import Header from '../Header';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
+const meta = {
   title: 'Core/CollapseList',
   component: CollapseList
 };
+export default meta;
 export const Default = {
-  render: () => /*#__PURE__*/_jsxs(CollapseList, {
-    children: [/*#__PURE__*/_jsx(CollapseListItem, {
-      header: /*#__PURE__*/_jsx(Text, {
-        children: "Header"
-      }),
-      content: /*#__PURE__*/_jsx(Text, {
-        children: "Content"
-      })
-    }), /*#__PURE__*/_jsx(CollapseListItem, {
-      header: /*#__PURE__*/_jsx(Text, {
-        children: "Item 2"
-      }),
-      content: /*#__PURE__*/_jsx(Text, {
-        children: "Content"
-      })
-    })]
-  }),
+  args: {
+    children: /*#__PURE__*/_jsxs(CollapseList, {
+      children: [/*#__PURE__*/_jsx(CollapseListItem, {
+        header: /*#__PURE__*/_jsx(Header, {
+          level: 5,
+          children: "Header"
+        }),
+        content: /*#__PURE__*/_jsx(Text, {
+          children: "Content"
+        })
+      }), /*#__PURE__*/_jsx(CollapseListItem, {
+        header: /*#__PURE__*/_jsx(Header, {
+          level: 5,
+          children: "Item 2"
+        }),
+        content: /*#__PURE__*/_jsx(Text, {
+          children: "Content"
+        })
+      })]
+    })
+  },
   name: 'Default'
 };
 export const InitialOpen = {
-  render: () => /*#__PURE__*/_jsx(CollapseList, {
-    children: /*#__PURE__*/_jsx(CollapseListItem, {
-      header: /*#__PURE__*/_jsx(Text, {
-        children: "Header"
-      }),
-      content: /*#__PURE__*/_jsx(Text, {
-        children: "Content"
-      }),
-      initialOpen: true
+  args: {
+    children: /*#__PURE__*/_jsx(CollapseList, {
+      children: /*#__PURE__*/_jsx(CollapseListItem, {
+        header: /*#__PURE__*/_jsx(Text, {
+          children: "Header"
+        }),
+        content: /*#__PURE__*/_jsx(Text, {
+          children: "Content"
+        }),
+        initialOpen: true
+      })
     })
-  }),
+  },
   name: 'initialOpen'
 };

package/esm/core/CollapseList/Item.js

@@ -1,32 +1,65 @@
-import React, { useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { CollapseButton } from './styles';
 import { IconChevronDown } from '../..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const headerTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'Header'];
 const CollapseListItem = ({
   header,
   content,
-  initialOpen
+  initialOpen,
+  ...restProps
 }) => {
   const [open, setOpen] = useState(initialOpen ? true : false);
+  const contentRef = useRef(null);
+  const contentId = `content-${Math.random().toString(36).substring(2, 9)}`;
+  const tag = useMemo(() => getHtmlTag(header), [header]);
+  const isHeadingOrHTMLHeading = headerTags.includes(tag || '');
+  function getHtmlTag(node) {
+    if ( /*#__PURE__*/React.isValidElement(node)) {
+      const element = node;
+      if (typeof element.type === 'function') {
+        return element.type.name;
+      } else if (typeof element.type === 'string') {
+        return element.type;
+      }
+    }
+    return null;
+  }
   const toggleOpen = () => {
     setOpen(!open);
+    if (!open && contentRef.current) {
+      contentRef.current.focus(); // Optional focus management.
+    }
   };
+
   return /*#__PURE__*/_jsxs("div", {
     className: "item",
+    ...restProps,
+    role: restProps['role'] || 'listitem',
     children: [/*#__PURE__*/_jsx(CollapseButton, {
       onClick: toggleOpen,
       nostyle: true,
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      "aria-label": typeof header === 'string' ? `Toggle ${header}` : undefined,
       children: /*#__PURE__*/_jsxs("div", {
         className: "header",
+        role: !isHeadingOrHTMLHeading ? 'heading' : undefined,
         children: [header, /*#__PURE__*/_jsx(IconChevronDown, {
           primary: true,
           flipVertical: open,
           size: '14px'
         })]
       })
-    }), open && /*#__PURE__*/_jsx("div", {
+    }), open && /*#__PURE__*/_jsx("section", {
+      role: "region",
       className: "content",
+      id: contentId,
+      "aria-hidden": !open,
+      ref: contentRef,
+      tabIndex: -1,
+      "aria-live": "polite",
       children: content
     })]
   });

package/esm/core/CollapseList/index.js

@@ -3,10 +3,12 @@ import React from 'react';
 import { styles } from './styles';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 const CollapseList = ({
-  children
+  children,
+  ...restProps
 }) => {
   return _jsx("div", {
     css: theme => [styles.default(theme)],
+    ...restProps,
     children: children
   });
 };

package/esm/core/CommentsTimeline/CommentLine/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { DateWrapper, IconWrapper, TextWrapper, Wrapper } from './styles';
 import { useTheme } from '@emotion/react';
 import Text from '../../Text';
-import { useIsMobile } from '../../..';
+import { Header, useIsMobile } from '../../..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const CommentLine = ({
@@ -14,13 +14,18 @@ const CommentLine = ({
   italic,
   commentInfo,
   subtle,
-  customContent
+  customContent,
+  ...restProps
 }) => {
   const theme = useTheme();
   const isMobile = useIsMobile();
+  const ariaLabel = `kommentar ${date} klokken ${time}`;
   return /*#__PURE__*/_jsxs(Wrapper, {
     theme: theme,
     "data-testid": "comment-line",
+    role: "article",
+    "aria-label": ariaLabel,
+    ...restProps,
     children: [/*#__PURE__*/_jsxs(DateWrapper, {
       children: [/*#__PURE__*/_jsx(Text, {
         subtle: true,
@@ -31,15 +36,19 @@ const CommentLine = ({
         children: date
       })]
     }), /*#__PURE__*/_jsx(IconWrapper, {
+      "aria-hidden": true,
       children: icon
     }), /*#__PURE__*/_jsxs(TextWrapper, {
-      children: [/*#__PURE__*/_jsx(Text, {
-        semibold: true,
+      tabIndex: 0,
+      children: [/*#__PURE__*/_jsx(Header, {
+        level: 5,
+        size: "16px",
         children: header
       }), /*#__PURE__*/_jsx(Text, {
         italic: italic,
         subtle: subtle,
         size: "14px",
+        paragraph: true,
         children: comment
       }), commentInfo && /*#__PURE__*/_jsx(Text, {
         italic: true,