@coorpacademy/components 11.4.5-alpha.35 → 11.4.5-alpha.37

package/es/molecule/answer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AA4EA,iDASC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AAkFA,iDASC"}

package/es/molecule/answer/index.js

@@ -74,28 +74,38 @@ const Switch = ({
   switch (type) {
     case 'qcmDrag':
       return /*#__PURE__*/React.createElement(QcmDrag, _extends({}, model, {
-        help: help
+        help: help,
+        groupAriaLabel: translate('answer_the_question')
       }));
 
     case 'qcm':
-      return /*#__PURE__*/React.createElement(Qcm, model);
+      return /*#__PURE__*/React.createElement(Qcm, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'qcmGraphic':
-      return /*#__PURE__*/React.createElement(QcmGraphic, model);
+      return /*#__PURE__*/React.createElement(QcmGraphic, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'freeText':
       return /*#__PURE__*/React.createElement(FreeText, model);
 
     case 'dropDown':
       return /*#__PURE__*/React.createElement(DropDown, _extends({}, model, {
-        "aria-label": translate('drop_down_icon')
+        "aria-label": translate('drop_down_icon'),
+        groupAriaLabel: translate('answer_the_question')
       }));
 
     case 'slider':
-      return /*#__PURE__*/React.createElement(QuestionRange, model);
+      return /*#__PURE__*/React.createElement(QuestionRange, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'template':
-      return /*#__PURE__*/React.createElement(Template, model);
+      return /*#__PURE__*/React.createElement(Template, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
   }
 };
 

package/es/molecule/answer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","VideoPlayer","DropDown","FreeText","QcmDrag","Qcm","QcmGraphic","QuestionRange","Template","Provider","Audio","style","propTypes","MediaViewPropTypes","TYPE_AUDIO","TYPE_IMAGE","TYPE_VIDEO","MediaView","media","videoId","type","childProps","backgroundImage","url","video","audio","Switch","model","help","translate","contextTypes","childContextTypes","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Provider from '../../atom/provider';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}, {translate}) => {\n  const {type} = model;\n\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} />;\n    case 'qcm':\n      return <Qcm {...model} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} aria-label={translate('drop_down_icon')} />;\n    case 'slider':\n      return <QuestionRange {...model} />;\n    case 'template':\n      return <Template {...model} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nSwitch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <Switch model={model} help={help} />\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","VideoPlayer","DropDown","FreeText","QcmDrag","Qcm","QcmGraphic","QuestionRange","Template","Provider","Audio","style","propTypes","MediaViewPropTypes","TYPE_AUDIO","TYPE_IMAGE","TYPE_VIDEO","MediaView","media","videoId","type","childProps","backgroundImage","url","video","audio","Switch","model","help","translate","contextTypes","childContextTypes","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Provider from '../../atom/provider';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}, {translate}) => {\n  const {type} = model;\n\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcm':\n      return <Qcm {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return (\n        <DropDown\n          {...model}\n          aria-label={translate('drop_down_icon')}\n          groupAriaLabel={translate('answer_the_question')}\n        />\n      );\n    case 'slider':\n      return <QuestionRange {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'template':\n      return <Template {...model} groupAriaLabel={translate('answer_the_question')} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nSwitch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <Switch model={model} help={help} />\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"mappings":"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"}

package/es/molecule/filters/filters-wrapper.d.ts

@@ -7,6 +7,7 @@ declare namespace FiltersWapper {
             type: PropTypes.Validator<string>;
             fieldName: PropTypes.Validator<string>;
         }> | null | undefined)[]>;
+        const filterGroupAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/es/molecule/filters/filters-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters-wrapper.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/filters-wrapper.js"],"names":[],"mappings":";AAUA,sEAuDC"}
+{"version":3,"file":"filters-wrapper.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/filters-wrapper.js"],"names":[],"mappings":";AAUA,sEA6DC"}

package/es/molecule/filters/filters-wrapper.js

@@ -15,7 +15,8 @@ import style from './filters-wapper.css';
 const FiltersWapper = (props, context) => {
   const {
     filters,
-    className
+    className,
+    filterGroupAriaLabel
   } = props;
 
   const buildFilter = (filter, idx) => {
@@ -80,9 +81,11 @@ const FiltersWapper = (props, context) => {
 
   const emptyFilters = _isEmpty(filters);
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classnames(className, emptyFilters ? style.wrapperNone : style.wrapper)
-  }, filtersList);
+  return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
+    className: classnames(className, emptyFilters ? style.wrapperNone : style.wrapper),
+    role: "group",
+    "aria-label": filterGroupAriaLabel
+  }, filtersList));
 };
 
 FiltersWapper.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -90,7 +93,8 @@ FiltersWapper.propTypes = process.env.NODE_ENV !== "production" ? {
   filters: PropTypes.arrayOf(PropTypes.shape({
     type: PropTypes.oneOf(['select', 'range', 'radio', 'switch']).isRequired,
     fieldName: PropTypes.string.isRequired
-  }))
+  })),
+  filterGroupAriaLabel: PropTypes.string
 } : {};
 export default FiltersWapper;
 //# sourceMappingURL=filters-wrapper.js.map

package/es/molecule/filters/filters-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters-wrapper.js","names":["React","PropTypes","classnames","Select","InputSwitch","RadioGroup","RangeSlider","style","FiltersWapper","props","context","filters","className","buildFilter","filter","idx","type","fieldName","choice","title","radioGroup","timerWrapper","timerSubtitle","subtitle","toggle","display","filtersList","convert","cap","emptyFilters","wrapperNone","wrapper","propTypes","string","arrayOf","shape","oneOf","isRequired"],"sources":["../../../src/molecule/filters/filters-wrapper.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport RadioGroup from '../../atom/radio-group';\nimport RangeSlider from '../../atom/range';\nimport style from './filters-wapper.css';\n\nconst FiltersWapper = (props, context) => {\n  const {filters, className} = props;\n\n  const buildFilter = (filter, idx) => {\n    const {type, fieldName} = filter;\n    switch (type) {\n      case 'select':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <Select {...filter} />\n          </div>\n        );\n      case 'radio':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <p className={style.title}>{filter.title}</p>\n            <RadioGroup {...filter} className={style.radioGroup} />\n          </div>\n        );\n      case 'range':\n        return (\n          <div\n            data-name=\"choice\"\n            data-filter-type={fieldName}\n            className={style.timerWrapper}\n            key={idx}\n          >\n            <label>\n              <span className={style.title}>{filter.title}</span>\n              <p className={style.timerSubtitle}>{filter.subtitle}</p>\n              <RangeSlider {...filter} />\n            </label>\n          </div>\n        );\n      case 'switch':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <p className={style.title}>{filter.title}</p>\n            <div className={style.toggle}>\n              <InputSwitch {...filter.display} />\n            </div>\n          </div>\n        );\n      default:\n        return null;\n    }\n  };\n\n  const filtersList = map.convert({cap: false})(buildFilter, filters);\n  const emptyFilters = isEmpty(filters);\n  return (\n    <div className={classnames(className, emptyFilters ? style.wrapperNone : style.wrapper)}>\n      {filtersList}\n    </div>\n  );\n};\n\nFiltersWapper.propTypes = {\n  className: PropTypes.string,\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      type: PropTypes.oneOf(['select', 'range', 'radio', 'switch']).isRequired,\n      fieldName: PropTypes.string.isRequired\n    })\n  )\n};\nexport default FiltersWapper;\n"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,WAAP,MAAwB,yBAAxB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,WAAP,MAAwB,kBAAxB;AACA,OAAOC,KAAP,MAAkB,sBAAlB;;AAEA,MAAMC,aAAa,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACxC,MAAM;IAACC,OAAD;IAAUC;EAAV,IAAuBH,KAA7B;;EAEA,MAAMI,WAAW,GAAG,CAACC,MAAD,EAASC,GAAT,KAAiB;IACnC,MAAM;MAACC,IAAD;MAAOC;IAAP,IAAoBH,MAA1B;;IACA,QAAQE,IAAR;MACE,KAAK,QAAL;QACE,oBACE;UAAK,aAAU,QAAf;UAAwB,oBAAkBC,SAA1C;UAAqD,SAAS,EAAEV,KAAK,CAACW,MAAtE;UAA8E,GAAG,EAAEH;QAAnF,gBACE,oBAAC,MAAD,EAAYD,MAAZ,CADF,CADF;;MAKF,KAAK,OAAL;QACE,oBACE;UAAK,aAAU,QAAf;UAAwB,oBAAkBG,SAA1C;UAAqD,SAAS,EAAEV,KAAK,CAACW,MAAtE;UAA8E,GAAG,EAAEH;QAAnF,gBACE;UAAG,SAAS,EAAER,KAAK,CAACY;QAApB,GAA4BL,MAAM,CAACK,KAAnC,CADF,eAEE,oBAAC,UAAD,eAAgBL,MAAhB;UAAwB,SAAS,EAAEP,KAAK,CAACa;QAAzC,GAFF,CADF;;MAMF,KAAK,OAAL;QACE,oBACE;UACE,aAAU,QADZ;UAEE,oBAAkBH,SAFpB;UAGE,SAAS,EAAEV,KAAK,CAACc,YAHnB;UAIE,GAAG,EAAEN;QAJP,gBAME,gDACE;UAAM,SAAS,EAAER,KAAK,CAACY;QAAvB,GAA+BL,MAAM,CAACK,KAAtC,CADF,eAEE;UAAG,SAAS,EAAEZ,KAAK,CAACe;QAApB,GAAoCR,MAAM,CAACS,QAA3C,CAFF,eAGE,oBAAC,WAAD,EAAiBT,MAAjB,CAHF,CANF,CADF;;MAcF,KAAK,QAAL;QACE,oBACE;UAAK,aAAU,QAAf;UAAwB,oBAAkBG,SAA1C;UAAqD,SAAS,EAAEV,KAAK,CAACW,MAAtE;UAA8E,GAAG,EAAEH;QAAnF,gBACE;UAAG,SAAS,EAAER,KAAK,CAACY;QAApB,GAA4BL,MAAM,CAACK,KAAnC,CADF,eAEE;UAAK,SAAS,EAAEZ,KAAK,CAACiB;QAAtB,gBACE,oBAAC,WAAD,EAAiBV,MAAM,CAACW,OAAxB,CADF,CAFF,CADF;;MAQF;QACE,OAAO,IAAP;IAvCJ;EAyCD,CA3CD;;EA6CA,MAAMC,WAAW,GAAG,KAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EAA0Bf,WAA1B,EAAuCF,OAAvC,CAApB;;EACA,MAAMkB,YAAY,GAAG,SAAQlB,OAAR,CAArB;;EACA,oBACE;IAAK,SAAS,EAAET,UAAU,CAACU,SAAD,EAAYiB,YAAY,GAAGtB,KAAK,CAACuB,WAAT,GAAuBvB,KAAK,CAACwB,OAArD;EAA1B,GACGL,WADH,CADF;AAKD,CAvDD;;AAyDAlB,aAAa,CAACwB,SAAd,2CAA0B;EACxBpB,SAAS,EAAEX,SAAS,CAACgC,MADG;EAExBtB,OAAO,EAAEV,SAAS,CAACiC,OAAV,CACPjC,SAAS,CAACkC,KAAV,CAAgB;IACdnB,IAAI,EAAEf,SAAS,CAACmC,KAAV,CAAgB,CAAC,QAAD,EAAW,OAAX,EAAoB,OAApB,EAA6B,QAA7B,CAAhB,EAAwDC,UADhD;IAEdpB,SAAS,EAAEhB,SAAS,CAACgC,MAAV,CAAiBI;EAFd,CAAhB,CADO;AAFe,CAA1B;AASA,eAAe7B,aAAf"}
+{"version":3,"file":"filters-wrapper.js","names":["React","PropTypes","classnames","Select","InputSwitch","RadioGroup","RangeSlider","style","FiltersWapper","props","context","filters","className","filterGroupAriaLabel","buildFilter","filter","idx","type","fieldName","choice","title","radioGroup","timerWrapper","timerSubtitle","subtitle","toggle","display","filtersList","convert","cap","emptyFilters","wrapperNone","wrapper","propTypes","string","arrayOf","shape","oneOf","isRequired"],"sources":["../../../src/molecule/filters/filters-wrapper.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, map} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Select from '../../atom/select';\nimport InputSwitch from '../../atom/input-switch';\nimport RadioGroup from '../../atom/radio-group';\nimport RangeSlider from '../../atom/range';\nimport style from './filters-wapper.css';\n\nconst FiltersWapper = (props, context) => {\n  const {filters, className, filterGroupAriaLabel} = props;\n\n  const buildFilter = (filter, idx) => {\n    const {type, fieldName} = filter;\n    switch (type) {\n      case 'select':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <Select {...filter} />\n          </div>\n        );\n      case 'radio':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <p className={style.title}>{filter.title}</p>\n            <RadioGroup {...filter} className={style.radioGroup} />\n          </div>\n        );\n      case 'range':\n        return (\n          <div\n            data-name=\"choice\"\n            data-filter-type={fieldName}\n            className={style.timerWrapper}\n            key={idx}\n          >\n            <label>\n              <span className={style.title}>{filter.title}</span>\n              <p className={style.timerSubtitle}>{filter.subtitle}</p>\n              <RangeSlider {...filter} />\n            </label>\n          </div>\n        );\n      case 'switch':\n        return (\n          <div data-name=\"choice\" data-filter-type={fieldName} className={style.choice} key={idx}>\n            <p className={style.title}>{filter.title}</p>\n            <div className={style.toggle}>\n              <InputSwitch {...filter.display} />\n            </div>\n          </div>\n        );\n      default:\n        return null;\n    }\n  };\n\n  const filtersList = map.convert({cap: false})(buildFilter, filters);\n  const emptyFilters = isEmpty(filters);\n  return (\n    <form>\n      <div\n        className={classnames(className, emptyFilters ? style.wrapperNone : style.wrapper)}\n        role=\"group\"\n        aria-label={filterGroupAriaLabel}\n      >\n        {filtersList}\n      </div>\n    </form>\n  );\n};\n\nFiltersWapper.propTypes = {\n  className: PropTypes.string,\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      type: PropTypes.oneOf(['select', 'range', 'radio', 'switch']).isRequired,\n      fieldName: PropTypes.string.isRequired\n    })\n  ),\n  filterGroupAriaLabel: PropTypes.string\n};\nexport default FiltersWapper;\n"],"mappings":"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"}

package/es/molecule/filters/index.d.ts

@@ -37,6 +37,7 @@ declare class Filters extends React.Component<any, any, any> {
         onToggleSorts: PropTypes.Requireable<(...args: any[]) => any>;
         moreSortAriaLabel: PropTypes.Requireable<string>;
         moreFilterAriaLabel: PropTypes.Requireable<string>;
+        filterGroupAriaLabel: PropTypes.Requireable<string>;
     };
     static contextTypes: {
         skin: PropTypes.Requireable<PropTypes.InferProps<{

package/es/molecule/filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBAsFC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAeE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBA2FC;CACF"}

package/es/molecule/filters/index.js

@@ -72,7 +72,8 @@ class Filters extends React.Component {
       sortTabLabel,
       filters,
       moreFilterAriaLabel,
-      moreSortAriaLabel
+      moreSortAriaLabel,
+      filterGroupAriaLabel
     } = this.props;
     const {
       filter,
@@ -128,7 +129,8 @@ class Filters extends React.Component {
       className: filtersActive ? style.activeWrapperFilters : style.wrapperFilters
     }, /*#__PURE__*/React.createElement(FiltersWrapper, {
       className: style.wrapper,
-      filters: filters
+      filters: filters,
+      filterGroupAriaLabel: filterGroupAriaLabel
     }), /*#__PURE__*/React.createElement("div", {
       "data-name": "cta",
       className: style.CTAfilter,
@@ -167,7 +169,8 @@ Filters.propTypes = process.env.NODE_ENV !== "production" ? {
   onToggleFilters: PropTypes.func,
   onToggleSorts: PropTypes.func,
   moreSortAriaLabel: PropTypes.string,
-  moreFilterAriaLabel: PropTypes.string
+  moreFilterAriaLabel: PropTypes.string,
+  filterGroupAriaLabel: PropTypes.string
 } : {};
 export default Filters;
 //# sourceMappingURL=index.js.map

package/es/molecule/filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","NovaCompositionNavigationArrowDown","ArrowDown","Select","Provider","style","FiltersWrapper","Filters","Component","constructor","props","state","filter","openFilters","sorted","openSorts","handleOpenFilter","bind","handleOpenSort","handleSearch","onToggleFilters","newValue","setState","onToggleSorts","onSearch","render","sorting","filterCTALabel","filterTabLabel","sortCTALabel","sortTabLabel","filters","moreFilterAriaLabel","moreSortAriaLabel","skin","context","defaultColor","darkColor","filtersActive","sortingActive","sortView","undefined","select","search","activeDefault","default","title","arrow","activeWrapperSortBy","wrapperSortBy","activeWrapperFilters","wrapperFilters","wrapper","CTAfilter","backgroundColor","activeSorting","contextTypes","childContextTypes","propTypes","string","bool","shape","func"],"sources":["../../../src/molecule/filters/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Select from '../../atom/select';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\nimport FiltersWrapper from './filters-wrapper';\n\nclass Filters extends React.Component {\n  static propTypes = {\n    filterCTALabel: PropTypes.string,\n    filterTabLabel: PropTypes.string,\n    sortCTALabel: PropTypes.string,\n    sortTabLabel: PropTypes.string,\n    openFilters: PropTypes.bool,\n    openSorts: PropTypes.bool,\n    filters: FiltersWrapper.propTypes.filters,\n    sorting: PropTypes.shape(Select.propTypes),\n    onSearch: PropTypes.func,\n    onToggleFilters: PropTypes.func,\n    onToggleSorts: PropTypes.func,\n    moreSortAriaLabel: PropTypes.string,\n    moreFilterAriaLabel: PropTypes.string\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      filter: !!props.openFilters,\n      sorted: !!props.openSorts\n    };\n    this.handleOpenFilter = this.handleOpenFilter.bind(this);\n    this.handleOpenSort = this.handleOpenSort.bind(this);\n    this.handleSearch = this.handleSearch.bind(this);\n  }\n\n  handleOpenFilter() {\n    const {filter} = this.state;\n    const {onToggleFilters} = this.props;\n\n    const newValue = !filter;\n\n    this.setState({\n      filter: newValue,\n      sorted: false\n    });\n\n    if (onToggleFilters) {\n      onToggleFilters(newValue);\n    }\n  }\n\n  handleOpenSort() {\n    const {sorted} = this.state;\n    const {onToggleSorts} = this.props;\n\n    const newValue = !sorted;\n\n    this.setState({\n      sorted: newValue,\n      filter: false\n    });\n\n    if (onToggleSorts) onToggleSorts(newValue);\n  }\n\n  handleSearch() {\n    const {onSearch} = this.props;\n    this.setState({\n      sorted: false,\n      filter: false\n    });\n    if (onSearch) onSearch();\n  }\n\n  render() {\n    const {\n      sorting,\n      filterCTALabel,\n      filterTabLabel,\n      sortCTALabel,\n      sortTabLabel,\n      filters,\n      moreFilterAriaLabel,\n      moreSortAriaLabel\n    } = this.props;\n    const {filter, sorted} = this.state;\n    const {skin} = this.context;\n\n    const defaultColor = get('common.primary', skin);\n    const darkColor = get('common.dark', skin);\n    const filtersActive = filter === true;\n    const sortingActive = sorted === true;\n\n    const sortView =\n      sorting !== undefined ? (\n        <div data-name=\"choice\" className={style.select}>\n          <Select {...sorting} />\n        </div>\n      ) : null;\n\n    return (\n      <div data-name=\"search\" className={style.search}>\n        <div\n          data-name=\"filter\"\n          data-open={filtersActive}\n          className={filtersActive ? style.activeDefault : style.default}\n        >\n          <div className={style.title} data-name=\"filterButton\" onClick={this.handleOpenFilter}>\n            {filterTabLabel}\n            <div className={style.arrow}>\n              <ArrowDown color={darkColor} height={14} aria-label={moreFilterAriaLabel} />\n            </div>\n          </div>\n        </div>\n        <div\n          data-name=\"sortBy\"\n          data-open={sortingActive}\n          className={sortingActive ? style.activeWrapperSortBy : style.wrapperSortBy}\n        >\n          <div className={style.title} data-name=\"sortButton\" onClick={this.handleOpenSort}>\n            {sortTabLabel}\n            <div className={style.arrow}>\n              <ArrowDown color={darkColor} height={14} aria-label={moreSortAriaLabel} />\n            </div>\n          </div>\n        </div>\n        <div\n          data-name=\"filterWrapper\"\n          className={filtersActive ? style.activeWrapperFilters : style.wrapperFilters}\n        >\n          <FiltersWrapper className={style.wrapper} filters={filters} />\n          <div\n            data-name=\"cta\"\n            className={style.CTAfilter}\n            style={{\n              backgroundColor: defaultColor\n            }}\n            onClick={this.handleSearch}\n          >\n            {filterCTALabel}\n          </div>\n        </div>\n        <div\n          data-name=\"sortWrapper\"\n          className={sortingActive ? style.activeSorting : style.sorting}\n        >\n          {sortView}\n          <div\n            data-name=\"cta\"\n            className={style.CTAfilter}\n            style={{\n              backgroundColor: defaultColor\n            }}\n            onClick={this.handleSearch}\n          >\n            {sortCTALabel}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Filters;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","NovaCompositionNavigationArrowDown","ArrowDown","Select","Provider","style","FiltersWrapper","Filters","Component","constructor","props","state","filter","openFilters","sorted","openSorts","handleOpenFilter","bind","handleOpenSort","handleSearch","onToggleFilters","newValue","setState","onToggleSorts","onSearch","render","sorting","filterCTALabel","filterTabLabel","sortCTALabel","sortTabLabel","filters","moreFilterAriaLabel","moreSortAriaLabel","filterGroupAriaLabel","skin","context","defaultColor","darkColor","filtersActive","sortingActive","sortView","undefined","select","search","activeDefault","default","title","arrow","activeWrapperSortBy","wrapperSortBy","activeWrapperFilters","wrapperFilters","wrapper","CTAfilter","backgroundColor","activeSorting","contextTypes","childContextTypes","propTypes","string","bool","shape","func"],"sources":["../../../src/molecule/filters/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Select from '../../atom/select';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\nimport FiltersWrapper from './filters-wrapper';\n\nclass Filters extends React.Component {\n  static propTypes = {\n    filterCTALabel: PropTypes.string,\n    filterTabLabel: PropTypes.string,\n    sortCTALabel: PropTypes.string,\n    sortTabLabel: PropTypes.string,\n    openFilters: PropTypes.bool,\n    openSorts: PropTypes.bool,\n    filters: FiltersWrapper.propTypes.filters,\n    sorting: PropTypes.shape(Select.propTypes),\n    onSearch: PropTypes.func,\n    onToggleFilters: PropTypes.func,\n    onToggleSorts: PropTypes.func,\n    moreSortAriaLabel: PropTypes.string,\n    moreFilterAriaLabel: PropTypes.string,\n    filterGroupAriaLabel: PropTypes.string\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      filter: !!props.openFilters,\n      sorted: !!props.openSorts\n    };\n    this.handleOpenFilter = this.handleOpenFilter.bind(this);\n    this.handleOpenSort = this.handleOpenSort.bind(this);\n    this.handleSearch = this.handleSearch.bind(this);\n  }\n\n  handleOpenFilter() {\n    const {filter} = this.state;\n    const {onToggleFilters} = this.props;\n\n    const newValue = !filter;\n\n    this.setState({\n      filter: newValue,\n      sorted: false\n    });\n\n    if (onToggleFilters) {\n      onToggleFilters(newValue);\n    }\n  }\n\n  handleOpenSort() {\n    const {sorted} = this.state;\n    const {onToggleSorts} = this.props;\n\n    const newValue = !sorted;\n\n    this.setState({\n      sorted: newValue,\n      filter: false\n    });\n\n    if (onToggleSorts) onToggleSorts(newValue);\n  }\n\n  handleSearch() {\n    const {onSearch} = this.props;\n    this.setState({\n      sorted: false,\n      filter: false\n    });\n    if (onSearch) onSearch();\n  }\n\n  render() {\n    const {\n      sorting,\n      filterCTALabel,\n      filterTabLabel,\n      sortCTALabel,\n      sortTabLabel,\n      filters,\n      moreFilterAriaLabel,\n      moreSortAriaLabel,\n      filterGroupAriaLabel\n    } = this.props;\n    const {filter, sorted} = this.state;\n    const {skin} = this.context;\n\n    const defaultColor = get('common.primary', skin);\n    const darkColor = get('common.dark', skin);\n    const filtersActive = filter === true;\n    const sortingActive = sorted === true;\n\n    const sortView =\n      sorting !== undefined ? (\n        <div data-name=\"choice\" className={style.select}>\n          <Select {...sorting} />\n        </div>\n      ) : null;\n\n    return (\n      <div data-name=\"search\" className={style.search}>\n        <div\n          data-name=\"filter\"\n          data-open={filtersActive}\n          className={filtersActive ? style.activeDefault : style.default}\n        >\n          <div className={style.title} data-name=\"filterButton\" onClick={this.handleOpenFilter}>\n            {filterTabLabel}\n            <div className={style.arrow}>\n              <ArrowDown color={darkColor} height={14} aria-label={moreFilterAriaLabel} />\n            </div>\n          </div>\n        </div>\n        <div\n          data-name=\"sortBy\"\n          data-open={sortingActive}\n          className={sortingActive ? style.activeWrapperSortBy : style.wrapperSortBy}\n        >\n          <div className={style.title} data-name=\"sortButton\" onClick={this.handleOpenSort}>\n            {sortTabLabel}\n            <div className={style.arrow}>\n              <ArrowDown color={darkColor} height={14} aria-label={moreSortAriaLabel} />\n            </div>\n          </div>\n        </div>\n        <div\n          data-name=\"filterWrapper\"\n          className={filtersActive ? style.activeWrapperFilters : style.wrapperFilters}\n        >\n          <FiltersWrapper\n            className={style.wrapper}\n            filters={filters}\n            filterGroupAriaLabel={filterGroupAriaLabel}\n          />\n          <div\n            data-name=\"cta\"\n            className={style.CTAfilter}\n            style={{\n              backgroundColor: defaultColor\n            }}\n            onClick={this.handleSearch}\n          >\n            {filterCTALabel}\n          </div>\n        </div>\n        <div\n          data-name=\"sortWrapper\"\n          className={sortingActive ? style.activeSorting : style.sorting}\n        >\n          {sortView}\n          <div\n            data-name=\"cta\"\n            className={style.CTAfilter}\n            style={{\n              backgroundColor: defaultColor\n            }}\n            onClick={this.handleSearch}\n          >\n            {sortCTALabel}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Filters;\n"],"mappings":"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"}

package/es/molecule/questions/drop-down/index.d.ts

@@ -11,6 +11,7 @@ declare namespace DropDown {
         }> | null | undefined)[]>;
         theme: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
+        groupAriaLabel: PropTypes.Requireable<string>;
     };
 }
 import PropTypes from "prop-types";

package/es/molecule/questions/drop-down/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/drop-down/index.js"],"names":[],"mappings":";AAMA,mDAcC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/drop-down/index.js"],"names":[],"mappings":";AAMA,mDAgBC"}

package/es/molecule/questions/drop-down/index.js

@@ -9,29 +9,32 @@ const DropDown = props => {
     options,
     onChange,
     theme: propsTheme,
-    'aria-label': ariaLabel
+    'aria-label': ariaLabel,
+    groupAriaLabel
   } = props;
 
   const currentSelection = _find('selected', options);
 
   const defaultTheme = !currentSelection || currentSelection.validOption === false ? 'invalid' : 'question';
   const theme = propsTheme || defaultTheme;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
-    role: "group"
+    role: "group",
+    "aria-label": groupAriaLabel
   }, /*#__PURE__*/React.createElement(Select, {
     "aria-label": ariaLabel,
     theme: theme,
     options: options,
     onChange: onChange
-  }));
+  })));
 };
 
 DropDown.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: Select.propTypes.onChange,
   options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),
   theme: Select.propTypes.theme,
-  'aria-label': PropTypes.string
+  'aria-label': PropTypes.string,
+  groupAriaLabel: PropTypes.string
 } : {};
 export default DropDown;
 //# sourceMappingURL=index.js.map

package/es/molecule/questions/drop-down/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Select","SelectOptionPropTypes","style","DropDown","props","options","onChange","theme","propsTheme","ariaLabel","currentSelection","defaultTheme","validOption","wrapper","propTypes","arrayOf","shape","string"],"sources":["../../../../src/molecule/questions/drop-down/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {find} from 'lodash/fp';\nimport Select, {SelectOptionPropTypes} from '../../../atom/select';\nimport style from './style.css';\n\nconst DropDown = props => {\n  const {options, onChange, theme: propsTheme, 'aria-label': ariaLabel} = props;\n\n  const currentSelection = find('selected', options);\n  const defaultTheme =\n    !currentSelection || currentSelection.validOption === false ? 'invalid' : 'question';\n\n  const theme = propsTheme || defaultTheme;\n\n  return (\n    <div className={style.wrapper} role=\"group\">\n      <Select aria-label={ariaLabel} theme={theme} options={options} onChange={onChange} />\n    </div>\n  );\n};\n\nDropDown.propTypes = {\n  onChange: Select.propTypes.onChange,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  theme: Select.propTypes.theme,\n  'aria-label': PropTypes.string\n};\n\nexport default DropDown;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,sBAA5C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,OAAD;IAAUC,QAAV;IAAoBC,KAAK,EAAEC,UAA3B;IAAuC,cAAcC;EAArD,IAAkEL,KAAxE;;EAEA,MAAMM,gBAAgB,GAAG,MAAK,UAAL,EAAiBL,OAAjB,CAAzB;;EACA,MAAMM,YAAY,GAChB,CAACD,gBAAD,IAAqBA,gBAAgB,CAACE,WAAjB,KAAiC,KAAtD,GAA8D,SAA9D,GAA0E,UAD5E;EAGA,MAAML,KAAK,GAAGC,UAAU,IAAIG,YAA5B;EAEA,oBACE;IAAK,SAAS,EAAET,KAAK,CAACW,OAAtB;IAA+B,IAAI,EAAC;EAApC,gBACE,oBAAC,MAAD;IAAQ,cAAYJ,SAApB;IAA+B,KAAK,EAAEF,KAAtC;IAA6C,OAAO,EAAEF,OAAtD;IAA+D,QAAQ,EAAEC;EAAzE,EADF,CADF;AAKD,CAdD;;AAgBAH,QAAQ,CAACW,SAAT,2CAAqB;EACnBR,QAAQ,EAAEN,MAAM,CAACc,SAAP,CAAiBR,QADR;EAEnBD,OAAO,EAAEN,SAAS,CAACgB,OAAV,CAAkBhB,SAAS,CAACiB,KAAV,CAAgBf,qBAAhB,CAAlB,CAFU;EAGnBM,KAAK,EAAEP,MAAM,CAACc,SAAP,CAAiBP,KAHL;EAInB,cAAcR,SAAS,CAACkB;AAJL,CAArB;AAOA,eAAed,QAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","Select","SelectOptionPropTypes","style","DropDown","props","options","onChange","theme","propsTheme","ariaLabel","groupAriaLabel","currentSelection","defaultTheme","validOption","wrapper","propTypes","arrayOf","shape","string"],"sources":["../../../../src/molecule/questions/drop-down/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {find} from 'lodash/fp';\nimport Select, {SelectOptionPropTypes} from '../../../atom/select';\nimport style from './style.css';\n\nconst DropDown = props => {\n  const {options, onChange, theme: propsTheme, 'aria-label': ariaLabel, groupAriaLabel} = props;\n\n  const currentSelection = find('selected', options);\n  const defaultTheme =\n    !currentSelection || currentSelection.validOption === false ? 'invalid' : 'question';\n\n  const theme = propsTheme || defaultTheme;\n\n  return (\n    <form>\n      <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\n        <Select aria-label={ariaLabel} theme={theme} options={options} onChange={onChange} />\n      </div>\n    </form>\n  );\n};\n\nDropDown.propTypes = {\n  onChange: Select.propTypes.onChange,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  theme: Select.propTypes.theme,\n  'aria-label': PropTypes.string,\n  groupAriaLabel: PropTypes.string\n};\n\nexport default DropDown;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,MAAP,IAAgBC,qBAAhB,QAA4C,sBAA5C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,OAAD;IAAUC,QAAV;IAAoBC,KAAK,EAAEC,UAA3B;IAAuC,cAAcC,SAArD;IAAgEC;EAAhE,IAAkFN,KAAxF;;EAEA,MAAMO,gBAAgB,GAAG,MAAK,UAAL,EAAiBN,OAAjB,CAAzB;;EACA,MAAMO,YAAY,GAChB,CAACD,gBAAD,IAAqBA,gBAAgB,CAACE,WAAjB,KAAiC,KAAtD,GAA8D,SAA9D,GAA0E,UAD5E;EAGA,MAAMN,KAAK,GAAGC,UAAU,IAAII,YAA5B;EAEA,oBACE,+CACE;IAAK,SAAS,EAAEV,KAAK,CAACY,OAAtB;IAA+B,IAAI,EAAC,OAApC;IAA4C,cAAYJ;EAAxD,gBACE,oBAAC,MAAD;IAAQ,cAAYD,SAApB;IAA+B,KAAK,EAAEF,KAAtC;IAA6C,OAAO,EAAEF,OAAtD;IAA+D,QAAQ,EAAEC;EAAzE,EADF,CADF,CADF;AAOD,CAhBD;;AAkBAH,QAAQ,CAACY,SAAT,2CAAqB;EACnBT,QAAQ,EAAEN,MAAM,CAACe,SAAP,CAAiBT,QADR;EAEnBD,OAAO,EAAEN,SAAS,CAACiB,OAAV,CAAkBjB,SAAS,CAACkB,KAAV,CAAgBhB,qBAAhB,CAAlB,CAFU;EAGnBM,KAAK,EAAEP,MAAM,CAACe,SAAP,CAAiBR,KAHL;EAInB,cAAcR,SAAS,CAACmB,MAJL;EAKnBR,cAAc,EAAEX,SAAS,CAACmB;AALP,CAArB;AAQA,eAAef,QAAf"}

package/es/molecule/questions/qcm/index.d.ts

@@ -31,6 +31,7 @@ declare namespace QCM {
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
             'aria-label': PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
+        const groupAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/es/molecule/questions/qcm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm/index.js"],"names":[],"mappings":";AASA,kEAiDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm/index.js"],"names":[],"mappings":";AASA,kEAmDC"}

package/es/molecule/questions/qcm/index.js

@@ -11,7 +11,8 @@ import style from './style.css';
 
 const QCM = (props, legacyContext) => {
   const {
-    answers
+    answers,
+    groupAriaLabel
   } = props;
   const longestAnswer = maxBy(({
     title
@@ -54,11 +55,12 @@ const QCM = (props, legacyContext) => {
       }
     }));
   }), [answers, longestAnswer, primarySkinColor]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
     "data-name": "qcm",
     className: style.wrapper,
-    role: "group"
-  }, answersViews);
+    role: "group",
+    "aria-label": groupAriaLabel
+  }, answersViews));
 };
 
 QCM.contextTypes = {
@@ -70,7 +72,8 @@ QCM.propTypes = process.env.NODE_ENV !== "production" ? {
     selected: PropTypes.bool,
     onClick: PropTypes.func,
     'aria-label': PropTypes.string
-  }))
+  })),
+  groupAriaLabel: PropTypes.string
 } : {};
 export default QCM;
 //# sourceMappingURL=index.js.map

package/es/molecule/questions/qcm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n  const {answers} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper} role=\"group\">\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  )\n};\n\nexport default QCM;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,SAAQC,4BAAR,QAA2C,iDAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,GAAG,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACpC,MAAM;IAACC;EAAD,IAAYF,KAAlB;EACA,MAAMG,aAAa,GAAGT,KAAK,CAAC,CAAC;IAACU;EAAD,CAAD,KAAaA,KAAK,CAACC,MAApB,EAA4BH,OAA5B,CAA3B;EACA,MAAMI,IAAI,GAAGV,kBAAkB,CAACK,aAAD,CAA/B;EACA,MAAMM,gBAAgB,GAAGd,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8Ba,IAA9B,CAA9B;EAEA,MAAME,YAAY,GAAGlB,OAAO,CAC1B,MACEY,OAAO,CAACO,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;IAC3B,MAAM;MAACC,OAAD;MAAUR,KAAV;MAAiBS,QAAjB;MAA2B,cAAcC;IAAzC,IAAsDJ,MAA5D;IACA,MAAMK,eAAe,GAAGZ,aAAa,CAACC,KAAd,KAAwBA,KAAxB,GAAgCN,KAAK,CAACK,aAAtC,GAAsDL,KAAK,CAACY,MAApF;IACA,MAAMM,mBAAmB,GAAGH,QAAQ,GAAGf,KAAK,CAACmB,cAAT,GAA0BnB,KAAK,CAACoB,gBAApE;IAEA,oBACE;MACE,aAAU,QADZ;MAEE,cAAYJ,SAAS,IAAIV,KAF3B;MAGE,SAAS,EAAEb,UAAU,CAACwB,eAAD,EAAkBjB,KAAK,CAACqB,SAAxB,EAAmCH,mBAAnC,CAHvB;MAIE,OAAO,EAAEJ,OAJX;MAKE,KAAK,eACCC,QAAQ,IAAI;QACdO,SAAS,EAAG,cAAavB,4BAA4B,CAACU,gBAAD,CAAmB;MAD1D,CADb,CALP;MAUE,iBAAeM,QAVjB;MAWE,GAAG,EAAEF;IAXP,gBAaE;MACE,aAAU,mBADZ;MAEE,KAAK,EAAE;QAACU,eAAe,EAAER,QAAQ,GAAGN,gBAAH,GAAsB;QAAU;;MAA1D,CAFT;MAGE,SAAS,EAAET,KAAK,CAACwB;IAHnB,EAbF,eAkBE;MACE,aAAU,cADZ;MAEE,SAAS,EAAExB,KAAK,CAACyB,UAFnB,CAGE;MAHF;MAIE,uBAAuB,EAAE;QAACC,MAAM,EAAEpB;MAAT;IAJ3B,EAlBF,CADF;EA2BD,CAhCD,CAFwB,EAmC1B,CAACF,OAAD,EAAUC,aAAV,EAAyBI,gBAAzB,CAnC0B,CAA5B;EAsCA,oBACE;IAAK,aAAU,KAAf;IAAqB,SAAS,EAAET,KAAK,CAAC2B,OAAtC;IAA+C,IAAI,EAAC;EAApD,GACGjB,YADH,CADF;AAKD,CAjDD;;AAmDAT,GAAG,CAAC2B,YAAJ,GAAmB;EACjBpB,IAAI,EAAEX,QAAQ,CAACgC,iBAAT,CAA2BrB;AADhB,CAAnB;AAIAP,GAAG,CAAC6B,SAAJ,2CAAgB;EACd1B,OAAO,EAAEV,SAAS,CAACqC,OAAV,CACPrC,SAAS,CAACsC,KAAV,CAAgB;IACd1B,KAAK,EAAEZ,SAAS,CAACuC,MADH;IAEdlB,QAAQ,EAAErB,SAAS,CAACwC,IAFN;IAGdpB,OAAO,EAAEpB,SAAS,CAACyC,IAHL;IAId,cAAczC,SAAS,CAACuC;EAJV,CAAhB,CADO;AADK,CAAhB;AAWA,eAAehC,GAAf"}
+{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n  const {answers, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <form>\n      <div data-name=\"qcm\" className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\n        {answersViews}\n      </div>\n    </form>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  ),\n  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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"}

package/es/molecule/questions/qcm-drag/index.d.ts

@@ -1,13 +1,15 @@
 export default QcmDrag;
-declare function QcmDrag({ answers, help }: {
+declare function QcmDrag({ answers, help, groupAriaLabel }: {
     answers: any;
     help: any;
+    groupAriaLabel: any;
 }, legacyContext: any): JSX.Element;
 declare namespace QcmDrag {
     namespace propTypes {
         export { AnswersPropTypes as answers };
         import help = help;
         export { help };
+        export const groupAriaLabel: PropTypes.Requireable<string>;
     }
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{

package/es/molecule/questions/qcm-drag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"names":[],"mappings":";AAkGA;;;oCAYC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtGD;;;;;;0BAQE;AA8BF;;;;gBA4CC;;;;;;;;;;;AAxED;;gBAA6E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"names":[],"mappings":";AAkGA;;;;oCAcC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAxGD;;;;;;0BAQE;AA8BF;;;;gBA4CC;;;;;;;;;;;AAxED;;gBAA6E"}

package/es/molecule/questions/qcm-drag/index.js

@@ -116,15 +116,17 @@ SelectedAnswerSections.propTypes = process.env.NODE_ENV !== "production" ? {
 
 const QcmDrag = ({
   answers,
-  help
+  help,
+  groupAriaLabel
 }, legacyContext) => {
   const skin = GetSkinFromContext(legacyContext);
 
   const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
-    role: "group"
+    role: "group",
+    "aria-label": groupAriaLabel
   }, /*#__PURE__*/React.createElement(SelectedAnswerSections, {
     answers: answers,
     help: help,
@@ -134,12 +136,13 @@ const QcmDrag = ({
     className: style.answers
   }, /*#__PURE__*/React.createElement(Choices, {
     answers: answers
-  })));
+  }))));
 };
 
 QcmDrag.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes,
-  help: SelectedAnswerSections.propTypes.help
+  help: SelectedAnswerSections.propTypes.help,
+  groupAriaLabel: PropTypes.string
 } : {};
 QcmDrag.contextTypes = {
   skin: Provider.childContextTypes.skin

package/es/molecule/questions/qcm-drag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","legacyContext","skin","primarySkinColor","wrapper","contextTypes","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n  PropTypes.shape({\n    onClick: PropTypes.func,\n    order: PropTypes.number,\n    selected: PropTypes.bool,\n    title: PropTypes.string,\n    help: PropTypes.string\n  })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n  help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        onClick={onClick}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n  answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n  const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n  const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n    const {onClick, title} = answer;\n    return (\n      <div\n        data-selected=\"true\"\n        onClick={onClick}\n        key={key}\n        data-name=\"selectedAnswer\"\n        className={style.selected}\n        style={{\n          boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n        }}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor\n          }}\n          className={style.background}\n        />\n        <div className={style.content}>\n          <span\n            data-name=\"answerContent\"\n            className={classnames(style.selectedAnswerText, style.innerHTML)}\n            title={title}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n        </div>\n      </div>\n    );\n  });\n\n  if (selectedAnswersViews.length > 0) {\n    return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n  } else {\n    return (\n      <div className={style.emptyAnswers}>\n        <EmptyView help={help} />\n      </div>\n    );\n  }\n};\n\nSelectedAnswerSections.propTypes = {\n  answers: AnswersPropTypes,\n  help: EmptyView.propTypes.help,\n  backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help}, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper} role=\"group\">\n      <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n      <div data-name=\"qcm-drag-answers\" className={style.answers}>\n        <Choices answers={answers} />\n      </div>\n    </div>\n  );\n};\n\nQcmDrag.propTypes = {\n  answers: AnswersPropTypes,\n  help: SelectedAnswerSections.propTypes.help\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","groupAriaLabel","legacyContext","skin","primarySkinColor","wrapper","contextTypes","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n  PropTypes.shape({\n    onClick: PropTypes.func,\n    order: PropTypes.number,\n    selected: PropTypes.bool,\n    title: PropTypes.string,\n    help: PropTypes.string\n  })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n  help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        onClick={onClick}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n  answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n  const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n  const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n    const {onClick, title} = answer;\n    return (\n      <div\n        data-selected=\"true\"\n        onClick={onClick}\n        key={key}\n        data-name=\"selectedAnswer\"\n        className={style.selected}\n        style={{\n          boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n        }}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor\n          }}\n          className={style.background}\n        />\n        <div className={style.content}>\n          <span\n            data-name=\"answerContent\"\n            className={classnames(style.selectedAnswerText, style.innerHTML)}\n            title={title}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n        </div>\n      </div>\n    );\n  });\n\n  if (selectedAnswersViews.length > 0) {\n    return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n  } else {\n    return (\n      <div className={style.emptyAnswers}>\n        <EmptyView help={help} />\n      </div>\n    );\n  }\n};\n\nSelectedAnswerSections.propTypes = {\n  answers: AnswersPropTypes,\n  help: EmptyView.propTypes.help,\n  backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help, groupAriaLabel}, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <form>\n      <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\n        <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n        <div data-name=\"qcm-drag-answers\" className={style.answers}>\n          <Choices answers={answers} />\n        </div>\n      </div>\n    </form>\n  );\n};\n\nQcmDrag.propTypes = {\n  answers: AnswersPropTypes,\n  help: SelectedAnswerSections.propTypes.help,\n  groupAriaLabel: PropTypes.string\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":"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"}

package/es/molecule/questions/qcm-graphic/index.d.ts

@@ -32,6 +32,7 @@ declare namespace QCMImage {
             image: PropTypes.Requireable<string>;
             ariaLabel: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
+        const groupAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/es/molecule/questions/qcm-graphic/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":[],"mappings":";AAQA,uEAuDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":[],"mappings":";AAQA,uEA8DC"}

package/es/molecule/questions/qcm-graphic/index.js

@@ -11,7 +11,8 @@ import style from './style.css';
 
 const QCMImage = (props, legacyContext) => {
   const {
-    answers
+    answers,
+    groupAriaLabel
   } = props;
   const skin = GetSkinFromContext(legacyContext);
 
@@ -62,11 +63,12 @@ const QCMImage = (props, legacyContext) => {
       }
     }))));
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("div", {
     "data-name": "qcm-graphic-wrapper",
     className: style.wrapper,
-    role: "group"
-  }, answersViews);
+    role: "group",
+    "aria-label": groupAriaLabel
+  }, answersViews));
 };
 
 QCMImage.contextTypes = {
@@ -79,7 +81,8 @@ QCMImage.propTypes = process.env.NODE_ENV !== "production" ? {
     onClick: PropTypes.func,
     image: PropTypes.string,
     ariaLabel: PropTypes.string
-  }))
+  })),
+  groupAriaLabel: PropTypes.string
 } : {};
 export default QCMImage;
 //# sourceMappingURL=index.js.map