UBERF-4466 (#4129)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

plugins/calendar-resources/src/components/CalendarSelector.svelte

@@ -9,6 +9,7 @@
 
   export let value: Ref<Calendar> | undefined
   export let disabled: boolean = false
+  export let focusIndex = -1
 
   const dispatch = createEventDispatcher()
 
@@ -47,6 +48,7 @@
       withSearch={false}
       {selected}
       {disabled}
+      {focusIndex}
       on:selected={(e) => {
         change(e.detail._id)
       }}

plugins/calendar-resources/src/components/CreateEvent.svelte

@@ -18,7 +18,7 @@
   import { Class, Doc, Ref, getCurrentAccount } from '@hcengineering/core'
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import { StyledTextBox } from '@hcengineering/text-editor'
-  import { Button, EditBox, Icon, IconClose, IconMoreH, showPopup } from '@hcengineering/ui'
+  import { Button, EditBox, Icon, IconClose, IconMoreH, createFocusManager, showPopup } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
   import { saveUTC } from '../utils'
@@ -30,6 +30,7 @@
   import VisibilityEditor from './VisibilityEditor.svelte'
   import CalendarSelector from './CalendarSelector.svelte'
   import LocationEditor from './LocationEditor.svelte'
+  import FocusHandler from '@hcengineering/ui/src/components/FocusHandler.svelte'
 
   export let attachedTo: Ref<Doc> = calendar.ids.NoAttached
   export let attachedToClass: Ref<Class<Doc>> = calendar.class.Event
@@ -136,8 +137,12 @@
       }
     })
   }
+
+  const manager = createFocusManager()
 </script>
 
+<FocusHandler {manager} />
+
 <div class="eventPopup-container">
   <div class="header flex-between">
     <EditBox
@@ -163,12 +168,12 @@
     </div>
   </div>
   <div class="block first flex-no-shrink">
-    <EventTimeEditor {allDay} bind:startDate bind:dueDate />
+    <EventTimeEditor {allDay} bind:startDate bind:dueDate focusIndex={10004} />
     <EventTimeExtraButton bind:allDay bind:rules on:repeat={setRecurrance} on:allday={allDayChangeHandler} />
   </div>
   <div class="block rightCropPadding">
-    <LocationEditor bind:value={location} />
-    <EventParticipants bind:participants bind:externalParticipants />
+    <LocationEditor focusIndex={10010} bind:value={location} />
+    <EventParticipants focusIndex={10011} bind:participants bind:externalParticipants />
   </div>
   <div class="block flex-no-shrink">
     <div class="flex-row-top gap-1-5">
@@ -180,22 +185,29 @@
         kind={'indented'}
         maxHeight={'limited'}
         showButtons={false}
+        focusIndex={10100}
         placeholder={calendar.string.Description}
         bind:content={description}
       />
     </div>
   </div>
   <div class="block rightCropPadding">
-    <CalendarSelector bind:value={space} />
+    <CalendarSelector bind:value={space} focusIndex={10101} />
     <div class="flex-row-center flex-gap-1">
       <Icon icon={calendar.icon.Hidden} size={'small'} />
-      <VisibilityEditor bind:value={visibility} kind={'ghost'} withoutIcon />
+      <VisibilityEditor bind:value={visibility} kind={'ghost'} focusIndex={10102} withoutIcon />
     </div>
-    <EventReminders bind:reminders />
+    <EventReminders bind:reminders focusIndex={10103} />
   </div>
   <div class="flex-between p-5 flex-no-shrink">
     <div />
-    <Button kind="primary" label={presentation.string.Create} on:click={saveEvent} disabled={title === ''} />
+    <Button
+      kind="primary"
+      label={presentation.string.Create}
+      focusIndex={10104}
+      on:click={saveEvent}
+      disabled={title === ''}
+    />
   </div>
 </div>
 

plugins/calendar-resources/src/components/DateEditor.svelte

@@ -35,6 +35,7 @@
   export let kind: ButtonKind = 'ghost'
   export let size: ButtonSize = 'medium'
   export let disabled: boolean = false
+  export let focusIndex = -1
 
   const dispatch = createEventDispatcher()
 
@@ -77,14 +78,21 @@
   class:gap-1-5={direction === 'horizontal'}
 >
   {#if showDate || withoutTime}
-    <Button {kind} {size} padding={'0 .5rem'} on:click={dateClick} {disabled}>
+    <Button {kind} {size} padding={'0 .5rem'} {focusIndex} on:click={dateClick} {disabled}>
       <svelte:fragment slot="content">
         <DateLocalePresenter date={currentDate.getTime()} />
       </svelte:fragment>
     </Button>
   {/if}
   {#if !withoutTime}
-    <Button {kind} {size} padding={'0 .5rem'} on:click={timeClick} {disabled}>
+    <Button
+      {kind}
+      {size}
+      padding={'0 .5rem'}
+      focusIndex={focusIndex !== -1 ? focusIndex + 1 : focusIndex}
+      on:click={timeClick}
+      {disabled}
+    >
       <svelte:fragment slot="content">
         <TimeInputBox
           bind:currentDate

plugins/calendar-resources/src/components/EditEvent.svelte

@@ -18,7 +18,7 @@
   import { DocumentUpdate, Ref } from '@hcengineering/core'
   import presentation, { getClient } from '@hcengineering/presentation'
   import { StyledTextBox } from '@hcengineering/text-editor'
-  import { Button, EditBox, Icon, IconClose, showPopup } from '@hcengineering/ui'
+  import { Button, EditBox, Icon, IconClose, createFocusManager, showPopup } from '@hcengineering/ui'
   import { deepEqual } from 'fast-equals'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
@@ -31,6 +31,7 @@
   import VisibilityEditor from './VisibilityEditor.svelte'
   import CalendarSelector from './CalendarSelector.svelte'
   import LocationEditor from './LocationEditor.svelte'
+  import FocusHandler from '@hcengineering/ui/src/components/FocusHandler.svelte'
 
   export let object: Event
   $: readOnly = isReadOnly(object)
@@ -138,8 +139,12 @@
       }
     })
   }
+
+  const manager = createFocusManager()
 </script>
 
+<FocusHandler {manager} />
+
 <div class="eventPopup-container">
   <div class="header flex-between">
     <EditBox
@@ -165,18 +170,19 @@
     </div>
   </div>
   <div class="block first flex-no-shrink">
-    <EventTimeEditor {allDay} bind:startDate bind:dueDate disabled={readOnly} />
+    <EventTimeEditor {allDay} bind:startDate bind:dueDate disabled={readOnly} focusIndex={10004} />
     <EventTimeExtraButton bind:allDay bind:rules on:repeat={setRecurrance} on:allday={allDayChangeHandler} noRepeat />
   </div>
   <div class="block rightCropPadding">
-    <LocationEditor bind:value={location} />
-    <EventParticipants bind:participants bind:externalParticipants disabled={readOnly} />
+    <LocationEditor bind:value={location} focusIndex={10005} />
+    <EventParticipants bind:participants bind:externalParticipants disabled={readOnly} focusIndex={10006} />
   </div>
   <div class="block flex-no-shrink">
     <div class="flex-row-center gap-1-5">
       <Icon icon={calendar.icon.Description} size={'small'} />
       <StyledTextBox
         alwaysEdit={true}
+        focusIndex={10007}
         kind={'indented'}
         maxHeight={'limited'}
         showButtons={false}
@@ -187,17 +193,23 @@
   </div>
   <div class="divider" />
   <div class="block rightCropPadding">
-    <CalendarSelector bind:value={space} />
+    <CalendarSelector bind:value={space} focusIndex={10008} />
     <div class="flex-row-center flex-gap-1">
       <Icon icon={calendar.icon.Hidden} size={'small'} />
-      <VisibilityEditor bind:value={visibility} kind={'ghost'} withoutIcon />
+      <VisibilityEditor bind:value={visibility} kind={'ghost'} withoutIcon focusIndex={10009} />
     </div>
-    <EventReminders bind:reminders />
+    <EventReminders bind:reminders focusIndex={10010} />
   </div>
   <div class="divider" />
   <div class="flex-between p-5 flex-no-shrink">
     <div />
-    <Button kind="primary" label={presentation.string.Save} disabled={readOnly} on:click={saveEvent} />
+    <Button
+      kind="primary"
+      label={presentation.string.Save}
+      focusIndex={10011}
+      disabled={readOnly}
+      on:click={saveEvent}
+    />
   </div>
 </div>
 

plugins/calendar-resources/src/components/EventParticipants.svelte

@@ -23,6 +23,7 @@
   export let participants: Ref<Person>[]
   export let externalParticipants: string[]
   export let disabled: boolean = false
+  export let focusIndex = -1
 
   interface IParticipants {
     participant: Ref<Person> | undefined
@@ -84,7 +85,16 @@
 
 <div class="flex-row-center gap-1-5 pb-0-5 pr-1">
   <Icon icon={calendar.icon.Participants} size="small" />
-  <AddParticipant {placeholder} excluded={participants} focusable fullSize {disabled} on:ref={ref} on:enter={enter} />
+  <AddParticipant
+    {placeholder}
+    excluded={participants}
+    focusable
+    fullSize
+    {disabled}
+    {focusIndex}
+    on:ref={ref}
+    on:enter={enter}
+  />
 </div>
 {#if allParticipants.length}
   <Scroller padding={'.125rem .375rem 0 1.5rem'} shrink>
@@ -93,7 +103,7 @@
         <EventParticipantItem
           participant={p.participant}
           externalParticipant={p.externalParticipant}
-          focusIndex={10010 + i}
+          focusIndex={focusIndex + i}
           {disabled}
           on:removeParticipant={() => {
             if (p.participant) removeParticipant(p.participant)
@@ -104,7 +114,7 @@
         />
       {/each}
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-      <div class="antiOption step-tb25" tabindex={10010 + shortListLength - 2}>
+      <div class="antiOption step-tb25" tabindex={focusIndex + shortListLength - 2}>
         <Button
           icon={IconMoreV}
           kind={'ghost'}
@@ -120,7 +130,7 @@
       <EventParticipantItem
         participant={allParticipants[allParticipants.length - 1].participant}
         externalParticipant={allParticipants[allParticipants.length - 1].externalParticipant}
-        focusIndex={10010 + shortListLength - 1}
+        focusIndex={focusIndex + shortListLength - 1}
         {disabled}
         on:removeParticipant={(event) => {
           if (event.detail !== undefined) removeParticipant(event.detail)
@@ -134,7 +144,7 @@
         <EventParticipantItem
           participant={p.participant}
           externalParticipant={p.externalParticipant}
-          focusIndex={10010 + i}
+          focusIndex={focusIndex + i}
           {disabled}
           on:removeParticipant={() => {
             if (p.participant) removeParticipant(p.participant)

plugins/calendar-resources/src/components/EventReminders.svelte

@@ -20,6 +20,7 @@
 
   export let reminders: number[]
   export let disabled: boolean = false
+  export let focusIndex = -1
 
   const maxReminders: number = 4
   let shown: boolean = false
@@ -49,6 +50,7 @@
     label={reminders.length > 0 ? calendar.string.AddReminder : calendar.string.Reminders}
     {disabled}
     kind={'ghost'}
+    {focusIndex}
     on:click={(e) => {
       addReminder(e)
     }}

plugins/calendar-resources/src/components/EventTimeEditor.svelte

@@ -22,6 +22,7 @@
   export let dueDate: number
   export let allDay: boolean
   export let disabled: boolean = false
+  export let focusIndex = -1
 
   $: sameDate = areDatesEqual(new Date(startDate), new Date(dueDate))
 
@@ -57,6 +58,7 @@
     withoutTime={allDay}
     on:update={dateChange}
     {disabled}
+    {focusIndex}
   />
   <div class="self-end flex-no-shrink mb-2 ml-1-5 mr-1-5 content-darker-color">
     <IconArrowRight size={'small'} />
@@ -68,6 +70,7 @@
     showDate={!sameDate}
     difference={startDate}
     {disabled}
+    focusIndex={focusIndex !== -1 ? focusIndex + 1 : focusIndex}
     on:update={dueChange}
   />
 </div>

plugins/calendar-resources/src/components/LocationEditor.svelte

@@ -3,6 +3,7 @@
   import calendar from '../plugin'
 
   export let value: string | undefined
+  export let focusIndex = 1
 
   function isLink (value?: string | null): boolean {
     if (value == null) return false
@@ -22,7 +23,7 @@
 <div class="flex-row-center flex-gap-1 container">
   <Icon icon={calendar.icon.Location} size={'small'} />
   <div class="flex-row-center">
-    <EditBox bind:value placeholder={calendar.string.Location} kind={'ghost'} fullSize focusable />
+    <EditBox bind:value placeholder={calendar.string.Location} kind={'ghost'} {focusIndex} fullSize focusable />
     {#if isLink(value)}
       <div class="tool">
         <Button focusIndex={4} kind={'ghost'} size={'small'} icon={IconArrowRight} on:click={open} />

plugins/calendar-resources/src/components/VisibilityEditor.svelte

@@ -23,6 +23,7 @@
   export let disabled: boolean = false
   export let kind: ButtonKind = 'regular'
   export let withoutIcon: boolean = false
+  export let focusIndex = -1
 
   let items: ListItem[] = []
 
@@ -68,6 +69,7 @@
   placeholder={calendar.string.DefaultVisibility}
   {items}
   withSearch={false}
+  {focusIndex}
   {selected}
   on:selected={(e) => {
     change(e.detail._id)