From 863a195d4a854049472dec500ff5d2869f37c8a4 Mon Sep 17 00:00:00 2001
From: ilaydasimsek <36786266+ilaydasimsek@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:29:33 +0300
Subject: [PATCH] Fix tab navigation order in issue creation popup (#5148)

Signed-off-by: Ilayda Simsek <ilaydasimsek4@gmail.com>
---
 .../components/calendar/DatePresenter.svelte  | 23 +++++++++++++++++++
 .../src/components/TagsDropdownEditor.svelte  |  2 ++
 .../src/components/CreateIssue.svelte         |  8 ++++---
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
index 39fe9f914e..5e8e3b48ab 100644
--- a/packages/ui/src/components/calendar/DatePresenter.svelte
+++ b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -26,6 +26,7 @@
   import DPCalendar from './icons/DPCalendar.svelte'
   import DPCalendarOver from './icons/DPCalendarOver.svelte'
   import { getMonthName } from './internal/DateUtils'
+  import { registerFocus } from '../../focus'
 
   export let value: number | null | undefined
   export let mode: DateRangeMode = DateRangeMode.DATE
@@ -49,6 +50,7 @@
   let currentDate: Date | null = null
   if (value != null) currentDate = new Date(value)
   let opened: boolean = false
+  let input: HTMLButtonElement | undefined = undefined
 
   const onChange = (result: Date | null): void => {
     if (result === null) {
@@ -64,9 +66,30 @@
   }
 
   $: withTime = mode !== DateRangeMode.DATE
+
+  // Focusable control with index
+  export let focusIndex = -1
+  const { idx, focusManager } = registerFocus(focusIndex, {
+    focus: () => {
+      input?.focus()
+      return input != null
+    },
+    isFocus: () => document.activeElement === input
+  })
+
+  $: if (idx !== -1 && focusManager) {
+    focusManager.updateFocus(idx, focusIndex)
+  }
+
+  $: if (input != null) {
+    input.addEventListener('focus', () => {
+      focusManager?.setFocus(idx)
+    })
+  }
 </script>
 
 <button
+  bind:this={input}
   class="datetime-button {kind} {size}"
   class:editable
   class:dateTimeButtonNoLabel={!shouldShowLabel}
diff --git a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
index 29224b2bf6..ad1219593f 100644
--- a/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
+++ b/plugins/tags-resources/src/components/TagsDropdownEditor.svelte
@@ -34,6 +34,7 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
   export let labelDirection: TooltipAlignment | undefined = undefined
+  export let focusIndex = -1
 
   export let disabled: boolean = false
 
@@ -90,6 +91,7 @@
   {kind}
   {size}
   {justify}
+  {focusIndex}
   showTooltip={{ label: key.attr.label, direction: labelDirection }}
   on:click={addTag}
 >
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index 4fd3e4e2ae..f254a72343 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -932,7 +932,7 @@
       }}
     />
     <ComponentSelector
-      focusIndex={8}
+      focusIndex={7}
       value={object.component}
       space={_space}
       onChange={handleComponentIdChanged}
@@ -941,7 +941,7 @@
       size={'large'}
     />
     <div id="estimation-editor" class="new-line">
-      <EstimationEditor focusIndex={7} kind={'regular'} size={'large'} value={object} />
+      <EstimationEditor focusIndex={8} kind={'regular'} size={'large'} value={object} />
     </div>
     <div id="milestone-editor" class="new-line">
       <MilestoneSelector
@@ -956,6 +956,7 @@
     </div>
     <div id="duedate-editor" class="new-line">
       <DatePresenter
+        focusIndex={10}
         bind:value={object.dueDate}
         labelNull={tracker.string.DueDate}
         kind={'regular'}
@@ -965,6 +966,7 @@
     </div>
     <div id="parentissue-editor" class="new-line">
       <Button
+        focusIndex={11}
         icon={tracker.icon.Parent}
         label={object.parentIssue != null ? tracker.string.RemoveParent : tracker.string.SetParent}
         kind={'regular'}
@@ -991,7 +993,7 @@
   </svelte:fragment>
   <svelte:fragment slot="footer">
     <Button
-      focusIndex={10}
+      focusIndex={12}
       icon={IconAttachment}
       iconProps={{ fill: 'var(--theme-dark-color)' }}
       size={'large'}