Fix missing focus after removing a tag

Author: jpzwarte

.changeset/thirty-ducks-walk.md

@@ -0,0 +1,7 @@
+---
+'@sl-design-system/tag': patch
+---
+
+Fix missing focus after removing a tag
+
+This set's the focus to the tag before the removed tag, or the next tag if the removed tag was the first one.

packages/components/tag/src/tag-list.spec.ts

@@ -1,4 +1,5 @@
 import { fixture } from '@sl-design-system/vitest-browser-lit';
+import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
 import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
@@ -60,6 +61,27 @@ describe('sl-tag', () => {
     });
   });
 
+  describe('removable', () => {
+    beforeEach(async () => {
+      el = await fixture(html`
+        <sl-tag-list>
+          <sl-tag removable>My label 1</sl-tag>
+          <sl-tag removable>My label 2</sl-tag>
+          <sl-tag removable>My label 3</sl-tag>
+        </sl-tag-list>
+      `);
+    });
+
+    it('should focus the previous tag when a tag is removed', async () => {
+      const tags = Array.from(el.querySelectorAll('sl-tag'));
+
+      tags.at(-1)?.focus();
+      await userEvent.keyboard('{Backspace}');
+
+      expect(document.activeElement).to.equal(tags.at(-2));
+    });
+  });
+
   describe('stacked', () => {
     beforeEach(async () => {
       el = await fixture(html`

packages/components/tag/src/tag-list.ts

@@ -6,7 +6,7 @@ import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResu
 import { property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './tag-list.scss.js';
-import { Tag, type TagSize, type TagVariant } from './tag.js';
+import { type SlRemoveEvent, Tag, type TagSize, type TagVariant } from './tag.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -159,12 +159,24 @@ export class TagList extends ScopedElementsMixin(LitElement) {
             </div>
           `
         : nothing}
-      <div class="list">
+      <div @sl-remove=${this.#onRemove} class="list">
         <slot @slotchange=${this.#onSlotChange}></slot>
       </div>
     `;
   }
 
+  #onRemove(event: SlRemoveEvent & { target: Tag }): void {
+    console.log('remove', event.target);
+
+    const index = this.#rovingTabindexController.elements.indexOf(event.target as Tag);
+
+    console.log({ index });
+
+    this.#rovingTabindexController.focusToElement(index + (index === 0 ? 1 : -1));
+
+    console.log('after remove');
+  }
+
   #onResize(entries: ResizeObserverEntry[]): void {
     const stackEntry = entries.find(entry => entry.target === this.stack),
       stackInlineSize = stackEntry?.contentRect.width;