Repository: obsidian-tasks-group/obsidian-tasks
Pull request #2804 (2024-05-05 18:54:47)

refactor: split CSS class `tasks-modal-section`
# Description

- Split `tasks-modal-section` class into classes depending on their content (date, recurrence, description, etc)
- Remove some unused properties
- Use `<section>` elements to make the HTML code more explicit semantically
- Remove a nesting level (`<div>` at the top level of the modal)
- Remove redundant comments
- Slight change in the look of the modal

## Motivation and Context

Make possible extraction of components from `EditTask.scss` and `EditTask.svelte`. Now CSS class `tasks-modal-section` contains properties related to all the sections (dependencies, dates, description, etc) that makes that impossible.

## How has this been tested?

Some changes were covered by unit tests, but most of them verified by manual test in demo vault.

## Screenshots

Before             |  After
:-------------------------:|:-------------------------:
<img width="533" alt="Снимок экрана 2024-05-06 в 00 50 09" src="https://github.com/obsidian-tasks-group/obsidian-tasks/assets/93825870/8dbd3275-37dd-446d-994a-4e4b50285f0a"> | <img width="531" alt="Снимок экрана 2024-05-06 в 00 50 37" src="https://github.com/obsidian-tasks-group/obsidian-tasks/assets/93825870/0869d9fd-9797-45c9-bb3f-a3deb0e1a410">
 
## Types of changes

Internal changes:

- [x] **Refactor** (prefix: `refactor` - non-breaking change which only improves the design or structure of existing code, and making no changes to its external behaviour)

## Checklist

<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [ ] My change has adequate [Unit Test coverage](https://publish.obsidian.md/tasks-contributing/Testing/About+Testing).
  - No test coverage on the CSS code

## Terms

<!--
By submitting this pull request, you must agree to follow our
[contributing guide](https://publish.obsidian.md/tasks-contributing) and
[Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md).
Put an x in the boxes to confirm you agree.
-->

- [x] My contribution follows this project's [contributing guide](https://publish.obsidian.md/tasks-contributing)
- [x] I agree to follow this project's [Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md)



Patch:
diff --git a/src/ui/Dependency.scss b/src/ui/Dependency.scss
index ff7d7511..ae1ab44e 100644
--- a/src/ui/Dependency.scss
+++ b/src/ui/Dependency.scss
@@ -1,4 +1,6 @@
 .task-dependencies-container {
+    grid-column: 2;
+
     padding-bottom: 4px;
     padding-top: 4px;
     display: flex;
diff --git a/src/ui/EditTask.scss b/src/ui/EditTask.scss
index 5a157fa5..6874360c 100644
--- a/src/ui/EditTask.scss
+++ b/src/ui/EditTask.scss
@@ -1,9 +1,6 @@
 .tasks-modal {
-    .with-accesskeys {
-        .accesskey-first::first-letter, .accesskey {
-            text-decoration: underline;
-            text-underline-offset: 1pt;
-        }
+    > section {
+            margin-top: 8px;
     }
 
     hr {
@@ -15,20 +12,14 @@
     }
 }
 
-.tasks-modal-section {
-    + .tasks-modal-section {
-        margin-top: 8px;
-    }
-
-    label + input[type="checkbox"] {
-        margin-left: 0.67em;
-        top: 2px;
-    }
-
-    input[type="text"] {
-        width: 100%;
+.with-accesskeys {
+    .accesskey-first::first-letter, .accesskey {
+        text-decoration: underline;
+        text-underline-offset: 1pt;
     }
+}
 
+.tasks-modal-description-section {
     textarea {
         width: 100%;
         min-height: calc(var(--input-height) * 2);
@@ -37,46 +28,46 @@
     }
 }
 
-.tasks-modal-priorities {
+.tasks-modal-priority-section {
     display: grid;
     grid-template-columns: 6em auto auto auto;
     grid-column-gap: 0.5em;
     grid-row-gap: 0.15em;
 
-    span {
-        white-space: nowrap;
-    }
-
     > label {
         grid-row-start: 1;
         grid-row-end: 3;
     }
 
-    input + label {
-        font-size: var(--font-ui-small);
-        border-radius: var(--input-radius);
-        padding: 2px 3px;
-    }
+    .task-modal-priority-option-container {
+        white-space: nowrap;
 
-    input {
-        accent-color: var(--interactive-accent);
-    }
+        input + label {
+            font-size: var(--font-ui-small);
+            border-radius: var(--input-radius);
+            padding: 2px 3px;
+        }
 
-    input:focus + label {
-        box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
-        border-color: var(--background-modifier-border-focus);
-    }
+        input {
+            accent-color: var(--interactive-accent);
+        }
 
-    input:checked + label {
-        font-weight: bold;
-    }
+        input:focus + label {
+            box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
+            border-color: var(--background-modifier-border-focus);
+        }
+
+        input:checked + label {
+            font-weight: bold;
+        }
 
-    input:not(:checked) + label > span:nth-child(4) {
-        filter: grayscale(100%) opacity(60%);
+        input:not(:checked) + label > span:nth-child(4) {
+            filter: grayscale(100%) opacity(60%);
+        }
     }
 }
 
-.tasks-modal-dates {
+.tasks-modal-dates-section {
     display: grid;
     grid-template-columns: 6.0em auto;
     grid-auto-columns: 1fr;
@@ -88,10 +79,6 @@
         grid-column: 1;
     }
 
-    .input {
-        grid-column: 2;
-    }
-
     .input[type=text] {
         min-width: 15em;
     }
@@ -101,13 +88,14 @@
         font-size: var(--font-ui-small);
     }
 
-    .results-dependency {
-        grid-column: 2;
-    }
-
     .future-dates-only {
         grid-column-start: 1;
         grid-column-end: 3;
+
+        input[type="checkbox"] {
+            margin-left: 0.67em;
+            top: 2px;
+        }
     }
 
     select {
@@ -116,7 +104,26 @@
     }
 }
 
-.tasks-modal-buttons {
+.tasks-modal-dependencies-section {
+    display: grid;
+    grid-template-columns: 6.0em auto;
+    grid-auto-columns: 1fr;
+
+    label {
+        margin-top: 6px;
+    }
+
+    input[type="text"] {
+        grid-column: 2;
+        width: 100%;
+    }
+
+    .results-dependency {
+        grid-column: 2;
+    }
+}
+
+.tasks-modal-button-section {
     position: sticky;
     bottom: 0;
     background-color: var(--modal-background);
@@ -133,18 +140,18 @@
 }
 
 @media (max-width: 649px) {
-    .tasks-modal-priorities {
+    .tasks-modal-priority-section {
         grid-template-columns: 4em 7.5em 5em;
         margin-bottom: -10px;
     }
 
-    .tasks-modal-priorities > label {
+    .tasks-modal-priority-section > label {
         grid-row: 1 / span 7;
     }
 }
 
 @media (max-width: 499px) {
-    .tasks-modal-dates {
+    .tasks-modal-dates-section {
         grid-template-columns: 1fr;
         grid-auto-columns: auto;
 
@@ -153,43 +160,43 @@
         }
     }
 
-    .tasks-modal-dates > label {
+    .tasks-modal-dates-section > label {
         margin: 0;
     }
 
-    .tasks-modal-dates > .input, .tasks-modal-dates > .results {
+    .tasks-modal-dates-section > .input, .tasks-modal-dates-section > .results {
         grid-column: 1;
     }
 
-    .tasks-modal-dates > div {
+    .tasks-modal-dates-section > div {
         grid-column-end: 1;
     }
 }
 
 @media (max-width: 399px) {
-    .tasks-modal-dates {
+    .tasks-modal-dates-section {
         select {
             grid-column: 1;
             width: auto;
         }
     }
 
-    .tasks-modal-priorities {
+    .tasks-modal-priority-section {
         grid-template-columns: 4em auto;
     }
 
-    .tasks-modal-priorities > label {
+    .tasks-modal-priority-section > label {
         grid-row: 1 / span 7;
     }
 }
 
 @media (max-width: 259px) {
-    .tasks-modal-priorities {
+    .tasks-modal-priority-section {
         grid-template-columns: 1fr;
         margin-bottom: 0;
     }
 
-    .tasks-modal-priorities > label {
+    .tasks-modal-priority-section > label {
         grid-row: 1;
     }
 }
diff --git a/src/ui/EditTask.svelte b/src/ui/EditTask.svelte
index e2964ec8..b01ea70c 100644
--- a/src/ui/EditTask.svelte
+++ b/src/ui/EditTask.svelte
@@ -420,252 +420,245 @@ Availability of access keys:
 - -: Cancelled
 -->
 
-<div class="tasks-modal">
-    <form on:submit|preventDefault={_onSubmit} class:with-accesskeys={withAccessKeys}>
-        <!-- NEW_TASK_FIELD_EDIT_REQUIRED -->
+<form class="tasks-modal" class:with-accesskeys={withAccessKeys} on:submit|preventDefault={_onSubmit}>
+    <!-- NEW_TASK_FIELD_EDIT_REQUIRED -->
+
+    <!-- --------------------------------------------------------------------------- -->
+    <!--  Description  -->
+    <!-- --------------------------------------------------------------------------- -->
+    <section class="tasks-modal-description-section">
+        <label for="description">Descrip<span class="accesskey">t</span>ion</label>
+        <!-- svelte-ignore a11y-accesskey -->
+        <textarea
+            bind:value={editableTask.description}
+            bind:this={descriptionInput}
+            id="description"
+            class="tasks-modal-description"
+            placeholder="Take out the trash"
+            accesskey={accesskey('t')}
+            on:keydown={_onDescriptionKeyDown}
+            on:paste={_removeLinebreaksFromDescription}
+            on:drop={_removeLinebreaksFromDescription}
+        />
+    </section>
+
+    <!-- --------------------------------------------------------------------------- -->
+    <!--  Priority  -->
+    <!-- --------------------------------------------------------------------------- -->
+    <section class="tasks-modal-priority-section" on:keyup={_onPriorityKeyup}>
+        <label for="priority-{editableTask.priority}">Priority</label>
+        {#each priorityOptions as { value, label, symbol, accessKey, accessKeyIndex }}
+            <div class="task-modal-priority-option-container">
+                <!-- svelte-ignore a11y-accesskey -->
+                <input
+                    type="radio"
+                    id="priority-{value}"
+                    {value}
+                    bind:group={editableTask.priority}
+                    accesskey={accesskey(accessKey)}
+                />
+                <label for="priority-{value}">
+                    <span>{label.substring(0, accessKeyIndex)}</span><span class="accesskey"
+                        >{label.substring(accessKeyIndex, accessKeyIndex + 1)}</span
+                    ><span>{label.substring(accessKeyIndex + 1)}</span>
+                    {#if symbol && symbol.charCodeAt(0) >= 0x100}
+                        <span>{symbol}</span>
+                    {/if}
+                </label>
+            </div>
+        {/each}
+    </section>
+
+    <!-- --------------------------------------------------------------------------- -->
+    <!--  Recurrence  -->
+    <!-- --------------------------------------------------------------------------- -->
+    <section class="tasks-modal-dates-section">
+        <label for="recurrence" class="accesskey-first">Recurs</label>
+        <!-- svelte-ignore a11y-accesskey -->
+        <input
+            bind:value={editableTask.recurrenceRule}
+            id="recurrence"
+            type="text"
+            class:tasks-modal-error={!isRecurrenceValid}
+            class="input"
+            placeholder="Try 'every day when done'"
+            accesskey={accesskey('r')}
+        />
+        <code class="results">{recurrenceSymbol} {@html parsedRecurrence}</code>
+    </section>
+
+    <!-- --------------------------------------------------------------------------- -->
+    <!--  Dates  -->
+    <!-- --------------------------------------------------------------------------- -->
+    <hr />
+    <section class="tasks-modal-dates-section">
+        <!-- --------------------------------------------------------------------------- -->
+        <!--  Due Date  -->
+        <!-- --------------------------------------------------------------------------- -->
+        <label for="due" class="accesskey-first">Due</label>
+        <DateEditor
+            id="due"
+            dateSymbol={dueDateSymbol}
+            bind:date={editableTask.dueDate}
+            bind:isDateValid={isDueDateValid}
+            forwardOnly={editableTask.forwardOnly}
+            accesskey={accesskey('d')}
+        />
 
         <!-- --------------------------------------------------------------------------- -->
-        <!--  Description  -->
+        <!--  Scheduled Date  -->
         <!-- --------------------------------------------------------------------------- -->
-        <div class="tasks-modal-section">
-            <label for="description">Descrip<span class="accesskey">t</span>ion</label>
-            <!-- svelte-ignore a11y-accesskey -->
-            <textarea
-                bind:value={editableTask.description}
-                bind:this={descriptionInput}
-                id="description"
-                class="tasks-modal-description"
-                placeholder="Take out the trash"
-                accesskey={accesskey('t')}
-                on:keydown={_onDescriptionKeyDown}
-                on:paste={_removeLinebreaksFromDescription}
-                on:drop={_removeLinebreaksFromDescription}
-            />
-        </div>
+        <label for="scheduled" class="accesskey-first">Scheduled</label>
+        <DateEditor
+            id="scheduled"
+            dateSymbol={scheduledDateSymbol}
+            bind:date={editableTask.scheduledDate}
+            bind:isDateValid={isScheduledDateValid}
+            forwardOnly={editableTask.forwardOnly}
+            accesskey={accesskey('s')}
+        />
 
         <!-- --------------------------------------------------------------------------- -->
-        <!--  Priority  -->
+        <!--  Start Date  -->
         <!-- --------------------------------------------------------------------------- -->
-        <div class="tasks-modal-section tasks-modal-priorities" on:keyup={_onPriorityKeyup}>
-            <label for="priority-{editableTask.priority}">Priority</label>
-            {#each priorityOptions as { value, label, symbol, accessKey, accessKeyIndex }}
-                <span>
-                    <!-- svelte-ignore a11y-accesskey -->
-                    <input
-                        type="radio"
-                        id="priority-{value}"
-                        {value}
-                        bind:group={editableTask.priority}
-                        accesskey={accesskey(accessKey)}
-                    />
-                    <label for="priority-{value}">
-                        <span>{label.substring(0, accessKeyIndex)}</span><span class="accesskey"
-                            >{label.substring(accessKeyIndex, accessKeyIndex + 1)}</span
-                        ><span>{label.substring(accessKeyIndex + 1)}</span>
-                        {#if symbol && symbol.charCodeAt(0) >= 0x100}
-                            <span>{symbol}</span>
-                        {/if}
-                    </label>
-                </span>
-            {/each}
-        </div>
+        <label for="start">St<span class="accesskey">a</span>rt</label>
+        <DateEditor
+            id="start"
+            dateSymbol={startDateSymbol}
+            bind:date={editableTask.startDate}
+            bind:isDateValid={isStartDateValid}
+            forwardOnly={editableTask.forwardOnly}
+            accesskey={accesskey('a')}
+        />
 
         <!-- --------------------------------------------------------------------------- -->
-        <!--  Recurrence  -->
+        <!--  Only future dates  -->
         <!-- --------------------------------------------------------------------------- -->
-        <div class="tasks-modal-section tasks-modal-dates">
-            <!-- --------------------------------------------------------------------------- -->
-            <!--  Recurrence  -->
-            <!-- --------------------------------------------------------------------------- -->
-            <label for="recurrence" class="accesskey-first">Recurs</label>
+        <div class="future-dates-only">
+            <label for="forwardOnly"
+                >Only
+                <span class="accesskey-first">future</span> dates:</label
+            >
             <!-- svelte-ignore a11y-accesskey -->
             <input
-                bind:value={editableTask.recurrenceRule}
-                id="recurrence"
-                type="text"
-                class:tasks-modal-error={!isRecurrenceValid}
-                class="input"
-                placeholder="Try 'every day when done'"
-                accesskey={accesskey('r')}
+                bind:checked={editableTask.forwardOnly}
+                id="forwardOnly"
+                type="checkbox"
+                class="input task-list-item-checkbox tasks-modal-checkbox"
+                accesskey={accesskey('f')}
             />
-            <code class="results">{recurrenceSymbol} {@html parsedRecurrence}</code>
         </div>
-
-        <!-- --------------------------------------------------------------------------- -->
-        <!--  Dates  -->
-        <!-- --------------------------------------------------------------------------- -->
-        <hr />
-        <div class="tasks-modal-section tasks-modal-dates">
-            <!-- --------------------------------------------------------------------------- -->
-            <!--  Due Date  -->
-            <!-- --------------------------------------------------------------------------- -->
-            <label for="due" class="accesskey-first">Due</label>
-            <DateEditor
-                id="due"
-                dateSymbol={dueDateSymbol}
-                bind:date={editableTask.dueDate}
-                bind:isDateValid={isDueDateValid}
-                forwardOnly={editableTask.forwardOnly}
-                accesskey={accesskey('d')}
-            />
-
+    </section>
+
+    <!-- --------------------------------------------------------------------------- -->
+    <!--  Dependencies  -->
+    <!-- --------------------------------------------------------------------------- -->
+    <hr />
+    <section class="tasks-modal-dependencies-section">
+        {#if allTasks.length > 0 && mountComplete}
             <!-- --------------------------------------------------------------------------- -->
-            <!--  Scheduled Date  -->
+            <!--  Blocked By Tasks  -->
             <!-- --------------------------------------------------------------------------- -->
-            <label for="scheduled" class="accesskey-first">Scheduled</label>
-            <DateEditor
-                id="scheduled"
-                dateSymbol={scheduledDateSymbol}
-                bind:date={editableTask.scheduledDate}
-                bind:isDateValid={isScheduledDateValid}
-                forwardOnly={editableTask.forwardOnly}
-                accesskey={accesskey('s')}
+            <label for="blockedBy" class="accesskey-first">Before this</label>
+            <Dependency
+                type="blockedBy"
+                {task}
+                {editableTask}
+                {allTasks}
+                {_onDescriptionKeyDown}
+                {accesskey}
+                accesskeyLetter="b"
+                placeholder="Search for tasks that the task being edited depends on..."
             />
 
             <!-- --------------------------------------------------------------------------- -->
-            <!--  Start Date  -->
+            <!--  Blocking Tasks  -->
             <!-- --------------------------------------------------------------------------- -->
-            <label for="start">St<span class="accesskey">a</span>rt</label>
-            <DateEditor
-                id="start"
-                dateSymbol={startDateSymbol}
-                bind:date={editableTask.startDate}
-                bind:isDateValid={isStartDateValid}
-                forwardOnly={editableTask.forwardOnly}
-                accesskey={accesskey('a')}
+            <label for="blocking">Aft<span class="accesskey">e</span>r this</label>
+            <Dependency
+                type="blocking"
+                {task}
+                {editableTask}
+                {allTasks}
+                {_onDescriptionKeyDown}
+                {accesskey}
+                accesskeyLetter="e"
+                placeholder="Search for tasks that depend on this task being done..."
             />
+        {:else}
+            <div><i>Blocking and blocked by fields are disabled when vault tasks is empty</i></div>
+        {/if}
+    </section>
 
-            <!-- --------------------------------------------------------------------------- -->
-            <!--  Only future dates  -->
-            <!-- --------------------------------------------------------------------------- -->
-            <div class="future-dates-only">
-                <label for="forwardOnly"
-                    >Only
-                    <span class="accesskey-first">future</span> dates:</label
-                >
-                <!-- svelte-ignore a11y-accesskey -->
-                <input
-                    bind:checked={editableTask.forwardOnly}
-                    id="forwardOnly"
-                    type="checkbox"
-                    class="input task-list-item-checkbox tasks-modal-checkbox"
-                    accesskey={accesskey('f')}
-                />
-            </div>
-        </div>
-
+    <hr />
+    <section class="tasks-modal-dates-section">
         <!-- --------------------------------------------------------------------------- -->
-        <!--  Dependencies  -->
+        <!--  Status  -->
         <!-- --------------------------------------------------------------------------- -->
-        <hr />
-        <div class="tasks-modal-section tasks-modal-dates">
-            {#if allTasks.length > 0 && mountComplete}
-                <!-- --------------------------------------------------------------------------- -->
-                <!--  Blocked By Tasks  -->
-                <!-- --------------------------------------------------------------------------- -->
-                <label for="blockedBy" class="accesskey-first">Before this</label>
-                <Dependency
-                    type="blockedBy"
-                    {task}
-                    {editableTask}
-                    {allTasks}
-                    {_onDescriptionKeyDown}
-                    {accesskey}
-                    accesskeyLetter="b"
-                    placeholder="Search for tasks that the task being edited depends on..."
-                />
-
-                <!-- --------------------------------------------------------------------------- -->
-                <!--  Blocking Tasks  -->
-                <!-- --------------------------------------------------------------------------- -->
-                <label for="blocking">Aft<span class="accesskey">e</span>r this</label>
-                <Dependency
-                    type="blocking"
-                    {task}
-                    {editableTask}
-                    {allTasks}
-                    {_onDescriptionKeyDown}
-                    {accesskey}
-                    accesskeyLetter="e"
-                    placeholder="Search for tasks that depend on this task being done..."
-                />
-            {:else}
-                <div><i>Blocking and blocked by fields are disabled when vault tasks is empty</i></div>
-            {/if}
-        </div>
+        <label for="status">Stat<span class="accesskey">u</span>s</label>
+        <!-- svelte-ignore a11y-accesskey -->
+        <select
+            bind:value={statusSymbol}
+            on:change={_onStatusChange}
+            id="status-type"
+            class="dropdown"
+            accesskey={accesskey('u')}
+        >
+            {#each statusOptions as status}
+                <option value={status.symbol}>{status.name} [{status.symbol}]</option>
+            {/each}
+        </select>
 
         <!-- --------------------------------------------------------------------------- -->
-        <!--  Status  -->
+        <!--  Created Date  -->
         <!-- --------------------------------------------------------------------------- -->
-        <hr />
-        <div class="tasks-modal-section tasks-modal-dates">
-            <label for="status">Stat<span class="accesskey">u</span>s</label>
-            <!-- svelte-ignore a11y-accesskey -->
-            <select
-                bind:value={statusSymbol}
-                on:change={_onStatusChange}
-                id="status-type"
-                class="dropdown"
-                accesskey={accesskey('u')}
-            >
-                {#each statusOptions as status}
-                    <option value={status.symbol}>{status.name} [{status.symbol}]</option>
-                {/each}
-            </select>
-        </div>
-
-        <div class="tasks-modal-section tasks-modal-dates">
-            <!-- --------------------------------------------------------------------------- -->
-            <!--  Created Date  -->
-            <!-- --------------------------------------------------------------------------- -->
-            <label for="created" class="accesskey-first">Created</label>
-            <DateEditor
-                id="created"
-                dateSymbol={createdDateSymbol}
-                bind:date={editableTask.createdDate}
-                bind:isDateValid={isCreatedDateValid}
-                forwardOnly={editableTask.forwardOnly}
-                accesskey={accesskey('c')}
-            />
+        <label for="created" class="accesskey-first">Created</label>
+        <DateEditor
+            id="created"
+            dateSymbol={createdDateSymbol}
+            bind:date={editableTask.createdDate}
+            bind:isDateValid={isCreatedDateValid}
+            forwardOnly={editableTask.forwardOnly}
+            accesskey={accesskey('c')}
+        />
 
-            <!-- --------------------------------------------------------------------------- -->
-            <!--  Done Date  -->
-            <!-- --------------------------------------------------------------------------- -->
-            {#if withAccessKeys}
-                <label for="done">Done (<span class="accesskey">x</span>)</label>
-            {:else}
-                <label for="done">Done</label>
-            {/if}
-            <DateEditor
-                id="done"
-                dateSymbol={doneDateSymbol}
-                bind:date={editableTask.doneDate}
-                bind:isDateValid={isDoneDateValid}
-                forwardOnly={editableTask.forwardOnly}
-                accesskey={accesskey('x')}
-            />
-
-            <!-- --------------------------------------------------------------------------- -->
-            <!--  Cancelled Date  -->
-            <!-- --------------------------------------------------------------------------- -->
-            {#if withAccessKeys}
-                <label for="cancelled">Cancelled (<span class="accesskey">-</span>)</label>
-            {:else}
-                <label for="cancelled">Cancelled</label>
-            {/if}
-            <DateEditor
-                id="cancelled"
-                dateSymbol={cancelledDateSymbol}
-                bind:date={editableTask.cancelledDate}
-                bind:isDateValid={isCancelledDateValid}
-                forwardOnly={editableTask.forwardOnly}
-                accesskey={accesskey('-')}
-            />
-        </div>
+        <!-- --------------------------------------------------------------------------- -->
+        <!--  Done Date  -->
+        <!-- --------------------------------------------------------------------------- -->
+        {#if withAccessKeys}
+            <label for="done">Done (<span class="accesskey">x</span>)</label>
+        {:else}
+            <label for="done">Done</label>
+        {/if}
+        <DateEditor
+            id="done"
+            dateSymbol={doneDateSymbol}
+            bind:date={editableTask.doneDate}
+            bind:isDateValid={isDoneDateValid}
+            forwardOnly={editableTask.forwardOnly}
+            accesskey={accesskey('x')}
+        />
 
-        <div class="tasks-modal-section tasks-modal-buttons">
-            <button disabled={!formIsValid} type="submit" class="mod-cta">Apply </button>
-            <button type="button" on:click={_onClose}>Cancel</button>
-        </div>
-    </form>
-</div>
+        <!-- --------------------------------------------------------------------------- -->
+        <!--  Cancelled Date  -->
+        <!-- --------------------------------------------------------------------------- -->
+        {#if withAccessKeys}
+            <label for="cancelled">Cancelled (<span class="accesskey">-</span>)</label>
+        {:else}
+            <label for="cancelled">Cancelled</label>
+        {/if}
+        <DateEditor
+            id="cancelled"
+            dateSymbol={cancelledDateSymbol}
+            bind:date={editableTask.cancelledDate}
+            bind:isDateValid={isCancelledDateValid}
+            forwardOnly={editableTask.forwardOnly}
+            accesskey={accesskey('-')}
+        />
+    </section>
+
+    <section class="tasks-modal-button-section">
+        <button disabled={!formIsValid} type="submit" class="mod-cta">Apply </button>
+        <button type="button" on:click={_onClose}>Cancel</button>
+    </section>
+</form>


Test patch:
diff --git a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
index c82b2988..c2442d3f 100644
--- a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
+++ b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
@@ -1,226 +1,222 @@
 <div>
-  <div class="tasks-modal">
-    <form class="with-accesskeys">
-      <div class="tasks-modal-section">
-        <label for="description">
-          Descrip
-          <span class="accesskey">t</span>
-          ion
+  <form class="tasks-modal with-accesskeys">
+    <section class="tasks-modal-description-section">
+      <label for="description">
+        Descrip
+        <span class="accesskey">t</span>
+        ion
+      </label>
+      <textarea
+        id="description"
+        class="tasks-modal-description"
+        placeholder="Take out the trash"
+        accesskey="t"></textarea>
+    </section>
+    <section class="tasks-modal-priority-section">
+      <label for="priority-none">Priority</label>
+      <div class="task-modal-priority-option-container">
+        <input type="radio" id="priority-lowest" value="lowest" accesskey="o" />
+        <label for="priority-lowest">
+          <span>L</span>
+          <span class="accesskey">o</span>
+          <span>west</span>
+          <span>⏬</span>
         </label>
-        <textarea
-          id="description"
-          class="tasks-modal-description"
-          placeholder="Take out the trash"
-          accesskey="t"></textarea>
       </div>
-      <div class="tasks-modal-section tasks-modal-priorities">
-        <label for="priority-none">Priority</label>
-        <span>
-          <input type="radio" id="priority-lowest" value="lowest" accesskey="o" />
-          <label for="priority-lowest">
-            <span>L</span>
-            <span class="accesskey">o</span>
-            <span>west</span>
-            <span>⏬</span>
-          </label>
-        </span>
-        <span>
-          <input type="radio" id="priority-low" value="low" accesskey="l" />
-          <label for="priority-low">
-            <span></span>
-            <span class="accesskey">L</span>
-            <span>ow</span>
-            <span>🔽</span>
-          </label>
-        </span>
-        <span>
-          <input type="radio" id="priority-none" value="none" accesskey="n" />
-          <label for="priority-none">
-            <span></span>
-            <span class="accesskey">N</span>
-            <span>ormal</span>
-          </label>
-        </span>
-        <span>
-          <input type="radio" id="priority-medium" value="medium" accesskey="m" />
-          <label for="priority-medium">
-            <span></span>
-            <span class="accesskey">M</span>
-            <span>edium</span>
-            <span>🔼</span>
-          </label>
-        </span>
-        <span>
-          <input type="radio" id="priority-high" value="high" accesskey="h" />
-          <label for="priority-high">
-            <span></span>
-            <span class="accesskey">H</span>
-            <span>igh</span>
-            <span>⏫</span>
-          </label>
-        </span>
-        <span>
-          <input type="radio" id="priority-highest" value="highest" accesskey="i" />
-          <label for="priority-highest">
-            <span>H</span>
-            <span class="accesskey">i</span>
-            <span>ghest</span>
-            <span>🔺</span>
-          </label>
-        </span>
-      </div>
-      <div class="tasks-modal-section tasks-modal-dates">
-        <label for="recurrence" class="accesskey-first">Recurs</label>
-        <input id="recurrence" type="text" class="input" placeholder="Try 'every day when done'" accesskey="r" />
-        <code class="results">
-          🔁
-          <i>not recurring</i>
-        </code>
-      </div>
-      <hr />
-      <div class="tasks-modal-section tasks-modal-dates">
-        <label for="due" class="accesskey-first">Due</label>
-        <input id="due" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="d" />
-        <code class="results">
-          📅
-          <i>no due date</i>
-        </code>
-        <label for="scheduled" class="accesskey-first">Scheduled</label>
-        <input id="scheduled" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="s" />
-        <code class="results">
-          ⏳
-          <i>no scheduled date</i>
-        </code>
-        <label for="start">
-          St
-          <span class="accesskey">a</span>
-          rt
+      <div class="task-modal-priority-option-container">
+        <input type="radio" id="priority-low" value="low" accesskey="l" />
+        <label for="priority-low">
+          <span></span>
+          <span class="accesskey">L</span>
+          <span>ow</span>
+          <span>🔽</span>
         </label>
-        <input id="start" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="a" />
-        <code class="results">
-          🛫
-          <i>no start date</i>
-        </code>
-        <div class="future-dates-only">
-          <label for="forwardOnly">
-            Only
-            <span class="accesskey-first">future</span>
-            dates:
-          </label>
-          <input
-            id="forwardOnly"
-            type="checkbox"
-            class="input task-list-item-checkbox tasks-modal-checkbox"
-            accesskey="f" />
-        </div>
       </div>
-      <hr />
-      <div class="tasks-modal-section tasks-modal-dates">
-        <label for="blockedBy" class="accesskey-first">Before this</label>
-        <span class="input">
-          <input
-            accesskey="b"
-            id="blockedBy"
-            class="input"
-            type="text"
-            placeholder="Search for tasks that the task being edited depends on..." />
-          <iframe
-            style="
-              display: block;
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              overflow: hidden;
-              border: 0;
-              opacity: 0;
-              pointer-events: none;
-              z-index: -1;
-            "
-            aria-hidden="true"
-            tabindex="-1"
-            src="about:blank"></iframe>
-        </span>
-        <div class="task-dependencies-container results-dependency"></div>
-        <label for="blocking">
-          Aft
-          <span class="accesskey">e</span>
-          r this
+      <div class="task-modal-priority-option-container">
+        <input type="radio" id="priority-none" value="none" accesskey="n" />
+        <label for="priority-none">
+          <span></span>
+          <span class="accesskey">N</span>
+          <span>ormal</span>
         </label>
-        <span class="input">
-          <input
-            accesskey="e"
-            id="blocking"
-            class="input"
-            type="text"
-            placeholder="Search for tasks that depend on this task being done..." />
-          <iframe
-            style="
-              display: block;
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 100%;
-              height: 100%;
-              overflow: hidden;
-              border: 0;
-              opacity: 0;
-              pointer-events: none;
-              z-index: -1;
-            "
-            aria-hidden="true"
-            tabindex="-1"
-            src="about:blank"></iframe>
-        </span>
-        <div class="task-dependencies-container results-dependency"></div>
       </div>
-      <hr />
-      <div class="tasks-modal-section tasks-modal-dates">
-        <label for="status">
-          Stat
-          <span class="accesskey">u</span>
-          s
+      <div class="task-modal-priority-option-container">
+        <input type="radio" id="priority-medium" value="medium" accesskey="m" />
+        <label for="priority-medium">
+          <span></span>
+          <span class="accesskey">M</span>
+          <span>edium</span>
+          <span>🔼</span>
         </label>
-        <select id="status-type" class="dropdown" accesskey="u">
-          <option value=" ">Todo [ ]</option>
-          <option value="/">In Progress [/]</option>
-          <option value="x">Done [x]</option>
-          <option value="-">Cancelled [-]</option>
-        </select>
       </div>
-      <div class="tasks-modal-section tasks-modal-dates">
-        <label for="created" class="accesskey-first">Created</label>
-        <input id="created" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="c" />
-        <code class="results">
-          ➕
-          <i>no created date</i>
-        </code>
-        <label for="done">
-          Done (
-          <span class="accesskey">x</span>
-          )
+      <div class="task-modal-priority-option-container">
+        <input type="radio" id="priority-high" value="high" accesskey="h" />
+        <label for="priority-high">
+          <span></span>
+          <span class="accesskey">H</span>
+          <span>igh</span>
+          <span>⏫</span>
         </label>
-        <input id="done" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="x" />
-        <code class="results">
-          ✅
-          <i>no done date</i>
-        </code>
-        <label for="cancelled">
-          Cancelled (
-          <span class="accesskey">-</span>
-          )
+      </div>
+      <div class="task-modal-priority-option-container">
+        <input type="radio" id="priority-highest" value="highest" accesskey="i" />
+        <label for="priority-highest">
+          <span>H</span>
+          <span class="accesskey">i</span>
+          <span>ghest</span>
+          <span>🔺</span>
         </label>
-        <input id="cancelled" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="-" />
-        <code class="results">
-          ❌
-          <i>no cancelled date</i>
-        </code>
       </div>
-      <div class="tasks-modal-section tasks-modal-buttons">
-        <button type="submit" class="mod-cta">Apply</button>
-        <button type="button">Cancel</button>
+    </section>
+    <section class="tasks-modal-dates-section">
+      <label for="recurrence" class="accesskey-first">Recurs</label>
+      <input id="recurrence" type="text" class="input" placeholder="Try 'every day when done'" accesskey="r" />
+      <code class="results">
+        🔁
+        <i>not recurring</i>
+      </code>
+    </section>
+    <hr />
+    <section class="tasks-modal-dates-section">
+      <label for="due" class="accesskey-first">Due</label>
+      <input id="due" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="d" />
+      <code class="results">
+        📅
+        <i>no due date</i>
+      </code>
+      <label for="scheduled" class="accesskey-first">Scheduled</label>
+      <input id="scheduled" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="s" />
+      <code class="results">
+        ⏳
+        <i>no scheduled date</i>
+      </code>
+      <label for="start">
+        St
+        <span class="accesskey">a</span>
+        rt
+      </label>
+      <input id="start" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="a" />
+      <code class="results">
+        🛫
+        <i>no start date</i>
+      </code>
+      <div class="future-dates-only">
+        <label for="forwardOnly">
+          Only
+          <span class="accesskey-first">future</span>
+          dates:
+        </label>
+        <input
+          id="forwardOnly"
+          type="checkbox"
+          class="input task-list-item-checkbox tasks-modal-checkbox"
+          accesskey="f" />
       </div>
-    </form>
-  </div>
+    </section>
+    <hr />
+    <section class="tasks-modal-dependencies-section">
+      <label for="blockedBy" class="accesskey-first">Before this</label>
+      <span class="input">
+        <input
+          accesskey="b"
+          id="blockedBy"
+          class="input"
+          type="text"
+          placeholder="Search for tasks that the task being edited depends on..." />
+        <iframe
+          style="
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            border: 0;
+            opacity: 0;
+            pointer-events: none;
+            z-index: -1;
+          "
+          aria-hidden="true"
+          tabindex="-1"
+          src="about:blank"></iframe>
+      </span>
+      <div class="task-dependencies-container results-dependency"></div>
+      <label for="blocking">
+        Aft
+        <span class="accesskey">e</span>
+        r this
+      </label>
+      <span class="input">
+        <input
+          accesskey="e"
+          id="blocking"
+          class="input"
+          type="text"
+          placeholder="Search for tasks that depend on this task being done..." />
+        <iframe
+          style="
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            border: 0;
+            opacity: 0;
+            pointer-events: none;
+            z-index: -1;
+          "
+          aria-hidden="true"
+          tabindex="-1"
+          src="about:blank"></iframe>
+      </span>
+      <div class="task-dependencies-container results-dependency"></div>
+    </section>
+    <hr />
+    <section class="tasks-modal-dates-section">
+      <label for="status">
+        Stat
+        <span class="accesskey">u</span>
+        s
+      </label>
+      <select id="status-type" class="dropdown" accesskey="u">
+        <option value=" ">Todo [ ]</option>
+        <option value="/">In Progress [/]</option>
+        <option value="x">Done [x]</option>
+        <option value="-">Cancelled [-]</option>
+      </select>
+      <label for="created" class="accesskey-first">Created</label>
+      <input id="created" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="c" />
+      <code class="results">
+        ➕
+        <i>no created date</i>
+      </code>
+      <label for="done">
+        Done (
+        <span class="accesskey">x</span>
+        )
+      </label>
+      <input id="done" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="x" />
+      <code class="results">
+        ✅
+        <i>no done date</i>
+      </code>
+      <label for="cancelled">
+        Cancelled (
+        <span class="accesskey">-</span>
+        )
+      </label>
+      <input id="cancelled" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="-" />
+      <code class="results">
+        ❌
+        <i>no cancelled date</i>
+      </code>
+    </section>
+    <section class="tasks-modal-button-section">
+      <button type="submit" class="mod-cta">Apply</button>
+      <button type="button">Cancel</button>
+    </section>
+  </form>
 </div>