feat: Add access keys for Created, Done and Cancelled

docs/Introduction.md

@@ -13,6 +13,8 @@ _In recent [releases](https://github.com/obsidian-tasks-group/obsidian-tasks/rel
     Move the older ones down to the top of the comment block below...
 -->
 
+- X.Y.Z:
+  - Add access keys for Created, Done and Cancelled dates in [[Create or edit Task]].
 - 7.0.0:
   - Major improvements to [[Combining Filters]] with Boolean combinations. See [[Combining Filters#Appendix Changes to Boolean filters in Tasks 7.0.0|the appendix]] for details.
   - Add documentation page [[Resources]], with links to write-ups,  talks and sample vaults from users.

src/ui/EditTask.scss

@@ -82,7 +82,7 @@
 
 .tasks-modal-dates {
     display: grid;
-    grid-template-columns: 5.5em auto;
+    grid-template-columns: 6.0em auto;
     column-gap: .5em;
     row-gap: 5px;
 }

src/ui/EditTask.svelte

@@ -393,7 +393,7 @@
 Availability of access keys:
 - A: Start
 - B: Before this
-- C:
+- C: Created
 - D: Due
 - E: After this
 - F: Only future dates
@@ -414,9 +414,10 @@ Availability of access keys:
 - U: Status
 - V:
 - W:
-- X:
+- X: Done
 - Y:
 - Z:
+- -: Cancelled
 -->
 
 <div class="tasks-modal">
@@ -617,40 +618,40 @@ Availability of access keys:
             <!-- --------------------------------------------------------------------------- -->
             <!--  Created Date  -->
             <!-- --------------------------------------------------------------------------- -->
-            <label for="created">Created</label>
+            <label for="created" class="accesskey-first">Created</label>
             <DateEditor
                 id="created"
                 dateSymbol={createdDateSymbol}
                 bind:date={editableTask.createdDate}
                 bind:isDateValid={isCreatedDateValid}
                 forwardOnly={editableTask.forwardOnly}
-                accesskey={null}
+                accesskey={accesskey('c')}
             />
 
             <!-- --------------------------------------------------------------------------- -->
             <!--  Done Date  -->
             <!-- --------------------------------------------------------------------------- -->
-            <label for="done">Done</label>
+            <label for="done">Done (<span class="accesskey">x</span>)</label>
             <DateEditor
                 id="done"
                 dateSymbol={doneDateSymbol}
                 bind:date={editableTask.doneDate}
                 bind:isDateValid={isDoneDateValid}
                 forwardOnly={editableTask.forwardOnly}
-                accesskey={null}
+                accesskey={accesskey('x')}
             />
 
             <!-- --------------------------------------------------------------------------- -->
             <!--  Cancelled Date  -->
             <!-- --------------------------------------------------------------------------- -->
-            <label for="cancelled">Cancelled</label>
+            <label for="cancelled">Cancelled (<span class="accesskey">-</span>)</label>
             <DateEditor
                 id="cancelled"
                 dateSymbol={cancelledDateSymbol}
                 bind:date={editableTask.cancelledDate}
                 bind:isDateValid={isCancelledDateValid}
                 forwardOnly={editableTask.forwardOnly}
-                accesskey={null}
+                accesskey={accesskey('-')}
             />
         </div>
 

tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html

@@ -205,32 +205,43 @@
         </select>
       </div>
       <div class="tasks-modal-section tasks-modal-dates">
-        <label for="created">Created</label>
+        <label for="created" class="accesskey-first">Created</label>
         <input
           id="created"
           type="text"
           class="input"
-          placeholder="Try 'Monday' or 'tomorrow', or [td|tm|yd|tw|nw|we] then space." />
+          placeholder="Try 'Monday' or 'tomorrow', or [td|tm|yd|tw|nw|we] then space."
+          accesskey="c" />
         <code class="results">
           ➕
           <i>no created date</i>
         </code>
-        <label for="done">Done</label>
+        <label for="done">
+          Done (
+          <span class="accesskey">x</span>
+          )
+        </label>
         <input
           id="done"
           type="text"
           class="input"
-          placeholder="Try 'Monday' or 'tomorrow', or [td|tm|yd|tw|nw|we] then space." />
+          placeholder="Try 'Monday' or 'tomorrow', or [td|tm|yd|tw|nw|we] then space."
+          accesskey="x" />
         <code class="results">
           ✅
           <i>no done date</i>
         </code>
-        <label for="cancelled">Cancelled</label>
+        <label for="cancelled">
+          Cancelled (
+          <span class="accesskey">-</span>
+          )
+        </label>
         <input
           id="cancelled"
           type="text"
           class="input"
-          placeholder="Try 'Monday' or 'tomorrow', or [td|tm|yd|tw|nw|we] then space." />
+          placeholder="Try 'Monday' or 'tomorrow', or [td|tm|yd|tw|nw|we] then space."
+          accesskey="-" />
         <code class="results">
           ❌
           <i>no cancelled date</i>