jp systempk: Move focus after dictionary delete to caret or add.

Moves it to the caret of the dictionary that is now in the previously
deleted dictionary's index, or to the add button in the dictionary page
if there is no dictionary in that index.
go/screencast/cast/NDgyNTg0MDgzMDM4MjA4MHw5NTFlMjdhNi02ZQ

Fixed: b:418055514
Change-Id: Id86b5d1a1c54a5fbeb4d1490c094b8a9dee61c88
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6582162
Commit-Queue: Jon Htin <jhtin@google.com>
Reviewed-by: John Palmer <jopalmer@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1464587}

chrome/browser/resources/ash/settings/os_languages_page/os_japanese_dictionary_expand.ts

@@ -22,6 +22,8 @@ import type {EntryDeletedCustomEvent} from './os_japanese_dictionary_entry_row.j
 import {getTemplate} from './os_japanese_dictionary_expand.html.js';
 import {UserDataServiceProvider} from './user_data_service_provider.js';
 
+export type DictionaryDeletedCustomEvent = CustomEvent<{dictIndex: number}>;
+
 interface OsJapaneseDictionaryExpandElement {
   $: {
     selectFileDialog: HTMLElement,
@@ -52,6 +54,9 @@ class OsJapaneseDictionaryExpandElement extends I18nMixin
       statusMessage_: {
         type: String,
       },
+      dictIndex: {
+        type: Number,
+      },
     };
   }
 
@@ -75,6 +80,8 @@ class OsJapaneseDictionaryExpandElement extends I18nMixin
   // Used for chromevox announcements.
   private statusMessage_ = '';
 
+  private dictIndex = 0;
+
   private onEntryDelete_(event: EntryDeletedCustomEvent): void {
     this.statusMessage_ = '';
     afterNextRender(this, () => {
@@ -130,6 +137,7 @@ class OsJapaneseDictionaryExpandElement extends I18nMixin
              this.dict.id))
             .status.success;
     if (dictionarySaved) {
+      this.dispatchDictionaryDeletedEvent_();
       this.dispatchSavedEvent_();
     }
     this.showingDeleteDialog_ = false;
@@ -212,6 +220,15 @@ class OsJapaneseDictionaryExpandElement extends I18nMixin
         new CustomEvent('dictionary-saved', {bubbles: true, composed: true}));
   }
 
+  private dispatchDictionaryDeletedEvent_(): void {
+    this.dispatchEvent(new CustomEvent('dictionary-deleted', {
+      bubbles: true,
+      composed: true,
+      detail: {dictIndex: this.dictIndex},
+    }));
+  }
+
+
   private i18nDialogString_(dictName: string): string {
     return this.i18n('japaneseDeleteDictionaryDetail', dictName);
   }
@@ -230,5 +247,6 @@ declare global {
 declare global {
   interface HTMLElementEventMap {
     ['dictionary-saved']: CustomEvent;
+    ['dictionary-deleted']: DictionaryDeletedCustomEvent;
   }
 }

chrome/browser/resources/ash/settings/os_languages_page/os_japanese_manage_user_dictionary_page.html

@@ -10,15 +10,19 @@
 <h2 class="cr-row subsection-header">$i18n{japaneseDictionary}</h2>
 <template is="dom-repeat" items="[[dictionaries_]]">
   <os-japanese-dictionary-expand
-    dict="[[item]]" synced-entries-count="[[getLastIndex_(item.entries)]]">
+    dict="[[item]]"
+    synced-entries-count="[[getLastIndex_(item.entries)]]"
+    dict-index="[[index]]">
   </os-japanese-dictionary-expand>
 </template>
 <div class="cr-row">
-  <cr-button on-click="addDictionary_" class="add-button add-dict-row">
+  <cr-button
-    <iron-icon icon="cr:add" slot="prefix-icon"></iron-icon>
+    id="addDictionaryButton" on-click="addDictionary_"
-    <span>
+    class="add-button add-dict-row">
-      $i18n{japaneseDictionaryAddDictionary}
+      <iron-icon icon="cr:add" slot="prefix-icon"></iron-icon>
-    </span>
+      <span>
+        $i18n{japaneseDictionaryAddDictionary}
+      </span>
   </cr-button>
 </div>
 

chrome/browser/resources/ash/settings/os_languages_page/os_japanese_manage_user_dictionary_page.ts

@@ -20,6 +20,7 @@ import {GlobalScrollTargetMixin} from '../common/global_scroll_target_mixin.js';
 import type {JapaneseDictionary} from '../mojom-webui/user_data_japanese_dictionary.mojom-webui.js';
 import {routes} from '../router.js';
 
+import type {DictionaryDeletedCustomEvent} from './os_japanese_dictionary_expand.js';
 import {getTemplate} from './os_japanese_manage_user_dictionary_page.html.js';
 import {UserDataServiceProvider} from './user_data_service_provider.js';
 
@@ -61,6 +62,7 @@ class OsSettingsJapaneseManageUserDictionaryPageElement extends I18nMixin
   override ready(): void {
     super.ready();
     this.addEventListener('dictionary-saved', this.getDictionaries_);
+    this.addEventListener('dictionary-deleted', this.onDictionaryDeleted_);
     this.getDictionaries_();
   }
 
@@ -79,6 +81,21 @@ class OsSettingsJapaneseManageUserDictionaryPageElement extends I18nMixin
     }
   }
 
+  private onDictionaryDeleted_(event: DictionaryDeletedCustomEvent): void {
+    afterNextRender(this, () => {
+      const n = event.detail.dictIndex + 1;
+      const nthElement = this.shadowRoot!.querySelector<HTMLElement>(
+          `os-japanese-dictionary-expand:nth-of-type(${n})`);
+      if (nthElement) {
+        nthElement.shadowRoot!.querySelector<HTMLElement>(
+                                  'cr-expand-button')!.focus();
+      } else {
+        this.shadowRoot!.querySelector<HTMLElement>(
+                            '#addDictionaryButton')!.focus();
+      }
+    });
+  }
+
   // Adds a new dictionary with the name "New dictionary".
   private async addDictionary_(): Promise<void> {
     const resp =