npm - @pie-element/multiple-choice - Versions diffs - 9.15.5 → 9.15.6-next.3 - Mend

@pie-element/multiple-choice 9.15.5 → 9.15.6-next.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/lib/choice-input.js CHANGED Viewed

@@ -94,6 +94,14 @@ var styleSheet = function styleSheet(theme) {
         // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles
         marginLeft: "-".concat(theme.spacing.unit, "px")
       }
+    },
+    srOnly: {
+      position: 'absolute',
+      left: '-10000px',
+      top: 'auto',
+      width: '1px',
+      height: '1px',
+      overflow: 'hidden'
     }
   };
 };
@@ -251,6 +259,7 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _this.onToggleChoice = _this.onToggleChoice.bind((0, _assertThisInitialized2["default"])(_this));
     _this.choiceId = _this.generateChoiceId();
+    _this.descId = "".concat(_this.choiceId, "-desc");
     return _this;
   }
@@ -301,6 +310,27 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
         tagName: "span"
       }));
+      var screenReaderLabel = /*#__PURE__*/_react["default"].createElement("span", {
+        id: this.descId,
+        className: classes.srOnly
+      }, choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below');
+      var tagProps = {
+        disabled: disabled,
+        checked: checked,
+        correctness: correctness,
+        value: value,
+        id: this.choiceId,
+        onChange: this.onToggleChoice,
+        'aria-describedby': this.descId
+      };
+      var control = isSelectionButtonBelow ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: classes.belowSelectionComponent
+      }, screenReaderLabel, /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, tagProps, {
+        style: {
+          padding: 0
+        }
+      })), displayKey ? "".concat(displayKey, ".") : '') : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, screenReaderLabel, /*#__PURE__*/_react["default"].createElement(Tag, tagProps));
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(className, 'corespring-' + classSuffix, 'choice-input')
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -309,36 +339,12 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
         correctness: correctness
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(holderClassNames, 'checkbox-holder')
-      }, isSelectionButtonBelow ? /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
-        label: choicelabel,
-        value: value,
-        htmlFor: this.choiceId,
-        labelPlacement: 'top',
-        control: /*#__PURE__*/_react["default"].createElement("span", {
-          className: classes.belowSelectionComponent
-        }, /*#__PURE__*/_react["default"].createElement(Tag, {
-          disabled: disabled,
-          checked: checked,
-          correctness: correctness,
-          value: value,
-          id: this.choiceId,
-          onChange: this.onToggleChoice,
-          style: {
-            padding: 0
-          }
-        }), displayKey ? "".concat(displayKey, ".") : '')
-      }) : /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
+      }, /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
         label: choicelabel,
         value: value,
         htmlFor: this.choiceId,
-        control: /*#__PURE__*/_react["default"].createElement(Tag, {
-          disabled: disabled,
-          checked: checked,
-          correctness: correctness,
-          value: value,
-          id: this.choiceId,
-          onChange: this.onToggleChoice
-        })
+        labelPlacement: isSelectionButtonBelow ? 'top' : undefined,
+        control: control
       }))), rationale && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         className: "rationale",
         defaultClassName: "rationale",

package/lib/choice-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","padding","spacing","unit","margin","belowLayout","belowLayoutCenter","justifyContent","belowSelectionComponent","marginLeft","formStyleSheet","label","letterSpacing","disabled","cursor","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","incorrect","root","primaryLight","checked","primary","opacity","pointerEvents","focusVisibleUnchecked","outline","focusUncheckedBorder","focusUnchecked","focusVisibleChecked","focusCheckedBorder","focusChecked","StyledCheckbox","correctness","onChange","value","id","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","choiceId","generateChoiceId","event","Math","random","toFixed","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","isSelectionButtonBelow","Tag","classSuffix","holderClassNames","choicelabel","React","Component","PropTypes","oneOf","string","bool","isRequired","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nimport FeedbackTick from './feedback-tick';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n '& > span': {\n fontSize: 'inherit',\n },\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n // add margin to the top, left and bottom of the checkbox to keep the same spacing as before\n padding: theme.spacing.unit,\n margin: `${theme.spacing.unit / 2 }px 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit/ 2}px`,\n },\n },\n belowLayout: {\n '& > label': {\n alignItems: 'flex-start',\n },\n },\n belowLayoutCenter: {\n justifyContent: 'center',\n '& > label': {\n alignItems: 'center',\n },\n },\n belowSelectionComponent: {\n display: 'flex',\n alignItems: 'center',\n '& > span': {\n // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n marginLeft: `-${theme.spacing.unit}px`,\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n letterSpacing: 'normal',\n },\n disabled: {\n // apply to all children\n '& ': {\n cursor: 'not-allowed !important',\n },\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => (\n <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n focusVisibleUnchecked: {\n outline: `1px solid ${color.focusUncheckedBorder()}`,\n backgroundColor: color.focusUnchecked(),\n },\n focusVisibleChecked: {\n outline: `1px solid ${color.focusCheckedBorder()}`,\n backgroundColor: color.focusChecked(),\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Checkbox\n id={id}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Radio\n id={id}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n isSelectionButtonBelow: PropTypes.bool,\n };\n\n static defaultProps = {\n rationale: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n this.choiceId = this.generateChoiceId();\n }\n\n onToggleChoice(event) {\n this.props.onChange(event);\n }\n\n generateChoiceId() {\n return 'choice-' + (Math.random() 10000).toFixed();\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n correctness,\n classes,\n className,\n rationale,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n value,\n checked,\n isSelectionButtonBelow,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',\n [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',\n });\n\n const choicelabel = (\n <>{displayKey && !isSelectionButtonBelow ? (\n <span className={classes.row}>\n {displayKey}.{'\\u00A0'}\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n </span>\n ) : (\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />)}</>\n );\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n {isSelectionButtonBelow ? (\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n labelPlacement={'top'}\n control={\n <span className={classes.belowSelectionComponent}>\n <Tag\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n style={{ padding: 0 }}\n />\n {displayKey ? `${displayKey}.` : ''}\n </span>\n }\n />\n ) : (\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n control={\n <Tag\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n />\n }\n />\n )}\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
1	+ {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","padding","spacing","unit","margin","belowLayout","belowLayoutCenter","justifyContent","belowSelectionComponent","marginLeft","srOnly","position","left","top","width","height","overflow","formStyleSheet","label","letterSpacing","disabled","cursor","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","incorrect","root","primaryLight","checked","primary","opacity","pointerEvents","focusVisibleUnchecked","outline","focusUncheckedBorder","focusUnchecked","focusVisibleChecked","focusCheckedBorder","focusChecked","StyledCheckbox","correctness","onChange","value","id","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","choiceId","generateChoiceId","descId","event","Math","random","toFixed","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","isSelectionButtonBelow","Tag","classSuffix","holderClassNames","choicelabel","screenReaderLabel","tagProps","control","undefined","React","Component","PropTypes","oneOf","string","bool","isRequired","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nimport FeedbackTick from './feedback-tick';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n '& > span': {\n fontSize: 'inherit',\n },\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n // add margin to the top, left and bottom of the checkbox to keep the same spacing as before\n padding: theme.spacing.unit,\n margin: `${theme.spacing.unit / 2}px 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`,\n },\n },\n belowLayout: {\n '& > label': {\n alignItems: 'flex-start',\n },\n },\n belowLayoutCenter: {\n justifyContent: 'center',\n '& > label': {\n alignItems: 'center',\n },\n },\n belowSelectionComponent: {\n display: 'flex',\n alignItems: 'center',\n '& > span': {\n // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n marginLeft: `-${theme.spacing.unit}px`,\n },\n },\n srOnly: {\n position: 'absolute',\n left: '-10000px',\n top: 'auto',\n width: '1px',\n height: '1px',\n overflow: 'hidden',\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n letterSpacing: 'normal',\n },\n disabled: {\n // apply to all children\n '& ': {\n cursor: 'not-allowed !important',\n },\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => (\n <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n focusVisibleUnchecked: {\n outline: `1px solid ${color.focusUncheckedBorder()}`,\n backgroundColor: color.focusUnchecked(),\n },\n focusVisibleChecked: {\n outline: `1px solid ${color.focusCheckedBorder()}`,\n backgroundColor: color.focusChecked(),\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Checkbox\n id={id}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Radio\n id={id}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n isSelectionButtonBelow: PropTypes.bool,\n };\n\n static defaultProps = {\n rationale: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n this.choiceId = this.generateChoiceId();\n this.descId = `${this.choiceId}-desc`;\n }\n\n onToggleChoice(event) {\n this.props.onChange(event);\n }\n\n generateChoiceId() {\n return 'choice-' + (Math.random() 10000).toFixed();\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n correctness,\n classes,\n className,\n rationale,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n value,\n checked,\n isSelectionButtonBelow,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',\n [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',\n });\n\n const choicelabel = (\n <>\n {displayKey && !isSelectionButtonBelow ? (\n <span className={classes.row}>\n {displayKey}.{'\\u00A0'}\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n </span>\n ) : (\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n )}\n </>\n );\n\n const screenReaderLabel = (\n <span id={this.descId} className={classes.srOnly}>\n {choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below'}\n </span>\n );\n\n const tagProps = {\n disabled,\n checked,\n correctness,\n value,\n id: this.choiceId,\n onChange: this.onToggleChoice,\n 'aria-describedby': this.descId,\n };\n\n const control = isSelectionButtonBelow ? (\n <span className={classes.belowSelectionComponent}>\n {screenReaderLabel}\n <Tag {...tagProps} style={{ padding: 0 }} />\n {displayKey ? `${displayKey}.` : ''}\n </span>\n ) : (\n <>\n {screenReaderLabel}\n <Tag {...tagProps} />\n </>\n );\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n labelPlacement={isSelectionButtonBelow ? 'top' : undefined}\n control={control}\n />\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}

package/module/configure.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.6/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.7/module/index.js";
 import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@6.1.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {

package/module/element.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.6/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.7/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@6.1.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -12168,6 +12168,14 @@ const styleSheet = theme => ({
     '& > span': {
       marginLeft: `-${theme.spacing.unit}px`
     }
+  },
+  srOnly: {
+    position: 'absolute',
+    left: '-10000px',
+    top: 'auto',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden'
   }
 });
 const formStyleSheet = {
@@ -12193,7 +12201,7 @@ const StyledFormControlLabel = styles$b.withStyles(formStyleSheet, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$3,
-    lineNumber: 78
+    lineNumber: 86
   }
 }));
 const colorStyle = (varName, fallback) => ({
@@ -12259,7 +12267,7 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 128
+      lineNumber: 136
     }
   });
 });
@@ -12292,7 +12300,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 157
+      lineNumber: 165
     }
   });
 });
@@ -12328,6 +12336,7 @@ class ChoiceInput extends React$4.Component {
     super(props);
     this.onToggleChoice = this.onToggleChoice.bind(this);
     this.choiceId = this.generateChoiceId();
+    this.descId = `${this.choiceId}-desc`;
   }
   onToggleChoice(event) {
     this.props.onChange(event);
@@ -12349,7 +12358,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 243
+        lineNumber: 253
       }
     }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -12358,7 +12367,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 245
+        lineNumber: 255
       }
     })) : React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -12367,7 +12376,50 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 248
+        lineNumber: 258
+      }
+    }));
+    const screenReaderLabel = React$4.createElement('span', {
+      id: this.descId,
+      className: classes.srOnly,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 264
+      }
+    }, choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below');
+    const tagProps = {
+      disabled,
+      checked,
+      correctness,
+      value,
+      id: this.choiceId,
+      onChange: this.onToggleChoice,
+      'aria-describedby': this.descId
+    };
+    const control = isSelectionButtonBelow ? React$4.createElement('span', {
+      className: classes.belowSelectionComponent,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 280
+      }
+    }, screenReaderLabel, React$4.createElement(Tag, {
+      ...tagProps,
+      style: {
+        padding: 0
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 282
+      }
+    }), displayKey ? `${displayKey}.` : '') : React$4.createElement(React$4.Fragment, null, screenReaderLabel, React$4.createElement(Tag, {
+      ...tagProps,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 288
       }
     }));
     return React$4.createElement('div', {
@@ -12375,83 +12427,39 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 252
+        lineNumber: 293
       }
     }, React$4.createElement('div', {
       className: classes.row,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 253
+        lineNumber: 294
       }
     }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
       correctness: correctness,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 254
+        lineNumber: 295
       }
     }), React$4.createElement('div', {
       className: classNames$2(holderClassNames, 'checkbox-holder'),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 255
-      }
-    }, isSelectionButtonBelow ? React$4.createElement(StyledFormControlLabel, {
-      label: choicelabel,
-      value: value,
-      htmlFor: this.choiceId,
-      labelPlacement: 'top',
-      control: React$4.createElement('span', {
-        className: classes.belowSelectionComponent,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$3,
-          lineNumber: 263
-        }
-      }, React$4.createElement(Tag, {
-        disabled: disabled,
-        checked: checked,
-        correctness: correctness,
-        value: value,
-        id: this.choiceId,
-        onChange: this.onToggleChoice,
-        style: {
-          padding: 0
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$3,
-          lineNumber: 264
-        }
-      }), displayKey ? `${displayKey}.` : ''),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 257
+        lineNumber: 296
       }
-    }) : React$4.createElement(StyledFormControlLabel, {
+    }, React$4.createElement(StyledFormControlLabel, {
       label: choicelabel,
       value: value,
       htmlFor: this.choiceId,
-      control: React$4.createElement(Tag, {
-        disabled: disabled,
-        checked: checked,
-        correctness: correctness,
-        value: value,
-        id: this.choiceId,
-        onChange: this.onToggleChoice,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$3,
-          lineNumber: 283
-        }
-      }),
+      labelPlacement: isSelectionButtonBelow ? 'top' : undefined,
+      control: control,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 278
+        lineNumber: 297
       }
     }))), rationale && React$4.createElement(PreviewPrompt$1, {
       className: "rationale",
@@ -12460,7 +12468,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 296
+        lineNumber: 306
       }
     }), React$4.createElement(Feedback, {
       feedback: feedback,
@@ -12468,7 +12476,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 297
+        lineNumber: 307
       }
     }));
   }

package/module/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@9.15.4</title>
+      <title>@pie-element/multiple-choice@9.15.5</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json CHANGED Viewed

@@ -1,10 +1,10 @@
 {
   "name": "@pie-element/multiple-choice",
-  "version": "9.15.4",
+  "version": "9.15.5",
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "3.8.6"
+      "version": "3.8.7"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",

package/module/print.html CHANGED Viewed

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/multiple-choice@9.15.4</title>
+      <title>@pie-element/multiple-choice@9.15.5</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"

package/module/print.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.6/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.7/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@6.1.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -12168,6 +12168,14 @@ const styleSheet = theme => ({
     '& > span': {
       marginLeft: `-${theme.spacing.unit}px`
     }
+  },
+  srOnly: {
+    position: 'absolute',
+    left: '-10000px',
+    top: 'auto',
+    width: '1px',
+    height: '1px',
+    overflow: 'hidden'
   }
 });
 const formStyleSheet = {
@@ -12193,7 +12201,7 @@ const StyledFormControlLabel = styles$b.withStyles(formStyleSheet, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$3,
-    lineNumber: 78
+    lineNumber: 86
   }
 }));
 const colorStyle = (varName, fallback) => ({
@@ -12259,7 +12267,7 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 128
+      lineNumber: 136
     }
   });
 });
@@ -12292,7 +12300,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 157
+      lineNumber: 165
     }
   });
 });
@@ -12328,6 +12336,7 @@ class ChoiceInput extends React$4.Component {
     super(props);
     this.onToggleChoice = this.onToggleChoice.bind(this);
     this.choiceId = this.generateChoiceId();
+    this.descId = `${this.choiceId}-desc`;
   }
   onToggleChoice(event) {
     this.props.onChange(event);
@@ -12349,7 +12358,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 243
+        lineNumber: 253
       }
     }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -12358,7 +12367,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 245
+        lineNumber: 255
       }
     })) : React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -12367,7 +12376,50 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 248
+        lineNumber: 258
+      }
+    }));
+    const screenReaderLabel = React$4.createElement('span', {
+      id: this.descId,
+      className: classes.srOnly,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 264
+      }
+    }, choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below');
+    const tagProps = {
+      disabled,
+      checked,
+      correctness,
+      value,
+      id: this.choiceId,
+      onChange: this.onToggleChoice,
+      'aria-describedby': this.descId
+    };
+    const control = isSelectionButtonBelow ? React$4.createElement('span', {
+      className: classes.belowSelectionComponent,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 280
+      }
+    }, screenReaderLabel, React$4.createElement(Tag, {
+      ...tagProps,
+      style: {
+        padding: 0
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 282
+      }
+    }), displayKey ? `${displayKey}.` : '') : React$4.createElement(React$4.Fragment, null, screenReaderLabel, React$4.createElement(Tag, {
+      ...tagProps,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 288
       }
     }));
     return React$4.createElement('div', {
@@ -12375,83 +12427,39 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 252
+        lineNumber: 293
       }
     }, React$4.createElement('div', {
       className: classes.row,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 253
+        lineNumber: 294
       }
     }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
       correctness: correctness,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 254
+        lineNumber: 295
       }
     }), React$4.createElement('div', {
       className: classNames$2(holderClassNames, 'checkbox-holder'),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 255
-      }
-    }, isSelectionButtonBelow ? React$4.createElement(StyledFormControlLabel, {
-      label: choicelabel,
-      value: value,
-      htmlFor: this.choiceId,
-      labelPlacement: 'top',
-      control: React$4.createElement('span', {
-        className: classes.belowSelectionComponent,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$3,
-          lineNumber: 263
-        }
-      }, React$4.createElement(Tag, {
-        disabled: disabled,
-        checked: checked,
-        correctness: correctness,
-        value: value,
-        id: this.choiceId,
-        onChange: this.onToggleChoice,
-        style: {
-          padding: 0
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$3,
-          lineNumber: 264
-        }
-      }), displayKey ? `${displayKey}.` : ''),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 257
+        lineNumber: 296
       }
-    }) : React$4.createElement(StyledFormControlLabel, {
+    }, React$4.createElement(StyledFormControlLabel, {
       label: choicelabel,
       value: value,
       htmlFor: this.choiceId,
-      control: React$4.createElement(Tag, {
-        disabled: disabled,
-        checked: checked,
-        correctness: correctness,
-        value: value,
-        id: this.choiceId,
-        onChange: this.onToggleChoice,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$3,
-          lineNumber: 283
-        }
-      }),
+      labelPlacement: isSelectionButtonBelow ? 'top' : undefined,
+      control: control,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 278
+        lineNumber: 297
       }
     }))), rationale && React$4.createElement(PreviewPrompt$1, {
       className: "rationale",
@@ -12460,7 +12468,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 296
+        lineNumber: 306
       }
     }), React$4.createElement(Feedback, {
       feedback: feedback,
@@ -12468,7 +12476,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 297
+        lineNumber: 307
       }
     }));
   }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/multiple-choice",
   "repository": "pie-framework/pie-elements",
-  "version": "9.15.5",
+  "version": "9.15.6-next.3+227227454",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,7 @@
     "react-test-renderer": "^16.3.2",
     "react-transition-group": "^2.3.1"
   },
-  "gitHead": "7783308623c7a51403a509d3118e68b6a8594626",
+  "gitHead": "22722745439ac4a923b89dac36f96a9fc2cb4188",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },