From df65b8ac2a15cffbd20089226dd714f94c423eee Mon Sep 17 00:00:00 2001
From: Job van Achterberg <mail@3ode.nl>
Date: Fri, 10 Dec 2021 12:41:39 +0100
Subject: [PATCH 1/3] Convert assertions table into list of fieldsets.

---
 client/components/TestRenderer/index.jsx | 366 +++++++++++------------
 1 file changed, 179 insertions(+), 187 deletions(-)

diff --git a/client/components/TestRenderer/index.jsx b/client/components/TestRenderer/index.jsx
index 50bfce59d..3fbc33781 100644
--- a/client/components/TestRenderer/index.jsx
+++ b/client/components/TestRenderer/index.jsx
@@ -203,6 +203,50 @@ const ResultsBulletList = styled.ul`
     }
 `;
 
+const AssertionFieldsetList = styled.ul`
+    > li:not(:first-child) {
+        margin-top: 1em;
+    }
+
+    > li:last-child {
+        margin-bottom: 2em;
+    }
+
+    > li + li {
+        margin-top: 1em;
+    }
+`;
+
+const AssertionFieldset = styled.fieldset`
+    border: 1px solid #000;
+
+    legend {
+        display: inline-block;
+        width: auto;
+        font-size: 1em;
+        margin-left: 1em;
+        margin-bottom: 0;
+        padding: 0.2em;
+    }
+
+    .assertion-input-group {
+        margin-left: 0.5em;
+        display: flex;
+    }
+
+    .assertion-input-group ul + ul {
+        margin-top: 2em;
+    }
+
+    .assertion-input-group > li + li {
+        margin-left: 1em;
+    }
+
+    li input {
+        margin-right: 0.5em;
+    }
+`;
+
 const Button = styled.button``;
 
 const ResultsSection = styled.section``;
@@ -597,6 +641,118 @@ const TestRenderer = ({
     // pageContent to render instructions; submitResult.resultsJSON indicates results have been submitted
     if (!pageContent) return null;
 
+    const Assertion = ({ data, assertionIndex, commandIndex }) => {
+        const { description, passChoice, failChoices } = data;
+
+        const [missingChoice, failureChoice] = failChoices;
+
+        const legendId = `command-assertion-${assertionIndex}-${commandIndex}-legend`;
+
+        return (
+            <li>
+                <AssertionFieldset className="command-assertions">
+                    <legend id={legendId}>
+                        {description[0]}
+                        {isSubmitted && (
+                            <Feedback
+                                className={`${description[1].required &&
+                                    'required'} ${description[1]
+                                    .highlightRequired &&
+                                    'highlight-required'}`}
+                            >
+                                {description[1].description}
+                            </Feedback>
+                        )}
+                    </legend>
+
+                    <ul
+                        aria-labelledby={legendId}
+                        className="assertion-input-group"
+                    >
+                        <li>
+                            <input
+                                key={`Pass__${commandIndex}__${assertionIndex}`}
+                                type="radio"
+                                id={`pass-${commandIndex}-${assertionIndex}`}
+                                name={`result-${commandIndex}-${assertionIndex}`}
+                                aria-labelledby={`pass-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
+                                autoFocus={isSubmitted && passChoice.focus}
+                                defaultChecked={passChoice.checked}
+                                onClick={passChoice.click}
+                            />
+                            <label
+                                id={`pass-${commandIndex}-${assertionIndex}-label`}
+                                htmlFor={`pass-${commandIndex}-${assertionIndex}`}
+                            >
+                                {passChoice.label[0]}
+                                <Feedback
+                                    className={`${passChoice.label[1]
+                                        .offScreen && 'off-screen'}`}
+                                >
+                                    {passChoice.label[1].description}
+                                </Feedback>
+                            </label>
+                        </li>
+                        <li>
+                            <input
+                                key={`Missing__${commandIndex}__${assertionIndex}`}
+                                type="radio"
+                                id={`missing-${commandIndex}-${assertionIndex}`}
+                                name={`result-${commandIndex}-${assertionIndex}`}
+                                aria-labelledby={`missing-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
+                                autoFocus={isSubmitted && missingChoice.focus}
+                                defaultChecked={missingChoice.checked}
+                                onClick={missingChoice.click}
+                            />
+                            <label
+                                id={`missing-${commandIndex}-${assertionIndex}-label`}
+                                htmlFor={`missing-${commandIndex}-${assertionIndex}`}
+                            >
+                                {missingChoice.label[0]}
+                                <Feedback
+                                    className={`${missingChoice.label[1]
+                                        .offScreen && 'off-screen'}`}
+                                >
+                                    {missingChoice.label[1].description}
+                                </Feedback>
+                            </label>
+                        </li>
+                        <li>
+                            <input
+                                key={`Fail__${commandIndex}__${assertionIndex}`}
+                                type="radio"
+                                id={`fail-${commandIndex}-${assertionIndex}`}
+                                name={`result-${commandIndex}-${assertionIndex}`}
+                                aria-labelledby={`fail-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
+                                autoFocus={isSubmitted && failureChoice.focus}
+                                defaultChecked={failureChoice.checked}
+                                onClick={failureChoice.click}
+                            />
+                            <label
+                                id={`fail-${commandIndex}-${assertionIndex}-label`}
+                                htmlFor={`fail-${commandIndex}-${assertionIndex}`}
+                            >
+                                {failureChoice.label[0]}
+                                <Feedback
+                                    className={`${failureChoice.label[1]
+                                        .offScreen && 'off-screen'}`}
+                                >
+                                    {failureChoice.label[1].description}
+                                </Feedback>
+                            </label>
+                        </li>
+                    </ul>
+                </AssertionFieldset>
+            </li>
+        );
+    };
+
+    Assertion.propTypes = {
+        data: PropTypes.object,
+        assertionIndex: PropTypes.number,
+        commandIndex: PropTypes.number
+    };
+
     return (
         <Container>
             {submitResult &&
@@ -647,7 +803,6 @@ const TestRenderer = ({
                                 const {
                                     header,
                                     atOutput,
-                                    assertionsHeader,
                                     assertions,
                                     unexpectedBehaviors
                                 } = value;
@@ -697,196 +852,33 @@ const TestRenderer = ({
                                                 }
                                             />
                                         </Text>
-                                        <Table>
-                                            <tbody>
-                                                <tr>
-                                                    <th>
-                                                        {assertionsHeader.descriptionHeader ||
-                                                            'Assertion'}
-                                                    </th>
-                                                    <th>
-                                                        {assertionsHeader.passHeader ||
-                                                            'Success case'}
-                                                    </th>
-                                                    <th>
-                                                        {assertionsHeader.failHeader ||
-                                                            'Failure cases'}
-                                                    </th>
-                                                </tr>
-                                                {assertions.map(
-                                                    (
-                                                        assertion,
-                                                        assertionIndex
-                                                    ) => {
-                                                        const {
-                                                            description,
-                                                            passChoice,
-                                                            failChoices
-                                                        } = assertion;
-
-                                                        const [
-                                                            missingChoice,
-                                                            failureChoice
-                                                        ] = failChoices;
-
-                                                        return (
-                                                            <tr
-                                                                key={`AssertionKey_${assertionIndex}`}
-                                                            >
-                                                                {/*Assertion*/}
-                                                                <td
-                                                                    id={`assertion-${commandIndex}-${assertionIndex}`}
-                                                                >
-                                                                    {
-                                                                        description[0]
-                                                                    }
-                                                                    {isSubmitted && (
-                                                                        <Feedback
-                                                                            className={`${description[1]
-                                                                                .required &&
-                                                                                'required'} ${description[1]
-                                                                                .highlightRequired &&
-                                                                                'highlight-required'}`}
-                                                                        >
-                                                                            {
-                                                                                description[1]
-                                                                                    .description
-                                                                            }
-                                                                        </Feedback>
-                                                                    )}
-                                                                </td>
-                                                                {/*Success case*/}
-                                                                <td>
-                                                                    <input
-                                                                        key={`Pass__${commandIndex}__${assertionIndex}`}
-                                                                        type="radio"
-                                                                        id={`pass-${commandIndex}-${assertionIndex}`}
-                                                                        name={`result-${commandIndex}-${assertionIndex}`}
-                                                                        aria-labelledby={`pass-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
-                                                                        autoFocus={
-                                                                            isSubmitted &&
-                                                                            passChoice.focus
-                                                                        }
-                                                                        defaultChecked={
-                                                                            passChoice.checked
-                                                                        }
-                                                                        onClick={
-                                                                            passChoice.click
-                                                                        }
-                                                                    />
-                                                                    <label
-                                                                        id={`pass-${commandIndex}-${assertionIndex}-label`}
-                                                                        htmlFor={`pass-${commandIndex}-${assertionIndex}`}
-                                                                    >
-                                                                        {
-                                                                            passChoice
-                                                                                .label[0]
-                                                                        }
-                                                                        <Feedback
-                                                                            className={`${passChoice
-                                                                                .label[1]
-                                                                                .offScreen &&
-                                                                                'off-screen'}`}
-                                                                        >
-                                                                            {
-                                                                                passChoice
-                                                                                    .label[1]
-                                                                                    .description
-                                                                            }
-                                                                        </Feedback>
-                                                                    </label>
-                                                                </td>
-                                                                {/*Failure cases*/}
-                                                                <td>
-                                                                    <input
-                                                                        key={`Missing__${commandIndex}__${assertionIndex}`}
-                                                                        type="radio"
-                                                                        id={`missing-${commandIndex}-${assertionIndex}`}
-                                                                        name={`result-${commandIndex}-${assertionIndex}`}
-                                                                        aria-labelledby={`missing-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
-                                                                        autoFocus={
-                                                                            isSubmitted &&
-                                                                            missingChoice.focus
-                                                                        }
-                                                                        defaultChecked={
-                                                                            missingChoice.checked
-                                                                        }
-                                                                        onClick={
-                                                                            missingChoice.click
-                                                                        }
-                                                                    />
-                                                                    <label
-                                                                        id={`missing-${commandIndex}-${assertionIndex}-label`}
-                                                                        htmlFor={`missing-${commandIndex}-${assertionIndex}`}
-                                                                    >
-                                                                        {
-                                                                            missingChoice
-                                                                                .label[0]
-                                                                        }
-                                                                        <Feedback
-                                                                            className={`${missingChoice
-                                                                                .label[1]
-                                                                                .offScreen &&
-                                                                                'off-screen'}`}
-                                                                        >
-                                                                            {
-                                                                                missingChoice
-                                                                                    .label[1]
-                                                                                    .description
-                                                                            }
-                                                                        </Feedback>
-                                                                    </label>
-
-                                                                    <input
-                                                                        key={`Fail__${commandIndex}__${assertionIndex}`}
-                                                                        type="radio"
-                                                                        id={`fail-${commandIndex}-${assertionIndex}`}
-                                                                        name={`result-${commandIndex}-${assertionIndex}`}
-                                                                        aria-labelledby={`fail-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
-                                                                        autoFocus={
-                                                                            isSubmitted &&
-                                                                            failureChoice.focus
-                                                                        }
-                                                                        defaultChecked={
-                                                                            failureChoice.checked
-                                                                        }
-                                                                        onClick={
-                                                                            failureChoice.click
-                                                                        }
-                                                                    />
-                                                                    <label
-                                                                        id={`fail-${commandIndex}-${assertionIndex}-label`}
-                                                                        htmlFor={`fail-${commandIndex}-${assertionIndex}`}
-                                                                    >
-                                                                        {
-                                                                            failureChoice
-                                                                                .label[0]
-                                                                        }
-                                                                        <Feedback
-                                                                            className={`${failureChoice
-                                                                                .label[1]
-                                                                                .offScreen &&
-                                                                                'off-screen'}`}
-                                                                        >
-                                                                            {
-                                                                                failureChoice
-                                                                                    .label[1]
-                                                                                    .description
-                                                                            }
-                                                                        </Feedback>
-                                                                    </label>
-                                                                </td>
-                                                            </tr>
-                                                        );
-                                                    }
-                                                )}
-                                            </tbody>
-                                        </Table>
+                                        <h4
+                                            id={`assertions-heading-command-${commandIndex}`}
+                                        >
+                                            Assertions {header}
+                                        </h4>
+                                        <AssertionFieldsetList
+                                            aria-labelledby={`assertions-heading-command-${commandIndex}`}
+                                        >
+                                            {assertions.map((data, index) => (
+                                                <Assertion
+                                                    key={`assertion-${commandIndex}-${index}`}
+                                                    data={data}
+                                                    assertionIndex={index}
+                                                    commandIndex={commandIndex}
+                                                />
+                                            ))}
+                                        </AssertionFieldsetList>
                                         {/*Unexpected Behaviors*/}
                                         <Fieldset
                                             id={`cmd-${commandIndex}-problems`}
                                         >
-                                            {unexpectedBehaviors.description[0]}
+                                            <legend>
+                                                {
+                                                    unexpectedBehaviors
+                                                        .description[0]
+                                                }
+                                            </legend>
                                             {isSubmitted && (
                                                 <Feedback
                                                     className={`${unexpectedBehaviors

From ed52a81f840a9eede9052c422129cb71f5862b7b Mon Sep 17 00:00:00 2001
From: Job van Achterberg <mail@3ode.nl>
Date: Fri, 10 Dec 2021 19:14:32 +0100
Subject: [PATCH 2/3] Remove redundant aria-labelledby; add h5 heading to
 assertion legends.

---
 client/components/TestRenderer/index.jsx | 38 +++++++++++++-----------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/client/components/TestRenderer/index.jsx b/client/components/TestRenderer/index.jsx
index 3fbc33781..eebd1e4cc 100644
--- a/client/components/TestRenderer/index.jsx
+++ b/client/components/TestRenderer/index.jsx
@@ -229,6 +229,10 @@ const AssertionFieldset = styled.fieldset`
         padding: 0.2em;
     }
 
+    h5 {
+        margin: 0;
+    }
+
     .assertion-input-group {
         margin-left: 0.5em;
         display: flex;
@@ -646,29 +650,26 @@ const TestRenderer = ({
 
         const [missingChoice, failureChoice] = failChoices;
 
-        const legendId = `command-assertion-${assertionIndex}-${commandIndex}-legend`;
-
         return (
             <li>
                 <AssertionFieldset className="command-assertions">
-                    <legend id={legendId}>
-                        {description[0]}
-                        {isSubmitted && (
-                            <Feedback
-                                className={`${description[1].required &&
-                                    'required'} ${description[1]
-                                    .highlightRequired &&
-                                    'highlight-required'}`}
-                            >
-                                {description[1].description}
-                            </Feedback>
-                        )}
+                    <legend>
+                        <h5>
+                            {description[0]}
+                            {isSubmitted && (
+                                <Feedback
+                                    className={`${description[1].required &&
+                                        'required'} ${description[1]
+                                        .highlightRequired &&
+                                        'highlight-required'}`}
+                                >
+                                    {description[1].description}
+                                </Feedback>
+                            )}
+                        </h5>
                     </legend>
 
-                    <ul
-                        aria-labelledby={legendId}
-                        className="assertion-input-group"
-                    >
+                    <ul className="assertion-input-group">
                         <li>
                             <input
                                 key={`Pass__${commandIndex}__${assertionIndex}`}
@@ -974,6 +975,7 @@ const TestRenderer = ({
                                                             more,
                                                             change
                                                         } = option;
+
                                                         return (
                                                             <Fragment
                                                                 key={`AssertionOptionsKey_${optionIndex}`}

From c29404129d48d1651552e944d8aa41cd667a855b Mon Sep 17 00:00:00 2001
From: Job van Achterberg <mail@3ode.nl>
Date: Fri, 10 Dec 2021 19:56:46 +0100
Subject: [PATCH 3/3] Remove superfluous list context. Remove unneeded
 aria-labelledby and group label around input.

---
 client/components/TestRenderer/index.jsx | 115 +++++++++++------------
 1 file changed, 54 insertions(+), 61 deletions(-)

diff --git a/client/components/TestRenderer/index.jsx b/client/components/TestRenderer/index.jsx
index eebd1e4cc..4799096cb 100644
--- a/client/components/TestRenderer/index.jsx
+++ b/client/components/TestRenderer/index.jsx
@@ -204,7 +204,7 @@ const ResultsBulletList = styled.ul`
 `;
 
 const AssertionFieldsetList = styled.ul`
-    > li:not(:first-child) {
+    > li {
         margin-top: 1em;
     }
 
@@ -233,20 +233,16 @@ const AssertionFieldset = styled.fieldset`
         margin: 0;
     }
 
-    .assertion-input-group {
+    .assertion-input-list {
         margin-left: 0.5em;
         display: flex;
     }
 
-    .assertion-input-group ul + ul {
-        margin-top: 2em;
-    }
-
-    .assertion-input-group > li + li {
+    .assertion-input-list > .assertion-input-group + .assertion-input-group {
         margin-left: 1em;
     }
 
-    li input {
+    input {
         margin-right: 0.5em;
     }
 `;
@@ -669,23 +665,20 @@ const TestRenderer = ({
                         </h5>
                     </legend>
 
-                    <ul className="assertion-input-group">
-                        <li>
-                            <input
-                                key={`Pass__${commandIndex}__${assertionIndex}`}
-                                type="radio"
-                                id={`pass-${commandIndex}-${assertionIndex}`}
-                                name={`result-${commandIndex}-${assertionIndex}`}
-                                aria-labelledby={`pass-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
-                                autoFocus={isSubmitted && passChoice.focus}
-                                defaultChecked={passChoice.checked}
-                                onClick={passChoice.click}
-                            />
-                            <label
-                                id={`pass-${commandIndex}-${assertionIndex}-label`}
-                                htmlFor={`pass-${commandIndex}-${assertionIndex}`}
-                            >
-                                {passChoice.label[0]}
+                    <div className="assertion-input-list">
+                        <div className="assertion-input-group">
+                            <label>
+                                <input
+                                    key={`Pass__${commandIndex}__${assertionIndex}`}
+                                    type="radio"
+                                    id={`pass-${commandIndex}-${assertionIndex}`}
+                                    name={`result-${commandIndex}-${assertionIndex}`}
+                                    autoFocus={isSubmitted && passChoice.focus}
+                                    defaultChecked={passChoice.checked}
+                                    onClick={passChoice.click}
+                                />
+                                {passChoice.label[0].trim()}
+                                <>&nbsp;</>
                                 <Feedback
                                     className={`${passChoice.label[1]
                                         .offScreen && 'off-screen'}`}
@@ -693,23 +686,23 @@ const TestRenderer = ({
                                     {passChoice.label[1].description}
                                 </Feedback>
                             </label>
-                        </li>
-                        <li>
-                            <input
-                                key={`Missing__${commandIndex}__${assertionIndex}`}
-                                type="radio"
-                                id={`missing-${commandIndex}-${assertionIndex}`}
-                                name={`result-${commandIndex}-${assertionIndex}`}
-                                aria-labelledby={`missing-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
-                                autoFocus={isSubmitted && missingChoice.focus}
-                                defaultChecked={missingChoice.checked}
-                                onClick={missingChoice.click}
-                            />
-                            <label
-                                id={`missing-${commandIndex}-${assertionIndex}-label`}
-                                htmlFor={`missing-${commandIndex}-${assertionIndex}`}
-                            >
-                                {missingChoice.label[0]}
+                        </div>
+                        <div className="assertion-input-group">
+                            <label>
+                                <input
+                                    key={`Missing__${commandIndex}__${assertionIndex}`}
+                                    type="radio"
+                                    id={`missing-${commandIndex}-${assertionIndex}`}
+                                    name={`result-${commandIndex}-${assertionIndex}`}
+                                    autoFocus={
+                                        isSubmitted && missingChoice.focus
+                                    }
+                                    defaultChecked={missingChoice.checked}
+                                    onClick={missingChoice.click}
+                                />
+
+                                {missingChoice.label[0].trim()}
+                                <>&nbsp;</>
                                 <Feedback
                                     className={`${missingChoice.label[1]
                                         .offScreen && 'off-screen'}`}
@@ -717,23 +710,23 @@ const TestRenderer = ({
                                     {missingChoice.label[1].description}
                                 </Feedback>
                             </label>
-                        </li>
-                        <li>
-                            <input
-                                key={`Fail__${commandIndex}__${assertionIndex}`}
-                                type="radio"
-                                id={`fail-${commandIndex}-${assertionIndex}`}
-                                name={`result-${commandIndex}-${assertionIndex}`}
-                                aria-labelledby={`fail-${commandIndex}-${assertionIndex}-label assertion-${commandIndex}-${assertionIndex}`}
-                                autoFocus={isSubmitted && failureChoice.focus}
-                                defaultChecked={failureChoice.checked}
-                                onClick={failureChoice.click}
-                            />
-                            <label
-                                id={`fail-${commandIndex}-${assertionIndex}-label`}
-                                htmlFor={`fail-${commandIndex}-${assertionIndex}`}
-                            >
-                                {failureChoice.label[0]}
+                        </div>
+                        <div className="assertion-input-group">
+                            <label>
+                                <input
+                                    key={`Fail__${commandIndex}__${assertionIndex}`}
+                                    type="radio"
+                                    id={`fail-${commandIndex}-${assertionIndex}`}
+                                    name={`result-${commandIndex}-${assertionIndex}`}
+                                    autoFocus={
+                                        isSubmitted && failureChoice.focus
+                                    }
+                                    defaultChecked={failureChoice.checked}
+                                    onClick={failureChoice.click}
+                                />
+
+                                {failureChoice.label[0].trim()}
+                                <>&nbsp;</>
                                 <Feedback
                                     className={`${failureChoice.label[1]
                                         .offScreen && 'off-screen'}`}
@@ -741,8 +734,8 @@ const TestRenderer = ({
                                     {failureChoice.label[1].description}
                                 </Feedback>
                             </label>
-                        </li>
-                    </ul>
+                        </div>
+                    </div>
                 </AssertionFieldset>
             </li>
         );