@transferwise/components 46.65.0 → 46.66.0

package/build/decision/Decision.js

@@ -32,6 +32,7 @@ const Decision = ({
   const screenSm = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
   if (type === exports.DecisionType.NAVIGATION) {
     const renderedOptions = options.map(({
+      'aria-label': ariaLabel,
       title,
       description,
       disabled,
@@ -44,6 +45,7 @@ const Decision = ({
     }, key) => /*#__PURE__*/jsxRuntime.jsx(NavigationOption
     // eslint-disable-next-line react/no-array-index-key
     , {
+      "aria-label": ariaLabel,
       complex: false,
       content: description,
       disabled: disabled,
@@ -66,6 +68,7 @@ const Decision = ({
           'np-decision--grid': isGrid
         }, breakpoint ? isGrid && 'flex-wrap' : 'flex-column'),
         children: breakpoint ? options.map(({
+          'aria-label': ariaLabel,
           description,
           disabled,
           href,
@@ -81,6 +84,7 @@ const Decision = ({
           className: clsx.clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {
             'np-decision__tile--fixed-width': isGrid
           }),
+          "aria-label": ariaLabel,
           description: description,
           disabled: disabled,
           href: href,

package/build/decision/Decision.js.map

@@ -1 +1 @@
-{"version":3,"file":"Decision.js","sources":["../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  media: {\n    block: React.ReactNode;\n    list: React.ReactNode;\n  };\n  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n  title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n  LIST = 'LIST',\n  LIST_BLOCK = 'LIST_BLOCK',\n  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n  NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n  /**  A list of elements to be rendered */\n  options: readonly DecisionOption[];\n  /**  Handles the display mode of the component */\n  presentation?: `${DecisionPresentation}`;\n  /** Size currently affects only Tile dimension */\n  size?: SizeSmall | SizeMedium;\n  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n  type?: `${DecisionType}`;\n\n  /** Display media in a circle in list presentation */\n  showMediaCircleInList?: boolean;\n\n  /** Sets navigation options to be aligned with the parent container */\n  isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n  options,\n  presentation = DecisionPresentation.LIST,\n  size = Size.MEDIUM,\n  type = DecisionType.NAVIGATION,\n  showMediaCircleInList = true,\n  isContainerAligned = false,\n}: DecisionProps) => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n\n  if (type === DecisionType.NAVIGATION) {\n    const renderedOptions = options.map(\n      ({ title, description, disabled, href, target, media: { list }, onClick }, key) => (\n        <NavigationOption\n          // eslint-disable-next-line react/no-array-index-key\n          key={`nav-${key}`}\n          complex={false}\n          content={description}\n          disabled={disabled}\n          href={href}\n          target={target}\n          media={list}\n          showMediaAtAllSizes\n          showMediaCircle={showMediaCircleInList}\n          isContainerAligned={isContainerAligned}\n          title={title}\n          onClick={onClick}\n        />\n      ),\n    );\n\n    if (\n      presentation === DecisionPresentation.LIST_BLOCK ||\n      presentation === DecisionPresentation.LIST_BLOCK_GRID\n    ) {\n      const isSmall = size === Size.SMALL;\n      const breakpoint = isSmall ? screenXs : screenSm;\n\n      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n      return (\n        <div\n          className={clsx(\n            'np-decision d-flex',\n            {\n              'np-decision--small': isSmall,\n              'np-decision--grid': isGrid,\n            },\n            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n          )}\n        >\n          {breakpoint\n            ? options.map(\n                (\n                  { description, disabled, href, target, media: { block }, onClick, title },\n                  key,\n                ) => (\n                  <Tile\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={`tile-${key}`}\n                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n                      'np-decision__tile--fixed-width': isGrid,\n                    })}\n                    description={description}\n                    disabled={disabled}\n                    href={href}\n                    target={target}\n                    media={block}\n                    size={isSmall ? Size.SMALL : Size.MEDIUM}\n                    title={title}\n                    onClick={onClick}\n                  />\n                ),\n              )\n            : renderedOptions}\n        </div>\n      );\n    }\n    // LIST\n    return <>{renderedOptions}</>;\n  }\n  return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Decision.js","sources":["../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n  'aria-label'?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  media: {\n    block: React.ReactNode;\n    list: React.ReactNode;\n  };\n  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n  title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n  LIST = 'LIST',\n  LIST_BLOCK = 'LIST_BLOCK',\n  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n  NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n  /**  A list of elements to be rendered */\n  options: readonly DecisionOption[];\n  /**  Handles the display mode of the component */\n  presentation?: `${DecisionPresentation}`;\n  /** Size currently affects only Tile dimension */\n  size?: SizeSmall | SizeMedium;\n  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n  type?: `${DecisionType}`;\n\n  /** Display media in a circle in list presentation */\n  showMediaCircleInList?: boolean;\n\n  /** Sets navigation options to be aligned with the parent container */\n  isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n  options,\n  presentation = DecisionPresentation.LIST,\n  size = Size.MEDIUM,\n  type = DecisionType.NAVIGATION,\n  showMediaCircleInList = true,\n  isContainerAligned = false,\n}: DecisionProps) => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n\n  if (type === DecisionType.NAVIGATION) {\n    const renderedOptions = options.map(\n      (\n        {\n          'aria-label': ariaLabel,\n          title,\n          description,\n          disabled,\n          href,\n          target,\n          media: { list },\n          onClick,\n        },\n        key,\n      ) => (\n        <NavigationOption\n          // eslint-disable-next-line react/no-array-index-key\n          key={`nav-${key}`}\n          aria-label={ariaLabel}\n          complex={false}\n          content={description}\n          disabled={disabled}\n          href={href}\n          target={target}\n          media={list}\n          showMediaAtAllSizes\n          showMediaCircle={showMediaCircleInList}\n          isContainerAligned={isContainerAligned}\n          title={title}\n          onClick={onClick}\n        />\n      ),\n    );\n\n    if (\n      presentation === DecisionPresentation.LIST_BLOCK ||\n      presentation === DecisionPresentation.LIST_BLOCK_GRID\n    ) {\n      const isSmall = size === Size.SMALL;\n      const breakpoint = isSmall ? screenXs : screenSm;\n\n      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n      return (\n        <div\n          className={clsx(\n            'np-decision d-flex',\n            {\n              'np-decision--small': isSmall,\n              'np-decision--grid': isGrid,\n            },\n            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n          )}\n        >\n          {breakpoint\n            ? options.map(\n                (\n                  {\n                    'aria-label': ariaLabel,\n                    description,\n                    disabled,\n                    href,\n                    target,\n                    media: { block },\n                    onClick,\n                    title,\n                  },\n                  key,\n                ) => (\n                  <Tile\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={`tile-${key}`}\n                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n                      'np-decision__tile--fixed-width': isGrid,\n                    })}\n                    aria-label={ariaLabel}\n                    description={description}\n                    disabled={disabled}\n                    href={href}\n                    target={target}\n                    media={block}\n                    size={isSmall ? Size.SMALL : Size.MEDIUM}\n                    title={title}\n                    onClick={onClick}\n                  />\n                ),\n              )\n            : renderedOptions}\n        </div>\n      );\n    }\n    // LIST\n    return <>{renderedOptions}</>;\n  }\n  return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","ariaLabel","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":"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"}

package/build/decision/Decision.mjs

@@ -28,6 +28,7 @@ const Decision = ({
   const screenSm = useScreenSize(Breakpoint.SMALL);
   if (type === DecisionType.NAVIGATION) {
     const renderedOptions = options.map(({
+      'aria-label': ariaLabel,
       title,
       description,
       disabled,
@@ -40,6 +41,7 @@ const Decision = ({
     }, key) => /*#__PURE__*/jsx(NavigationOption
     // eslint-disable-next-line react/no-array-index-key
     , {
+      "aria-label": ariaLabel,
       complex: false,
       content: description,
       disabled: disabled,
@@ -62,6 +64,7 @@ const Decision = ({
           'np-decision--grid': isGrid
         }, breakpoint ? isGrid && 'flex-wrap' : 'flex-column'),
         children: breakpoint ? options.map(({
+          'aria-label': ariaLabel,
           description,
           disabled,
           href,
@@ -77,6 +80,7 @@ const Decision = ({
           className: clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {
             'np-decision__tile--fixed-width': isGrid
           }),
+          "aria-label": ariaLabel,
           description: description,
           disabled: disabled,
           href: href,

package/build/decision/Decision.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Decision.mjs","sources":["../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  media: {\n    block: React.ReactNode;\n    list: React.ReactNode;\n  };\n  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n  title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n  LIST = 'LIST',\n  LIST_BLOCK = 'LIST_BLOCK',\n  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n  NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n  /**  A list of elements to be rendered */\n  options: readonly DecisionOption[];\n  /**  Handles the display mode of the component */\n  presentation?: `${DecisionPresentation}`;\n  /** Size currently affects only Tile dimension */\n  size?: SizeSmall | SizeMedium;\n  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n  type?: `${DecisionType}`;\n\n  /** Display media in a circle in list presentation */\n  showMediaCircleInList?: boolean;\n\n  /** Sets navigation options to be aligned with the parent container */\n  isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n  options,\n  presentation = DecisionPresentation.LIST,\n  size = Size.MEDIUM,\n  type = DecisionType.NAVIGATION,\n  showMediaCircleInList = true,\n  isContainerAligned = false,\n}: DecisionProps) => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n\n  if (type === DecisionType.NAVIGATION) {\n    const renderedOptions = options.map(\n      ({ title, description, disabled, href, target, media: { list }, onClick }, key) => (\n        <NavigationOption\n          // eslint-disable-next-line react/no-array-index-key\n          key={`nav-${key}`}\n          complex={false}\n          content={description}\n          disabled={disabled}\n          href={href}\n          target={target}\n          media={list}\n          showMediaAtAllSizes\n          showMediaCircle={showMediaCircleInList}\n          isContainerAligned={isContainerAligned}\n          title={title}\n          onClick={onClick}\n        />\n      ),\n    );\n\n    if (\n      presentation === DecisionPresentation.LIST_BLOCK ||\n      presentation === DecisionPresentation.LIST_BLOCK_GRID\n    ) {\n      const isSmall = size === Size.SMALL;\n      const breakpoint = isSmall ? screenXs : screenSm;\n\n      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n      return (\n        <div\n          className={clsx(\n            'np-decision d-flex',\n            {\n              'np-decision--small': isSmall,\n              'np-decision--grid': isGrid,\n            },\n            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n          )}\n        >\n          {breakpoint\n            ? options.map(\n                (\n                  { description, disabled, href, target, media: { block }, onClick, title },\n                  key,\n                ) => (\n                  <Tile\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={`tile-${key}`}\n                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n                      'np-decision__tile--fixed-width': isGrid,\n                    })}\n                    description={description}\n                    disabled={disabled}\n                    href={href}\n                    target={target}\n                    media={block}\n                    size={isSmall ? Size.SMALL : Size.MEDIUM}\n                    title={title}\n                    onClick={onClick}\n                  />\n                ),\n              )\n            : renderedOptions}\n        </div>\n      );\n    }\n    // LIST\n    return <>{renderedOptions}</>;\n  }\n  return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Decision.mjs","sources":["../../src/decision/Decision.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { Size, Breakpoint, SizeSmall, SizeMedium } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport NavigationOption from '../navigationOption';\nimport Tile from '../tile';\n\ninterface DecisionOption {\n  'aria-label'?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  media: {\n    block: React.ReactNode;\n    list: React.ReactNode;\n  };\n  onClick?: (event?: React.MouseEvent<HTMLElement>) => void;\n  title: React.ReactNode;\n}\n\nexport enum DecisionPresentation {\n  LIST = 'LIST',\n  LIST_BLOCK = 'LIST_BLOCK',\n  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',\n}\n\nexport enum DecisionType {\n  NAVIGATION = 'NAVIGATION',\n}\n\nexport interface DecisionProps {\n  /**  A list of elements to be rendered */\n  options: readonly DecisionOption[];\n  /**  Handles the display mode of the component */\n  presentation?: `${DecisionPresentation}`;\n  /** Size currently affects only Tile dimension */\n  size?: SizeSmall | SizeMedium;\n  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */\n  type?: `${DecisionType}`;\n\n  /** Display media in a circle in list presentation */\n  showMediaCircleInList?: boolean;\n\n  /** Sets navigation options to be aligned with the parent container */\n  isContainerAligned?: boolean;\n}\n\nconst Decision = ({\n  options,\n  presentation = DecisionPresentation.LIST,\n  size = Size.MEDIUM,\n  type = DecisionType.NAVIGATION,\n  showMediaCircleInList = true,\n  isContainerAligned = false,\n}: DecisionProps) => {\n  const screenXs = useScreenSize(Breakpoint.EXTRA_SMALL);\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n\n  if (type === DecisionType.NAVIGATION) {\n    const renderedOptions = options.map(\n      (\n        {\n          'aria-label': ariaLabel,\n          title,\n          description,\n          disabled,\n          href,\n          target,\n          media: { list },\n          onClick,\n        },\n        key,\n      ) => (\n        <NavigationOption\n          // eslint-disable-next-line react/no-array-index-key\n          key={`nav-${key}`}\n          aria-label={ariaLabel}\n          complex={false}\n          content={description}\n          disabled={disabled}\n          href={href}\n          target={target}\n          media={list}\n          showMediaAtAllSizes\n          showMediaCircle={showMediaCircleInList}\n          isContainerAligned={isContainerAligned}\n          title={title}\n          onClick={onClick}\n        />\n      ),\n    );\n\n    if (\n      presentation === DecisionPresentation.LIST_BLOCK ||\n      presentation === DecisionPresentation.LIST_BLOCK_GRID\n    ) {\n      const isSmall = size === Size.SMALL;\n      const breakpoint = isSmall ? screenXs : screenSm;\n\n      const isGrid = presentation === DecisionPresentation.LIST_BLOCK_GRID;\n\n      return (\n        <div\n          className={clsx(\n            'np-decision d-flex',\n            {\n              'np-decision--small': isSmall,\n              'np-decision--grid': isGrid,\n            },\n            breakpoint ? isGrid && 'flex-wrap' : 'flex-column',\n          )}\n        >\n          {breakpoint\n            ? options.map(\n                (\n                  {\n                    'aria-label': ariaLabel,\n                    description,\n                    disabled,\n                    href,\n                    target,\n                    media: { block },\n                    onClick,\n                    title,\n                  },\n                  key,\n                ) => (\n                  <Tile\n                    // eslint-disable-next-line react/no-array-index-key\n                    key={`tile-${key}`}\n                    className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {\n                      'np-decision__tile--fixed-width': isGrid,\n                    })}\n                    aria-label={ariaLabel}\n                    description={description}\n                    disabled={disabled}\n                    href={href}\n                    target={target}\n                    media={block}\n                    size={isSmall ? Size.SMALL : Size.MEDIUM}\n                    title={title}\n                    onClick={onClick}\n                  />\n                ),\n              )\n            : renderedOptions}\n        </div>\n      );\n    }\n    // LIST\n    return <>{renderedOptions}</>;\n  }\n  return null;\n};\n\nexport default Decision;\n"],"names":["DecisionPresentation","DecisionType","Decision","options","presentation","LIST","size","Size","MEDIUM","type","NAVIGATION","showMediaCircleInList","isContainerAligned","screenXs","useScreenSize","Breakpoint","EXTRA_SMALL","screenSm","SMALL","renderedOptions","map","ariaLabel","title","description","disabled","href","target","media","list","onClick","key","_jsx","NavigationOption","complex","content","showMediaAtAllSizes","showMediaCircle","LIST_BLOCK","LIST_BLOCK_GRID","isSmall","breakpoint","isGrid","className","clsx","children","block","Tile","_Fragment"],"mappings":"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"}

package/build/tile/Tile.js

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var typography = require('../common/propsValues/typography.js');
 
 function Tile({
+  'aria-label': ariaLabel,
   className,
   description,
   disabled,
@@ -26,6 +27,7 @@ function Tile({
     }, disabled && 'disabled'),
     href: href,
     target: target,
+    "aria-label": ariaLabel,
     onClick: disabled ? undefined : onClick,
     onKeyDown: disabled ? undefined : ({
       key

package/build/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","sources":["../../src/tile/Tile.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nexport interface TileProps {\n  /** Classes to apply to the Tile container */\n  className?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  /** Accepts only Avatar and images */\n  media: React.ReactNode;\n  /** Function called onClick or onKeyDown */\n  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The size applied to Tile */\n  size?: `${Size.SMALL | Size.MEDIUM}`;\n  title: React.ReactNode;\n}\n\nexport default function Tile({\n  className,\n  description,\n  disabled,\n  href,\n  target,\n  media,\n  onClick,\n  size = 'md',\n  title,\n}: TileProps) {\n  const isSmall = size === 'sm';\n  const Element = href ? 'a' : 'button';\n\n  return (\n    <Element\n      className={clsx(\n        'decision',\n        'flex-column',\n        'np-tile',\n        'text-no-decoration',\n        'text-xs-center',\n        className,\n        {\n          'p-a-3': !isSmall,\n          'p-a-2 np-tile--small': isSmall,\n        },\n        disabled && 'disabled',\n      )}\n      href={href}\n      target={target}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        disabled\n          ? undefined\n          : ({ key }) => {\n              if (key === 'Enter' || key === ' ') {\n                onClick?.();\n              }\n            }\n      }\n    >\n      <div className=\"np-tile__media d-flex justify-content-center\">{media}</div>\n      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>\n        {title}\n      </Title>\n      {description ? (\n        <Body as=\"span\" type={Typography.BODY_DEFAULT} className=\"m-t-1\">\n          {description}\n        </Body>\n      ) : null}\n    </Element>\n  );\n}\n"],"names":["Tile","className","description","disabled","href","target","media","onClick","size","title","isSmall","Element","_jsxs","clsx","undefined","onKeyDown","key","children","_jsx","Title","type","Typography","TITLE_SUBSECTION","Body","as","BODY_DEFAULT"],"mappings":";;;;;;;;AAsBc,SAAUA,IAAIA,CAAC;EAC3BC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,OAAO;AACPC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAAA;AACU,CAAA,EAAA;AACV,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,IAAI,CAAA;AAC7B,EAAA,MAAMG,OAAO,GAAGP,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;EAErC,oBACEQ,eAAA,CAACD,OAAO,EAAA;AACNV,IAAAA,SAAS,EAAEY,SAAI,CACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChBZ,SAAS,EACT;MACE,OAAO,EAAE,CAACS,OAAO;AACjB,MAAA,sBAAsB,EAAEA,OAAAA;AACzB,KAAA,EACDP,QAAQ,IAAI,UAAU,CACtB;AACFC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,OAAO,EAAEJ,QAAQ,GAAGW,SAAS,GAAGP,OAAQ;AACxCQ,IAAAA,SAAS,EACPZ,QAAQ,GACJW,SAAS,GACT,CAAC;AAAEE,MAAAA,GAAAA;AAAG,KAAE,KAAI;AACV,MAAA,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,EAAE;AAClCT,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;KAEP;AAAAU,IAAAA,QAAA,gBAEDC,cAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,8CAA8C;AAAAgB,MAAAA,QAAA,EAAEX,KAAAA;AAAK,KAAM,CAC1E,eAAAY,cAAA,CAACC,KAAK,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;MAACrB,SAAS,EAAEY,SAAI,CAACH,OAAO,GAAG,OAAO,GAAG,OAAO,CAAE;AAAAO,MAAAA,QAAA,EACpFR,KAAAA;AAAK,KACD,CACP,EAACP,WAAW,gBACVgB,cAAA,CAACK,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACJ,IAAI,EAAEC,qBAAU,CAACI,YAAa;AAACxB,MAAAA,SAAS,EAAC,OAAO;AAAAgB,MAAAA,QAAA,EAC7Df,WAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Tile.js","sources":["../../src/tile/Tile.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nexport interface TileProps {\n  /** Classes to apply to the Tile container */\n  /** A label for the accordion item, used for accessibility purposes. */\n  'aria-label'?: string;\n  className?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  /** Accepts only Avatar and images */\n  media: React.ReactNode;\n  /** Function called onClick or onKeyDown */\n  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The size applied to Tile */\n  size?: `${Size.SMALL | Size.MEDIUM}`;\n  title: React.ReactNode;\n}\n\nexport default function Tile({\n  'aria-label': ariaLabel,\n  className,\n  description,\n  disabled,\n  href,\n  target,\n  media,\n  onClick,\n  size = 'md',\n  title,\n}: TileProps) {\n  const isSmall = size === 'sm';\n  const Element = href ? 'a' : 'button';\n\n  return (\n    <Element\n      className={clsx(\n        'decision',\n        'flex-column',\n        'np-tile',\n        'text-no-decoration',\n        'text-xs-center',\n        className,\n        {\n          'p-a-3': !isSmall,\n          'p-a-2 np-tile--small': isSmall,\n        },\n        disabled && 'disabled',\n      )}\n      href={href}\n      target={target}\n      aria-label={ariaLabel}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        disabled\n          ? undefined\n          : ({ key }) => {\n              if (key === 'Enter' || key === ' ') {\n                onClick?.();\n              }\n            }\n      }\n    >\n      <div className=\"np-tile__media d-flex justify-content-center\">{media}</div>\n      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>\n        {title}\n      </Title>\n      {description ? (\n        <Body as=\"span\" type={Typography.BODY_DEFAULT} className=\"m-t-1\">\n          {description}\n        </Body>\n      ) : null}\n    </Element>\n  );\n}\n"],"names":["Tile","ariaLabel","className","description","disabled","href","target","media","onClick","size","title","isSmall","Element","_jsxs","clsx","undefined","onKeyDown","key","children","_jsx","Title","type","Typography","TITLE_SUBSECTION","Body","as","BODY_DEFAULT"],"mappings":";;;;;;;;AAwBwB,SAAAA,IAAIA,CAAC;AAC3B,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,OAAO;AACPC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAAA;AACU,CAAA,EAAA;AACV,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,IAAI,CAAA;AAC7B,EAAA,MAAMG,OAAO,GAAGP,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;EAErC,oBACEQ,eAAA,CAACD,OAAO,EAAA;AACNV,IAAAA,SAAS,EAAEY,SAAI,CACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChBZ,SAAS,EACT;MACE,OAAO,EAAE,CAACS,OAAO;AACjB,MAAA,sBAAsB,EAAEA,OAAAA;AACzB,KAAA,EACDP,QAAQ,IAAI,UAAU,CACtB;AACFC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACf,IAAA,YAAA,EAAYL,SAAU;AACtBO,IAAAA,OAAO,EAAEJ,QAAQ,GAAGW,SAAS,GAAGP,OAAQ;AACxCQ,IAAAA,SAAS,EACPZ,QAAQ,GACJW,SAAS,GACT,CAAC;AAAEE,MAAAA,GAAAA;AAAG,KAAE,KAAI;AACV,MAAA,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,EAAE;AAClCT,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;KAEP;AAAAU,IAAAA,QAAA,gBAEDC,cAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,8CAA8C;AAAAgB,MAAAA,QAAA,EAAEX,KAAAA;AAAK,KAAM,CAC1E,eAAAY,cAAA,CAACC,KAAK,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;MAACrB,SAAS,EAAEY,SAAI,CAACH,OAAO,GAAG,OAAO,GAAG,OAAO,CAAE;AAAAO,MAAAA,QAAA,EACpFR,KAAAA;AAAK,KACD,CACP,EAACP,WAAW,gBACVgB,cAAA,CAACK,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACJ,IAAI,EAAEC,qBAAU,CAACI,YAAa;AAACxB,MAAAA,SAAS,EAAC,OAAO;AAAAgB,MAAAA,QAAA,EAC7Df,WAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd;;;;"}

package/build/tile/Tile.mjs

@@ -5,6 +5,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../common/propsValues/typography.mjs';
 
 function Tile({
+  'aria-label': ariaLabel,
   className,
   description,
   disabled,
@@ -24,6 +25,7 @@ function Tile({
     }, disabled && 'disabled'),
     href: href,
     target: target,
+    "aria-label": ariaLabel,
     onClick: disabled ? undefined : onClick,
     onKeyDown: disabled ? undefined : ({
       key

package/build/tile/Tile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.mjs","sources":["../../src/tile/Tile.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nexport interface TileProps {\n  /** Classes to apply to the Tile container */\n  className?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  /** Accepts only Avatar and images */\n  media: React.ReactNode;\n  /** Function called onClick or onKeyDown */\n  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The size applied to Tile */\n  size?: `${Size.SMALL | Size.MEDIUM}`;\n  title: React.ReactNode;\n}\n\nexport default function Tile({\n  className,\n  description,\n  disabled,\n  href,\n  target,\n  media,\n  onClick,\n  size = 'md',\n  title,\n}: TileProps) {\n  const isSmall = size === 'sm';\n  const Element = href ? 'a' : 'button';\n\n  return (\n    <Element\n      className={clsx(\n        'decision',\n        'flex-column',\n        'np-tile',\n        'text-no-decoration',\n        'text-xs-center',\n        className,\n        {\n          'p-a-3': !isSmall,\n          'p-a-2 np-tile--small': isSmall,\n        },\n        disabled && 'disabled',\n      )}\n      href={href}\n      target={target}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        disabled\n          ? undefined\n          : ({ key }) => {\n              if (key === 'Enter' || key === ' ') {\n                onClick?.();\n              }\n            }\n      }\n    >\n      <div className=\"np-tile__media d-flex justify-content-center\">{media}</div>\n      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>\n        {title}\n      </Title>\n      {description ? (\n        <Body as=\"span\" type={Typography.BODY_DEFAULT} className=\"m-t-1\">\n          {description}\n        </Body>\n      ) : null}\n    </Element>\n  );\n}\n"],"names":["Tile","className","description","disabled","href","target","media","onClick","size","title","isSmall","Element","_jsxs","clsx","undefined","onKeyDown","key","children","_jsx","Title","type","Typography","TITLE_SUBSECTION","Body","as","BODY_DEFAULT"],"mappings":";;;;;;AAsBc,SAAUA,IAAIA,CAAC;EAC3BC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,OAAO;AACPC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAAA;AACU,CAAA,EAAA;AACV,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,IAAI,CAAA;AAC7B,EAAA,MAAMG,OAAO,GAAGP,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;EAErC,oBACEQ,IAAA,CAACD,OAAO,EAAA;AACNV,IAAAA,SAAS,EAAEY,IAAI,CACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChBZ,SAAS,EACT;MACE,OAAO,EAAE,CAACS,OAAO;AACjB,MAAA,sBAAsB,EAAEA,OAAAA;AACzB,KAAA,EACDP,QAAQ,IAAI,UAAU,CACtB;AACFC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,OAAO,EAAEJ,QAAQ,GAAGW,SAAS,GAAGP,OAAQ;AACxCQ,IAAAA,SAAS,EACPZ,QAAQ,GACJW,SAAS,GACT,CAAC;AAAEE,MAAAA,GAAAA;AAAG,KAAE,KAAI;AACV,MAAA,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,EAAE;AAClCT,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;KAEP;AAAAU,IAAAA,QAAA,gBAEDC,GAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,8CAA8C;AAAAgB,MAAAA,QAAA,EAAEX,KAAAA;AAAK,KAAM,CAC1E,eAAAY,GAAA,CAACC,KAAK,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,gBAAiB;MAACrB,SAAS,EAAEY,IAAI,CAACH,OAAO,GAAG,OAAO,GAAG,OAAO,CAAE;AAAAO,MAAAA,QAAA,EACpFR,KAAAA;AAAK,KACD,CACP,EAACP,WAAW,gBACVgB,GAAA,CAACK,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACJ,IAAI,EAAEC,UAAU,CAACI,YAAa;AAACxB,MAAAA,SAAS,EAAC,OAAO;AAAAgB,MAAAA,QAAA,EAC7Df,WAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"Tile.mjs","sources":["../../src/tile/Tile.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Size, Typography } from '../common';\nimport Title from '../title';\n\nexport interface TileProps {\n  /** Classes to apply to the Tile container */\n  /** A label for the accordion item, used for accessibility purposes. */\n  'aria-label'?: string;\n  className?: string;\n  description?: React.ReactNode;\n  disabled?: boolean;\n  href?: string;\n  target?: React.HTMLAttributeAnchorTarget;\n  /** Accepts only Avatar and images */\n  media: React.ReactNode;\n  /** Function called onClick or onKeyDown */\n  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** The size applied to Tile */\n  size?: `${Size.SMALL | Size.MEDIUM}`;\n  title: React.ReactNode;\n}\n\nexport default function Tile({\n  'aria-label': ariaLabel,\n  className,\n  description,\n  disabled,\n  href,\n  target,\n  media,\n  onClick,\n  size = 'md',\n  title,\n}: TileProps) {\n  const isSmall = size === 'sm';\n  const Element = href ? 'a' : 'button';\n\n  return (\n    <Element\n      className={clsx(\n        'decision',\n        'flex-column',\n        'np-tile',\n        'text-no-decoration',\n        'text-xs-center',\n        className,\n        {\n          'p-a-3': !isSmall,\n          'p-a-2 np-tile--small': isSmall,\n        },\n        disabled && 'disabled',\n      )}\n      href={href}\n      target={target}\n      aria-label={ariaLabel}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        disabled\n          ? undefined\n          : ({ key }) => {\n              if (key === 'Enter' || key === ' ') {\n                onClick?.();\n              }\n            }\n      }\n    >\n      <div className=\"np-tile__media d-flex justify-content-center\">{media}</div>\n      <Title type={Typography.TITLE_SUBSECTION} className={clsx(isSmall ? 'm-t-1' : 'm-t-2')}>\n        {title}\n      </Title>\n      {description ? (\n        <Body as=\"span\" type={Typography.BODY_DEFAULT} className=\"m-t-1\">\n          {description}\n        </Body>\n      ) : null}\n    </Element>\n  );\n}\n"],"names":["Tile","ariaLabel","className","description","disabled","href","target","media","onClick","size","title","isSmall","Element","_jsxs","clsx","undefined","onKeyDown","key","children","_jsx","Title","type","Typography","TITLE_SUBSECTION","Body","as","BODY_DEFAULT"],"mappings":";;;;;;AAwBwB,SAAAA,IAAIA,CAAC;AAC3B,EAAA,YAAY,EAAEC,SAAS;EACvBC,SAAS;EACTC,WAAW;EACXC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,OAAO;AACPC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,KAAAA;AACU,CAAA,EAAA;AACV,EAAA,MAAMC,OAAO,GAAGF,IAAI,KAAK,IAAI,CAAA;AAC7B,EAAA,MAAMG,OAAO,GAAGP,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAA;EAErC,oBACEQ,IAAA,CAACD,OAAO,EAAA;AACNV,IAAAA,SAAS,EAAEY,IAAI,CACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,gBAAgB,EAChBZ,SAAS,EACT;MACE,OAAO,EAAE,CAACS,OAAO;AACjB,MAAA,sBAAsB,EAAEA,OAAAA;AACzB,KAAA,EACDP,QAAQ,IAAI,UAAU,CACtB;AACFC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACf,IAAA,YAAA,EAAYL,SAAU;AACtBO,IAAAA,OAAO,EAAEJ,QAAQ,GAAGW,SAAS,GAAGP,OAAQ;AACxCQ,IAAAA,SAAS,EACPZ,QAAQ,GACJW,SAAS,GACT,CAAC;AAAEE,MAAAA,GAAAA;AAAG,KAAE,KAAI;AACV,MAAA,IAAIA,GAAG,KAAK,OAAO,IAAIA,GAAG,KAAK,GAAG,EAAE;AAClCT,QAAAA,OAAO,IAAI,CAAA;AACb,OAAA;KAEP;AAAAU,IAAAA,QAAA,gBAEDC,GAAA,CAAA,KAAA,EAAA;AAAKjB,MAAAA,SAAS,EAAC,8CAA8C;AAAAgB,MAAAA,QAAA,EAAEX,KAAAA;AAAK,KAAM,CAC1E,eAAAY,GAAA,CAACC,KAAK,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,gBAAiB;MAACrB,SAAS,EAAEY,IAAI,CAACH,OAAO,GAAG,OAAO,GAAG,OAAO,CAAE;AAAAO,MAAAA,QAAA,EACpFR,KAAAA;AAAK,KACD,CACP,EAACP,WAAW,gBACVgB,GAAA,CAACK,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACJ,IAAI,EAAEC,UAAU,CAACI,YAAa;AAACxB,MAAAA,SAAS,EAAC,OAAO;AAAAgB,MAAAA,QAAA,EAC7Df,WAAAA;KACG,CAAC,GACL,IAAI,CAAA;AAAA,GACD,CAAC,CAAA;AAEd;;;;"}

package/build/types/decision/Decision.d.ts

@@ -1,5 +1,6 @@
 import { SizeSmall, SizeMedium } from '../common';
 interface DecisionOption {
+    'aria-label'?: string;
     description?: React.ReactNode;
     disabled?: boolean;
     href?: string;

package/build/types/decision/Decision.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Decision.d.ts","sourceRoot":"","sources":["../../../src/decision/Decision.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKpE,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAED,oBAAY,YAAY;IACtB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,iDAAiD;IACjD,YAAY,CAAC,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACzC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,+HAA+H;IAC/H,IAAI,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAEzB,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,sFAOX,aAAa,uCA4Ef,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Decision.d.ts","sourceRoot":"","sources":["../../../src/decision/Decision.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKpE,UAAU,cAAc;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAED,oBAAY,YAAY;IACtB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,iDAAiD;IACjD,YAAY,CAAC,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACzC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,+HAA+H;IAC/H,IAAI,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAEzB,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,sFAOX,aAAa,uCAmGf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/types/tile/Tile.d.ts

@@ -1,6 +1,8 @@
 import { Size } from '../common';
 export interface TileProps {
     /** Classes to apply to the Tile container */
+    /** A label for the accordion item, used for accessibility purposes. */
+    'aria-label'?: string;
     className?: string;
     description?: React.ReactNode;
     disabled?: boolean;
@@ -14,5 +16,5 @@ export interface TileProps {
     size?: `${Size.SMALL | Size.MEDIUM}`;
     title: React.ReactNode;
 }
-export default function Tile({ className, description, disabled, href, target, media, onClick, size, title, }: TileProps): import("react").JSX.Element;
+export default function Tile({ 'aria-label': ariaLabel, className, description, disabled, href, target, media, onClick, size, title, }: TileProps): import("react").JSX.Element;
 //# sourceMappingURL=Tile.d.ts.map

package/build/types/tile/Tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/tile/Tile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAc,MAAM,WAAW,CAAC;AAG7C,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,qCAAqC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpF,+BAA+B;IAC/B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,SAAS,EACT,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAW,EACX,KAAK,GACN,EAAE,SAAS,+BA2CX"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../src/tile/Tile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAc,MAAM,WAAW,CAAC;AAG7C,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,qCAAqC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpF,+BAA+B;IAC/B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,IAAW,EACX,KAAK,GACN,EAAE,SAAS,+BA4CX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.65.0",
+  "version": "46.66.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,8 +93,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/neptune-css": "14.15.0"
+    "@transferwise/neptune-css": "14.15.0",
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/decision/Decision.spec.tsx

@@ -0,0 +1,166 @@
+import Avatar from '../avatar';
+import { Breakpoint, Size } from '../common';
+import { mockMatchMedia } from '../mocks';
+import { render, screen } from '../test-utils';
+
+import Decision, { DecisionPresentation, DecisionType } from '.';
+import { DecisionProps } from './Decision';
+
+mockMatchMedia(jest);
+
+describe('Decision', () => {
+  const commonProps: DecisionProps = {
+    options: [
+      {
+        media: {
+          list: <Avatar type="initials">HM</Avatar>,
+          block: <img src="img.jpg" alt="alt" />,
+        },
+        href: '#href',
+        title: 'title',
+        description: 'description',
+        'aria-label': 'A label',
+        onClick: jest.fn(),
+      },
+    ],
+    presentation: DecisionPresentation.LIST_BLOCK,
+    type: DecisionType.NAVIGATION,
+  };
+
+  const initialInnerWidth = window.innerWidth;
+  const resetClientWidth = (width: number) => {
+    window.innerWidth = width;
+  };
+
+  afterAll(() => {
+    window.innerWidth = initialInnerWidth;
+  });
+
+  beforeEach(() => {
+    resetClientWidth(Breakpoint.EXTRA_SMALL - 1);
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK}`, () => {
+    const props = { ...commonProps };
+
+    it('renders only Navigation Option before first breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders only Tile after first breakpoint', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementNotToBeSmallTile(element);
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
+
+    it('renders only Navigation Option before first breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders only Tile after first breakpoint', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementNotToBeSmallTile(element);
+    });
+
+    it('renders container as a grid', () => {
+      resetClientWidth(Breakpoint.SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label').parentElement;
+
+      expect(element).toHaveClass('np-decision');
+      expect(element).toHaveClass('np-decision--grid');
+      expect(element).toHaveClass('flex-wrap');
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
+    const props: DecisionProps = {
+      ...commonProps,
+      presentation: DecisionPresentation.LIST_BLOCK,
+      size: Size.SMALL,
+    };
+
+    it('renders only Navigation Option before breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+
+    it('renders Small Tile after breakpoint', () => {
+      resetClientWidth(Breakpoint.EXTRA_SMALL);
+
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementNotToBeNavigationOption(element);
+      expectElementToBeTile(element);
+      expectElementToBeSmallTile(element);
+    });
+  });
+
+  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
+    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
+
+    it('renders Navigation Option before breakpoint', () => {
+      render(<Decision {...props} />);
+      const element = screen.getByLabelText('A label');
+      expect(element).toBeInTheDocument();
+
+      expectElementToBeNavigationOption(element);
+      expectElementNotToBeTile(element);
+    });
+  });
+
+  const expectElementToBeNavigationOption = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-navigation-option');
+  };
+  const expectElementNotToBeNavigationOption = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-navigation-option');
+  };
+
+  const expectElementToBeTile = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-tile');
+  };
+  const expectElementNotToBeTile = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-tile');
+  };
+
+  const expectElementToBeSmallTile = (element: HTMLElement) => {
+    expect(element).toHaveClass('np-tile--small');
+  };
+  const expectElementNotToBeSmallTile = (element: HTMLElement) => {
+    expect(element).not.toHaveClass('np-tile--small');
+  };
+});

package/src/decision/Decision.story.tsx

@@ -24,63 +24,64 @@ export const Basic = () => {
   const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
-    <>
-      <Decision
-        options={[
-          {
-            description: 'Short text test.',
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: <Illustration name="globe" alt="" disablePadding />,
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+    <Decision
+      options={[
+        {
+          description: 'Short text test.',
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: <Illustration name="globe" alt="" disablePadding />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-            onClick: action('clicked'),
-            disabled,
-            href: '#href2',
-            media: {
-              block: <Illustration name="confetti" alt="" disablePadding />,
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click to see something',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
+          onClick: action('clicked'),
+          disabled,
+          href: '#href2',
+          media: {
+            block: <Illustration name="confetti" alt="" disablePadding />,
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description: "I'm disabled and don't require an onClick or href.",
-            media: {
-              block: <Illustration name="briefcase" alt="" disablePadding />,
-              list: (
-                <img
-                  src="https://wise.com/public-resources/assets/illustrations/business_account_web_small.svg"
-                  alt=""
-                  width="100"
-                />
-              ),
-            },
-            disabled: true,
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description: "I'm disabled and don't require an onClick or href.",
+          media: {
+            block: <Illustration name="briefcase" alt="" disablePadding />,
+            list: (
+              <img
+                src="https://wise.com/public-resources/assets/illustrations/business_account_web_small.svg"
+                alt=""
+                width="100"
+              />
+            ),
           },
-        ]}
-        presentation={presentation}
-        type={DecisionType.NAVIGATION}
-        showMediaCircleInList={showMediaCircleInList}
-        isContainerAligned={isContainerAligned}
-        size={size}
-      />
-    </>
+          'aria-label': 'This option is disabled.',
+          disabled: true,
+          title: 'Hank Miller',
+        },
+      ]}
+      presentation={presentation}
+      type={DecisionType.NAVIGATION}
+      showMediaCircleInList={showMediaCircleInList}
+      isContainerAligned={isContainerAligned}
+      size={size}
+    />
   );
 };
 
@@ -94,160 +95,165 @@ export const grid = () => {
   const size = select('size', [Size.MEDIUM, Size.SMALL], Size.MEDIUM);
 
   return (
-    <>
-      <Decision
-        options={[
-          {
-            description: 'Short text test.',
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+    <Decision
+      options={[
+        {
+          description: 'Short text test.',
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-            onClick: action('clicked'),
-            disabled,
-            href: '#href2',
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click to see something',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
+          onClick: action('clicked'),
+          disabled,
+          href: '#href2',
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href3',
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            disabled,
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Han Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href3',
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          disabled,
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-          {
-            description:
-              "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
-            onClick: action('clicked'),
-            href: '#href1',
-            disabled,
-            media: {
-              block: (
-                <img
-                  src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
-                  alt=""
-                />
-              ),
-              list: (
-                <Avatar size="md" type="initials">
-                  HM
-                </Avatar>
-              ),
-            },
-            title: 'Hank Miller',
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+        {
+          description:
+            "Click here to send money to Hank Miller. Money will be sent directly to Hank Miller's multi-currency account.",
+          onClick: action('clicked'),
+          href: '#href1',
+          disabled,
+          media: {
+            block: (
+              <img
+                src="https://wise.com/public-resources/assets/bank-details/bank-details-flow/finish.svg"
+                alt=""
+              />
+            ),
+            list: (
+              <Avatar size="md" type="initials">
+                HM
+              </Avatar>
+            ),
           },
-        ]}
-        presentation={presentation}
-        type={DecisionType.NAVIGATION}
-        size={size}
-      />
-    </>
+          'aria-label': 'Click here to send money to Hank Miller.',
+          title: 'Hank Miller',
+        },
+      ]}
+      presentation={presentation}
+      type={DecisionType.NAVIGATION}
+      size={size}
+    />
   );
 };

package/src/decision/Decision.tsx

@@ -6,6 +6,7 @@ import NavigationOption from '../navigationOption';
 import Tile from '../tile';
 
 interface DecisionOption {
+  'aria-label'?: string;
   description?: React.ReactNode;
   disabled?: boolean;
   href?: string;
@@ -58,10 +59,23 @@ const Decision = ({
 
   if (type === DecisionType.NAVIGATION) {
     const renderedOptions = options.map(
-      ({ title, description, disabled, href, target, media: { list }, onClick }, key) => (
+      (
+        {
+          'aria-label': ariaLabel,
+          title,
+          description,
+          disabled,
+          href,
+          target,
+          media: { list },
+          onClick,
+        },
+        key,
+      ) => (
         <NavigationOption
           // eslint-disable-next-line react/no-array-index-key
           key={`nav-${key}`}
+          aria-label={ariaLabel}
           complex={false}
           content={description}
           disabled={disabled}
@@ -100,7 +114,16 @@ const Decision = ({
           {breakpoint
             ? options.map(
                 (
-                  { description, disabled, href, target, media: { block }, onClick, title },
+                  {
+                    'aria-label': ariaLabel,
+                    description,
+                    disabled,
+                    href,
+                    target,
+                    media: { block },
+                    onClick,
+                    title,
+                  },
                   key,
                 ) => (
                   <Tile
@@ -109,6 +132,7 @@ const Decision = ({
                     className={clsx(`np-decision__tile${isSmall ? '--small' : ''}`, {
                       'np-decision__tile--fixed-width': isGrid,
                     })}
+                    aria-label={ariaLabel}
                     description={description}
                     disabled={disabled}
                     href={href}

package/src/tile/Tile.tsx

@@ -6,6 +6,8 @@ import Title from '../title';
 
 export interface TileProps {
   /** Classes to apply to the Tile container */
+  /** A label for the accordion item, used for accessibility purposes. */
+  'aria-label'?: string;
   className?: string;
   description?: React.ReactNode;
   disabled?: boolean;
@@ -21,6 +23,7 @@ export interface TileProps {
 }
 
 export default function Tile({
+  'aria-label': ariaLabel,
   className,
   description,
   disabled,
@@ -51,6 +54,7 @@ export default function Tile({
       )}
       href={href}
       target={target}
+      aria-label={ariaLabel}
       onClick={disabled ? undefined : onClick}
       onKeyDown={
         disabled

package/src/decision/Decision.spec.js

@@ -1,127 +0,0 @@
-import Avatar from '../avatar';
-import { Breakpoint, Size } from '../common';
-import { mockMatchMedia } from '../mocks';
-import { render, fireEvent, screen } from '../test-utils';
-
-import Decision, { DecisionPresentation, DecisionType } from '.';
-
-mockMatchMedia(jest);
-
-describe('Decision', () => {
-  const commonProps = {
-    options: [
-      {
-        media: {
-          list: <Avatar type="initials">HM</Avatar>,
-          block: <img src="img.jpg" alt="alt" />,
-        },
-        href: '#href',
-        title: 'title',
-        description: 'description',
-        onClick: jest.fn(),
-      },
-    ],
-    presentation: DecisionPresentation.LIST_BLOCK,
-    type: DecisionType.NAVIGATION,
-  };
-
-  const initialInnerWidth = window.innerWidth;
-  const resetClientWidth = (width) => {
-    window.innerWidth = width;
-  };
-
-  afterAll(() => {
-    window.innerWidth = initialInnerWidth;
-  });
-
-  beforeEach(() => {
-    resetClientWidth(Breakpoint.EXTRA_SMALL - 1);
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK}`, () => {
-    const props = { ...commonProps };
-
-    it('renders only Navigation Option before first breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders only Tile after first breakpoint', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toHaveClass('np-tile--small');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK_GRID}`, () => {
-    const props = { ...commonProps, presentation: DecisionPresentation.LIST_BLOCK_GRID };
-
-    it('renders only Navigation Option before first breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders only Tile after first breakpoint', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toHaveClass('np-tile--small');
-    });
-
-    it('renders container as a grid', () => {
-      resetClientWidth(Breakpoint.SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      const decisionElement = container.querySelector('.np-decision');
-      expect(decisionElement).toHaveClass('np-decision--grid');
-      expect(decisionElement).toHaveClass('flex-wrap');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST_BLOCK} and size is Small`, () => {
-    const props = {
-      ...commonProps,
-      presentation: DecisionPresentation.LIST_BLOCK,
-      size: Size.SMALL,
-    };
-
-    it('renders only Navigation Option before breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-
-    it('renders Small Tile after breakpoint', () => {
-      resetClientWidth(Breakpoint.EXTRA_SMALL);
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).not.toBeInTheDocument();
-      expect(getTile(container)).toBeInTheDocument();
-      expect(getTile(container)).toHaveClass('np-tile--small');
-    });
-  });
-
-  describe(`when presentation is ${DecisionPresentation.LIST}`, () => {
-    const props = { ...commonProps, presentation: DecisionPresentation.LIST };
-
-    it('renders Navigation Option before breakpoint', () => {
-      const { container } = render(<Decision {...props} />);
-
-      expect(getNavigationOption(container)).toBeInTheDocument();
-      expect(getTile(container)).not.toBeInTheDocument();
-    });
-  });
-
-  const getNavigationOption = (container) => container.querySelector('.np-navigation-option');
-  const getTile = (container) => container.querySelector('.np-tile');
-});