Skip to content
Snippets Groups Projects
Commit 116e8e74 authored by chris's avatar chris
Browse files

set multiple choice aria-label

parent b76db752
No related branches found
No related tags found
1 merge request!479set multiple choice aria-label
...@@ -43,7 +43,9 @@ const Label = styled.label` ...@@ -43,7 +43,9 @@ const Label = styled.label`
`; `;
const SwitchComponent = props => { const SwitchComponent = props => {
const { className, label, labelPosition, onChange, ...rest } = props; const { className, label, labelPosition, onChange, text, ...rest } = props;
const ariaLabel = `Is it correct ${text}`;
return ( return (
<Wrapper className={className}> <Wrapper className={className}>
...@@ -53,7 +55,7 @@ const SwitchComponent = props => { ...@@ -53,7 +55,7 @@ const SwitchComponent = props => {
</Label> </Label>
)} )}
<Switch aria-label="Is it correct" onChange={onChange} {...rest} /> <Switch aria-label={ariaLabel} onChange={onChange} {...rest} />
{label && labelPosition === 'right' && ( {label && labelPosition === 'right' && (
<Label labelPosition={labelPosition} onClick={onChange}> <Label labelPosition={labelPosition} onClick={onChange}>
......
...@@ -6,6 +6,7 @@ const CustomSwitch = ({ node, getPos }) => { ...@@ -6,6 +6,7 @@ const CustomSwitch = ({ node, getPos }) => {
const context = useContext(WaxContext); const context = useContext(WaxContext);
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const [checkedAnswerMode, setCheckedAnswerMode] = useState(false); const [checkedAnswerMode, setCheckedAnswerMode] = useState(false);
const { const {
pmViews: { main }, pmViews: { main },
} = context; } = context;
...@@ -45,6 +46,17 @@ const CustomSwitch = ({ node, getPos }) => { ...@@ -45,6 +46,17 @@ const CustomSwitch = ({ node, getPos }) => {
}); });
}; };
const getUpdatedNode = () => {
let nodeFound = node;
const allNodes = getNodes(main);
allNodes.forEach(singNode => {
if (singNode.node.attrs.id === node.attrs.id) {
nodeFound = singNode;
}
});
return nodeFound;
};
return ( return (
<YesNoSwitch <YesNoSwitch
checked={checked} checked={checked}
...@@ -52,7 +64,7 @@ const CustomSwitch = ({ node, getPos }) => { ...@@ -52,7 +64,7 @@ const CustomSwitch = ({ node, getPos }) => {
customProps={customProps} customProps={customProps}
handleChange={handleChange} handleChange={handleChange}
isEditable={isEditable} isEditable={isEditable}
node={node} node={getUpdatedNode()}
/> />
); );
}; };
......
...@@ -44,7 +44,7 @@ const StyledIconWrong = styled(Icon)` ...@@ -44,7 +44,7 @@ const StyledIconWrong = styled(Icon)`
`; `;
const YesNoSwitch = ({ const YesNoSwitch = ({
customProps, customProps,
node, node: { node },
isEditable, isEditable,
handleChange, handleChange,
checked, checked,
...@@ -83,6 +83,7 @@ const YesNoSwitch = ({ ...@@ -83,6 +83,7 @@ const YesNoSwitch = ({
label="Correct?" label="Correct?"
labelPosition="left" labelPosition="left"
onChange={handleChange} onChange={handleChange}
text={node.textContent}
unCheckedChildren="NO" unCheckedChildren="NO"
/> />
); );
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment