@dnanpm/styleguide 3.9.6 → 3.9.8

package/build/es/components/AccordionItem/AccordionItem.js

@@ -21,7 +21,7 @@ const AccordionItemTitle = styled__default.div `
     display: flex;
     justify-content: space-between;
     flex-direction: row;
-    cursor: pointer;
+    cursor: ${p => (p.showPointer ? 'pointer' : 'default')};
     padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)}
         ${getMultipliedSize(theme.base.baseHeight, 2)};
     color: ${p => p.isExpanded && p.highlightSelected ? theme.color.default.pink : theme.color.default.black};
@@ -56,17 +56,27 @@ const AccordionItemCloseButton = styled__default.div `
 `;
 /** @visibleName Accordion Item */
 const AccordionItem = (_a) => {
-    var { type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = __rest(_a, ["type", "hasCloseButton", "highlightSelected"]);
+    var _b, _c;
+    var { 'data-testid': dataTestId = 'accordion-item', type = 'box', hasCloseButton = false, highlightSelected = type === 'panel' } = _a, props = __rest(_a, ['data-testid', "type", "hasCloseButton", "highlightSelected"]);
     const contentRef = useRef(null);
+    const accordionButtonRef = useRef(null);
     // Get height when element dimensions change
     const { height: contentHeight } = useResizeObserver(contentRef);
-    const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, "aria-expanded": Boolean(props.isExpanded), className: props.className },
-        React__default.createElement(AccordionItemTitle, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, role: "button" },
+    const accordionContentId = `accordion-content-id-${(_b = props.id) !== null && _b !== void 0 ? _b : ''}`;
+    const accordionButtonId = `accordion-button-id-${(_c = props.id) !== null && _c !== void 0 ? _c : ''}`;
+    const handleInteraction = (callback, event) => {
+        callback === null || callback === void 0 ? void 0 : callback(event);
+        if (accordionButtonRef.current)
+            accordionButtonRef.current.focus();
+    };
+    const hasFunctionality = Boolean(props.onClick || props.onKeyDown);
+    const itemContent = (React__default.createElement(AccordionItemContainer, { id: props.id, type: type, className: props.className, "data-testid": dataTestId },
+        React__default.createElement(AccordionItemTitle, { ref: accordionButtonRef, id: accordionButtonId, tabIndex: hasFunctionality ? 0 : -1, onClick: props.onClick, onKeyDown: props.onKeyDown, isExpanded: Boolean(props.isExpanded), highlightSelected: highlightSelected, "aria-expanded": Boolean(props.isExpanded), "aria-controls": accordionContentId, showPointer: hasFunctionality, "data-testid": `${dataTestId}-title`, role: "button" },
             props.title,
             props.isExpanded ? (React__default.createElement(Icon, { icon: ChevronUp, color: theme.color.default.black, position: "right", "aria-label": props.closeLabel })) : (React__default.createElement(Icon, { icon: ChevronDown, color: theme.color.default.black, position: "right", "aria-label": props.openLabel }))),
-        React__default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded },
-            React__default.createElement(AccordionItemContent, { ref: contentRef }, props.children)),
-        hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: props.onClick, onKeyDown: props.onKeyDown, "aria-label": props.closeLabel, role: "button" },
+        React__default.createElement(AccordionItemContentWrapper, { maxHeight: contentHeight, isExpanded: props.isExpanded, "aria-labelledby": accordionButtonId, "aria-hidden": !props.isExpanded, "data-testid": `${dataTestId}-content`, role: "region" },
+            React__default.createElement(AccordionItemContent, { id: accordionContentId, ref: contentRef }, props.children)),
+        hasCloseButton && props.isExpanded && (React__default.createElement(AccordionItemCloseButton, { tabIndex: 0, onClick: e => handleInteraction(props.onClick, e), onKeyDown: e => handleInteraction(props.onKeyDown, e), "aria-label": props.closeLabel, "data-testid": `${dataTestId}-close-button`, role: "button" },
             React__default.createElement("span", null, props.closeLabel),
             React__default.createElement(Icon, { icon: Close })))));
     return type === 'box' ? (React__default.createElement(Box, { elevation: props.isExpanded ? 'low' : 'none', padding: "0" }, itemContent)) : (itemContent);

package/build/es/components/Button/Button.d.ts

@@ -78,10 +78,22 @@ export interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label for the button
+     */
+    'aria-label'?: string;
     /**
      * Allows to pass any data-* attribute
      */
     dataAttributes?: Record<`data-${string}`, string>;
+    /**
+     * Allows to pass a screen reader label for the loading indicator
+     */
+    loadingLabel?: string;
+    /**
+     * Ref for the button element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
 }
 export declare const shade: {
     pink: {
@@ -100,6 +112,6 @@ export declare const shade: {
     };
 };
 /** @visibleName Button */
-declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const Button: ({ type, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Button;

package/build/es/components/Button/Button.js

@@ -43,7 +43,7 @@ const Element = styled__default.button `
         display: inline-flex;
     }
 
-    &:focus {
+    &:focus-visible {
         color: ${({ darkBg }) => (darkBg ? theme.color.text.plum : theme.color.text.white)};
         background-color: ${({ darkBg }) => darkBg ? theme.color.default.white : shade.plum.darker};
         border: 2px solid
@@ -57,7 +57,7 @@ const Element = styled__default.button `
         color: ${({ darkBg }) => (darkBg ? theme.color.text.plum : theme.color.text.white)};
         background-color: ${({ darkBg }) => darkBg ? theme.color.default.white : shade.plum.darker};
 
-        &:focus {
+        &:focus-visible {
             border: 2px solid
                 ${({ darkBg }) => (darkBg ? theme.color.focus.dark : theme.color.focus.light)};
             box-shadow: 0px 0px 0px 2px
@@ -113,11 +113,11 @@ const Element = styled__default.button `
 `;
 /** @visibleName Button */
 const Button = (_a) => {
-    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value']);
-    return (React__default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes, (!props.href && {
+    var { type = 'submit', 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["type", 'data-testid', 'data-no-close', 'data-track-value', 'aria-label']);
+    return (React__default.createElement(Element, Object.assign({ id: props.id, as: props.href ? 'a' : undefined, type: props.href ? undefined : type, href: props.href, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, fullWidth: props.fullWidth, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-label": ariaLabel }, props.dataAttributes, (!props.href && {
         name: props.name,
         disabled: props.disabled,
-    })), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
+    })), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.plum, label: props.loadingLabel })) : (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))));
 };
 
 export { Button as default, shade };

package/build/es/components/ButtonArrow/ButtonArrow.d.ts

@@ -24,7 +24,7 @@ type Props = ({
      */
     icon: ReactNode;
     direction?: never;
-}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close'> & {
+}) & Omit<ButtonProps, 'children' | 'small' | 'fullWidth' | 'loading' | 'data-no-close' | 'href' | 'loadingLabel'> & {
     /**
      * Allows to change the styling of component
      *
@@ -34,8 +34,14 @@ type Props = ({
      * @default 'primary'
      */
     variant?: ButtonArrowVariant;
+    /**
+     * Allows to change the type of resulting HTML element from button (`<button></button>`) to anchor (`<a href="..."></a>`)
+     *
+     * @deprecated Use `Button` component for href support
+     */
+    href?: string;
 };
 /** @visibleName Button Arrow */
-declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const ButtonArrow: ({ variant, "data-testid": dataTestId, "data-track-value": dataTrackValue, "aria-label": ariaLabel, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default ButtonArrow;

package/build/es/components/ButtonArrow/ButtonArrow.js

@@ -62,9 +62,9 @@ const buttonsMap = {
 };
 /** @visibleName Button Arrow */
 const ButtonArrow = (_a) => {
-    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["variant", 'data-testid', 'data-track-value']);
+    var { variant = 'primary', 'data-testid': dataTestId, 'data-track-value': dataTrackValue, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["variant", 'data-testid', 'data-track-value', 'aria-label']);
     const Element = buttonsMap[variant];
-    return (React__default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes }, props.direction ? (React__default.createElement(Icon, { icon: iconsMap[props.direction], size: "1rem" })) : (isValidElement(props.icon) && props.icon.type === Icon && props.icon)));
+    return (React__default.createElement(Element, { id: props.id, href: props.href, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, darkBg: props.darkBg, disabled: props.disabled, className: props.className, "data-testid": dataTestId, "data-track-value": dataTrackValue, dataAttributes: props.dataAttributes, "aria-label": ariaLabel }, props.direction ? (React__default.createElement(Icon, { icon: iconsMap[props.direction], size: "1rem", "aria-hidden": true })) : (isValidElement(props.icon) && props.icon.type === Icon && props.icon)));
 };
 
 export { ButtonArrow as default };

package/build/es/components/ButtonIcon/ButtonIcon.d.ts

@@ -20,8 +20,24 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      * @default false
      */
     isReversed?: boolean;
+    /**
+     * Aria-expanded for screen readers
+     *
+     * @default undefined
+     */
+    ariaExpanded?: boolean;
+    /**
+     * Allows to pass aria hidden to the icon element for screen readers
+     *
+     * @default undefined
+     */
+    ariaHidden?: boolean;
+    /**
+     * Screen reader label describing the purpose of the ButtonIcon,
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Button Icon */
-declare const ButtonIcon: ({ icon, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, ...props }: Props) => React.JSX.Element;
+declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 /** @component */
 export default ButtonIcon;

package/build/es/components/ButtonIcon/ButtonIcon.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { EditUnderline } from '@dnanpm/icons';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import styled__default, { css } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getDividedSize, media } from '../../utils/styledUtils.js';
@@ -26,7 +26,7 @@ const ButtonElement = styled__default.button `
 
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
-    &:focus {
+    &:focus-visible {
         border-radius: ${theme.radius.s};
         text-decoration: underline;
         border: 2px solid
@@ -80,12 +80,12 @@ const ButtonElement = styled__default.button `
         `}
 `;
 /** @visibleName Button Icon */
-const ButtonIcon = (_a) => {
+const ButtonIcon = forwardRef((_a, ref) => {
     var { icon = EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = __rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.createElement(ButtonElement, Object.assign({ id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black })) : (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined }),
+    return (React__default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel }, props.dataAttributes), props.loading ? (React__default.createElement(PixelLoader, { color: props.darkBg ? theme.color.default.white : theme.color.default.black })) : (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Icon, { icon: icon, color: props.darkBg ? theme.color.default.white : theme.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": props.ariaHidden }),
         props.children && (React__default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
-};
+});
 
 export { ButtonIcon as default };

package/build/es/components/Checkbox/Checkbox.js

@@ -1,6 +1,5 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import { CheckboxAndRadioInputCore } from '../../themes/globalStyles.js';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize, getDividedSize } from '../../utils/styledUtils.js';
@@ -18,17 +17,78 @@ const Container = styled.div `
     line-height: ${theme.lineHeight.default};
     margin-bottom: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
 `;
-const Input = styled(CheckboxAndRadioInputCore) `
+const Input = styled.input `
+    display: inline-grid;
+    appearance: none;
+    place-content: center;
+    float: left;
+    margin: 0;
+    cursor: pointer;
+    font-family: ${theme.fontFamily.default};
+    font-size: ${theme.fontSize.default};
+    line-height: ${theme.lineHeight.default};
+    min-width: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    width: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    height: ${getMultipliedSize(theme.base.baseWidth, 2)};
+    color: ${theme.color.line.L01};
+    border: 2px solid ${theme.color.line.L01};
+    background-color: ${theme.color.background.white.default};
     position: relative;
     top: ${getDividedSize(theme.base.baseWidth, 5)};
+    border-radius: ${theme.radius.s};
+
+    & + label {
+        cursor: pointer;
+        color: ${theme.color.text.black};
+        font-weight: ${theme.fontWeight.medium};
+        padding-left: ${getMultipliedSize(theme.base.baseWidth, 1)};
+    }
+
+    &::before {
+        content: '';
+        transform: scale(0);
+        background-color: currentColor;
+    }
 
     &:checked {
+        color: ${theme.color.default.pink};
+        border-color: ${theme.color.default.pink};
+
         &::before {
+            transform: scale(1);
             width: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
             height: ${getMultipliedSize(theme.base.baseHeight, 1.6)};
             background-image: url('${SVGIconData}');
         }
     }
+
+    &:disabled {
+        cursor: not-allowed;
+        color: ${theme.color.text.gray};
+        background-color: ${theme.color.line.L02 + theme.color.transparency.T40};
+        border-color: ${theme.color.line.L01 + theme.color.transparency.T40};
+
+        & + label {
+            cursor: not-allowed;
+            color: ${theme.color.text.gray};
+        }
+    }
+
+    &:disabled:checked {
+        color: ${theme.color.background.pink.E02};
+        border-color: ${theme.color.background.pink.E02};
+        background-color: ${theme.color.background.white.default};
+
+        &::before {
+            background-color: ${theme.color.background.pink.E02};
+        }
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            0px 0px 0px 4px ${theme.color.focus.dark};
+    }
 `;
 const Mandatory = styled.span `
     color: ${theme.color.default.pink};
@@ -42,6 +102,7 @@ const ErrorMessage = styled.div `
 `;
 const Checkbox = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    const errorId = `${props.id}-error`;
     const handleChange = () => {
         if (props.onChange && !props.disabled) {
             props.onChange(!props.value);
@@ -49,11 +110,11 @@ const Checkbox = (_a) => {
     };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Container, null,
-            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), "aria-checked": Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId }),
+            React__default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined }),
             React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
                 props.required && React__default.createElement(Mandatory, null, "*"))),
-        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage))));
+        props.error && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error`, id: errorId, role: "alert" }, props.errorMessage))));
 };
 
 export { Checkbox as default };

package/build/es/components/EmptyState/EmptyState.d.ts

@@ -30,6 +30,10 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose of the EmptyState,
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Empty State */
 declare const EmptyState: ({ icon, iconSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/es/components/EmptyState/EmptyState.js

@@ -16,9 +16,9 @@ const ContentWrapper = styled.div `
 /** @visibleName Empty State */
 const EmptyState = (_a) => {
     var { icon = Info, iconSize = '2rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["icon", "iconSize", 'data-testid']);
-    return (React__default.createElement(Box, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId },
+    return (React__default.createElement(Box, { id: props.id, padding: "1.875rem", className: props.className, "data-testid": dataTestId, role: "region", ariaLabel: props.ariaLabel },
         React__default.createElement(ContentWrapper, null,
-            React__default.createElement(Icon, { icon: icon, size: iconSize, color: theme.color.default.pink }),
+            React__default.createElement(Icon, { icon: icon, size: iconSize, color: theme.color.default.pink, "aria-hidden": true }),
             React__default.createElement("div", null, props.children))));
 };
 

package/build/es/components/Expander/Expander.js

@@ -32,11 +32,17 @@ const Content = styled.div `
 `;
 const Expander = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
+    const handleCloseButtonClick = (e) => {
+        var _a, _b;
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        const toggleButton = (_b = e.currentTarget.parentElement) === null || _b === void 0 ? void 0 : _b.previousElementSibling;
+        toggleButton === null || toggleButton === void 0 ? void 0 : toggleButton.focus();
+    };
     return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(StyledButtonIcon, { icon: props.isExpanded ? ChevronUp : ChevronDown, onClick: props.onClick, isReversed: true }, props.buttonLabel),
+        React__default.createElement(StyledButtonIcon, { icon: props.isExpanded ? ChevronUp : ChevronDown, onClick: props.onClick, isReversed: true, ariaExpanded: props.isExpanded }, props.buttonLabel),
         props.isExpanded && (React__default.createElement(ContentWrapper, null,
             React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
-            props.closeButtonLabel && (React__default.createElement(StyledButtonIcon, { icon: Close, onClick: props.onClick, "data-testid": dataTestId && `${dataTestId}-close-button` }, props.closeButtonLabel))))));
+            props.closeButtonLabel && (React__default.createElement(StyledButtonIcon, { icon: Close, onClick: handleCloseButtonClick, "data-testid": dataTestId && `${dataTestId}-close-button` }, props.closeButtonLabel))))));
 };
 
 export { Expander as default };

package/build/es/components/Footer/Components/FooterComponents.js

@@ -12,6 +12,7 @@ const LinksListEl = styled.li `
     a {
         line-height: ${theme.lineHeight.default};
         color: ${theme.color.default.white};
+        text-decoration: none;
         &:hover,
         &:focus,
         &:active {
@@ -145,6 +146,7 @@ const GeneralInformationContainer = styled.div `
 `;
 const GeneralInformationLink = styled.a `
     &:after {
+        display: inline-block;
         content: '|';
         padding-left: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
     }

package/build/es/components/Footer/Footer.js

@@ -22,6 +22,7 @@ const TopContainer = styled.div `
             gap: ${getMultipliedSize(theme.base.baseHeight, 0.9)};
             font-weight: ${theme.fontWeight.bold};
             line-height: ${theme.lineHeight.default};
+            text-decoration: none;
 
             &:hover,
             &:focus,
@@ -60,6 +61,7 @@ const LangLinksContainer = styled.div `
 const LangLink = styled.a `
     background: ${({ isActive }) => isActive ? theme.color.background.white.default : 'transparent'};
     color: ${({ isActive }) => (isActive ? theme.color.text.plum : theme.color.text.white)};
+    text-decoration: none;
     &:hover,
     &:active,
     &:focus {
@@ -141,6 +143,7 @@ const FooterContainer = styled.footer `
 
     nav {
         a {
+            text-decoration: none;
             &:not(.active-site) {
                 background: transparent;
             }
@@ -161,6 +164,7 @@ const FooterContainer = styled.footer `
     }
 
     div > a {
+        text-decoration: none;
         &:not(${LangLink}) {
             color: ${theme.color.text.white};
             &:not(.service-button):hover,

package/build/es/components/Icon/Icon.d.ts

@@ -52,7 +52,15 @@ export interface Props extends Partial<IconProps> {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass aria label for accessibility purposes
+     */
+    'aria-label'?: string;
+    /**
+     * Allows to pass aria hidden for accessibility purposes
+     */
+    'aria-hidden'?: boolean;
 }
-declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Icon;

package/build/es/components/Icon/Icon.js

@@ -27,13 +27,13 @@ const IconContainer = styled.span `
     }
 `;
 const Icon = (_a) => {
-    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["name", "icon", "color", "size", 'data-testid']);
+    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = _a, props = __rest(_a, ["name", "icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     const RenderIcon = name && IconsList[name];
     return (React__default.createElement(React__default.Fragment, null,
         RenderIcon && (React__default.createElement(IconContainer, { position: props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
             React__default.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color })))),
-        IconParam && (React__default.createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId },
+        IconParam && (React__default.createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
             React__default.createElement(IconParam, { size: size, color: color })))));
 };
 

package/build/es/components/Input/Input.d.ts

@@ -129,6 +129,20 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * Screen reader label describing the purpose of the Input
+     *
+     * @default id
+     */
+    ariaLabel?: string;
+    /**
+     * Screen reader label describing the password toggle
+     */
+    passwordToggleLabel?: string;
+    /**
+     * Screen reader label describing the clear button
+     */
+    clearButtonLabel?: string;
     /**
      * Allows to pass testid string for testing purposes
      */

package/build/es/components/Input/Input.js

@@ -24,6 +24,7 @@ const FieldWrapper = styled.div `
     height: ${getMultipliedSize(theme.base.baseHeight, 4)};
     padding: 0 ${getMultipliedSize(theme.base.baseWidth, 1)};
     background-color: ${theme.color.background.white.default};
+    align-items: center;
 
     ${({ status }) => status === 'error' &&
     `
@@ -98,6 +99,11 @@ const StyledInput = styled.input `
         color: ${theme.color.text.black}${theme.color.transparency.T40};
     }
 `;
+const StyledButtonIcon = styled(ButtonIcon) `
+    .dnasg-icon svg {
+        fill: ${theme.color.text.black};
+    }
+`;
 const Message = styled.div `
     font-size: ${theme.fontSize.s};
     font-weight: ${theme.fontWeight.book};
@@ -110,6 +116,7 @@ const ErrorMessage = styled(Message) `
     color: ${theme.color.notification.error};
 `;
 const Input = (_a) => {
+    var _b;
     var { type = 'text', 'data-testid': dataTestId } = _a, props = __rest(_a, ["type", 'data-testid']);
     const inputRef = useRef(null);
     const [showPassword, setShowPassword] = useState(false);
@@ -139,22 +146,32 @@ const Input = (_a) => {
             inputRef.current.focus();
         }
     };
+    const getDescribedBy = () => {
+        if (props.status === 'error' && props.errorMessage) {
+            return `${props.id}-error`;
+        }
+        if (props.status === 'comment' && props.commentMessage) {
+            return `${props.id}-comment`;
+        }
+        return undefined;
+    };
     return (React__default.createElement(FieldContainer, { className: props.className },
         props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
         React__default.createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
-            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": props.id, ref: inputRef, tabIndex: props.tabIndex, "data-testid": dataTestId, readOnly: props.readonly }),
+            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: props.readonly ? 'hidden' : type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
+            props.readonly && React__default.createElement("div", null, props.value),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||
                 props.onClearableButtonClick) && (React__default.createElement(IconWrapper, null,
-                props.showPasswordToggle && (React__default.createElement(Icon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility })),
+                props.showPasswordToggle && (React__default.createElement(StyledButtonIcon, { icon: showPassword ? EyeOpen : EyeClosed, onClick: togglePasswordVisibility, ariaLabel: props.passwordToggleLabel, ariaHidden: true })),
                 (props.status === 'success' || props.status === 'error') && (React__default.createElement(Icon, { icon: iconsMap[props.status], color: theme.color.notification[props.status] })),
                 props.disabled && React__default.createElement(Icon, { icon: Lock }),
                 props.onClearableButtonClick &&
                     Boolean(props.value) &&
-                    !props.disabled && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick }))))),
-        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
-        props.status === 'comment' && props.commentMessage && (React__default.createElement(Message, { "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
+                    !props.disabled && (React__default.createElement(ButtonIcon, { icon: Close, onClick: props.onClearableButtonClick, ariaLabel: props.clearButtonLabel, ariaHidden: true }))))),
+        props.status === 'error' && props.errorMessage && (React__default.createElement(ErrorMessage, { id: `${props.id}-error`, "data-testid": dataTestId && `${dataTestId}-error` }, props.errorMessage)),
+        props.status === 'comment' && props.commentMessage && (React__default.createElement(Message, { id: `${props.id}-comment`, "data-testid": dataTestId && `${dataTestId}-comment` }, props.commentMessage))));
 };
 
 export { Input as default };

package/build/es/components/Label/Label.d.ts

@@ -1,7 +1,14 @@
 import type { ReactNode } from 'react';
 import React from 'react';
 type LabelType = 'campaign' | 'new' | 'presale' | 'other';
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 interface Props {
+    /**
+     * Enables the Label component to be rendered as a heading element
+     *
+     * @default 'span'
+     */
+    headingLevel?: HeadingLevel;
     /**
      * Allows to change the background color of component
      */

package/build/es/components/Label/Label.js

@@ -22,10 +22,12 @@ const StyledLabel = styled.span `
     text-align: center;
     text-transform: uppercase;
     border-radius: ${theme.radius.pill};
+    margin: 0;
 `;
 const Label = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(StyledLabel, { type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
+    const HeadingTag = props.headingLevel || 'span';
+    return (React__default.createElement(StyledLabel, { as: HeadingTag, type: props.type, className: props.className, "data-testid": dataTestId }, props.children));
 };
 
 export { Label as default };

package/build/es/components/MainHeaderNavigation/ChildComponents/BusinessMenu.js

@@ -11,6 +11,7 @@ const BusinessMenuLink = styled.a `
     font-size: ${theme.fontSize.xs};
     line-height: ${theme.lineHeight.s};
     border-radius: ${theme.radius.pill};
+    text-decoration: none;
     display: block;
     padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)};
     ${media.md `

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import React from 'react';
 import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
-interface MainNavTooltipMenuProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
+interface MainNavTooltipMenuProps<ContentProps extends object = object> extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
     /** Aria-label for screen readers in mobile */
     ariaLabel?: string;
     /** Tooltip menu content */
@@ -11,7 +11,7 @@ interface MainNavTooltipMenuProps extends Pick<MainHeaderNavigationProps, 'onCar
     /** Tooltip position from right. Default: 1.25rem */
     tooltipRight?: string;
     /** Mandatory Component provided as login content */
-    contentComponent?: ReactNode | boolean;
+    contentComponent?: ComponentType<ContentProps> | ReactNode | boolean;
     /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
     closeWhenTagClicked?: string[];
     /** Width of the opened menu content. default 20rem. */
@@ -47,6 +47,9 @@ export declare const IconContainer: import("styled-components").StyledComponent<
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };
@@ -189,5 +192,5 @@ export declare const IconContainer: import("styled-components").StyledComponent<
     isActive?: boolean;
     collapseSize: number;
 }, never>;
-declare const MainNavTooltipMenu: ({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps) => React.JSX.Element;
+declare const MainNavTooltipMenu: <ContentProps extends object = object>({ ariaLabel, children, closeWhenTagClicked, contentComponent, contentWidth, fullWidthBreakpoint, fullWidthDesktop, globalStateString, tooltipRight, zIndex, ...props }: MainNavTooltipMenuProps<ContentProps>) => React.JSX.Element;
 export default MainNavTooltipMenu;

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -22,6 +22,9 @@ declare const TooltipWrapper: import("styled-components").StyledComponent<"butto
             sky: string;
             orange: string;
         };
+        active: {
+            pink: string;
+        };
         hover: {
             pink: string;
         };