refactor: use localName instead of tagName (#2612)

src/components/accordion/accordion.e2e.ts

@@ -82,14 +82,14 @@ describe(`sbb-accordion ${fixture.name}`, () => {
     const panels = Array.from(element.querySelectorAll('sbb-expansion-panel'));
     expect(panels.length).to.be.equal(3);
     expect(
-      panels[0].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.tagName,
-    ).to.be.equal('H4');
+      panels[0].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.localName,
+    ).to.be.equal('h4');
     expect(
-      panels[1].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.tagName,
-    ).to.be.equal('H4');
+      panels[1].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.localName,
+    ).to.be.equal('h4');
     expect(
-      panels[2].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.tagName,
-    ).to.be.equal('H4');
+      panels[2].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.localName,
+    ).to.be.equal('h4');
   });
 
   it('should dynamically update titleLevel prop', async () => {
@@ -98,14 +98,14 @@ describe(`sbb-accordion ${fixture.name}`, () => {
     const panels = Array.from(element.querySelectorAll('sbb-expansion-panel'));
     expect(panels.length).to.be.equal(3);
     expect(
-      panels[0].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.tagName,
-    ).to.be.equal('H6');
+      panels[0].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.localName,
+    ).to.be.equal('h6');
     expect(
-      panels[1].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.tagName,
-    ).to.be.equal('H6');
+      panels[1].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.localName,
+    ).to.be.equal('h6');
     expect(
-      panels[2].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.tagName,
-    ).to.be.equal('H6');
+      panels[2].shadowRoot!.querySelector('.sbb-expansion-panel')!.firstElementChild!.localName,
+    ).to.be.equal('h6');
   });
 
   it('should close others when expanding and multi = false', async () => {

src/components/accordion/accordion.ts

@@ -47,7 +47,7 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) {
   private _abort = new SbbConnectedAbortController(this);
 
   private _closePanels(e: CustomEvent): void {
-    if ((e.target as HTMLElement)?.tagName !== 'SBB-EXPANSION-PANEL' || this.multi) {
+    if ((e.target as HTMLElement)?.localName !== 'sbb-expansion-panel' || this.multi) {
       return;
     }
 

src/components/alert/alert-group/alert-group.e2e.ts

@@ -39,7 +39,7 @@ describe(`sbb-alert-group with ${fixture.name}`, () => {
     expect(element.querySelectorAll('sbb-alert').length).to.be.equal(2);
     const alertGroupTitle = element.shadowRoot!.querySelector('.sbb-alert-group__title')!;
     expect(alertGroupTitle.textContent!.trim()).to.be.equal(accessibilityTitle);
-    expect(alertGroupTitle.tagName).to.be.equal(`H${accessibilityTitleLevel}`);
+    expect(alertGroupTitle.localName).to.be.equal(`h${accessibilityTitleLevel}`);
 
     // When clicking on close button of the first alert
     const closeButton = element

src/components/autocomplete/autocomplete.ts

@@ -207,7 +207,7 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L
 
   private _onOptionClick(event: MouseEvent): void {
     if (
-      (event.target as Element).tagName !== 'SBB-OPTION' ||
+      (event.target as Element).localName !== 'sbb-option' ||
       (event.target as SbbOptionElement).disabled
     ) {
       return;

src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts

@@ -154,14 +154,14 @@ describe(`sbb-breadcrumb-group with ${fixture.name}`, () => {
       (document.activeElement as HTMLElement).blur();
 
       // Then the body should be focused
-      expect(document.activeElement!.tagName).to.be.equal('BODY');
+      expect(document.activeElement!.localName).to.be.equal('body');
 
       // When triggering a slotChange by removing a breadcrumb
       element.querySelector('#breadcrumb-6')!.remove();
       await waitForLitRender(element);
 
       // Then the body should still be focused
-      expect(document.activeElement!.tagName).to.be.equal('BODY');
+      expect(document.activeElement!.localName).to.be.equal('body');
     });
 
     it('should remove expand button when too less breadcrumbs available', async () => {

src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts

@@ -40,7 +40,7 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin<
   typeof LitElement
 >(LitElement) {
   public static override styles: CSSResultGroup = style;
-  protected override readonly listChildTagNames = ['SBB-BREADCRUMB'];
+  protected override readonly listChildLocalNames = ['sbb-breadcrumb'];
 
   /* The state of the breadcrumb group. */
   @state()

src/components/calendar/calendar.ts

@@ -588,7 +588,7 @@ export class SbbCalendarElement<T = Date> extends LitElement {
   }
 
   private _handleTableBlur(eventTarget: HTMLElement): void {
-    if (eventTarget?.tagName !== 'BUTTON') {
+    if (eventTarget?.localName !== 'button') {
       this._setTabIndex();
     }
   }

src/components/card/common/card-action-common.ts

@@ -60,8 +60,8 @@ export const SbbCardActionCommonElementMixin = <
       Array.from(this._card?.querySelectorAll?.(IS_FOCUSABLE_QUERY) ?? [])
         .filter(
           (el) =>
-            el.tagName !== 'SBB-CARD-LINK' &&
-            el.tagName !== 'SBB-CARD-BUTTON' &&
+            el.localName !== 'sbb-card-link' &&
+            el.localName !== 'sbb-card-button' &&
             !el.hasAttribute(cardFocusableAttributeName),
         )
         .forEach((el: Element) => el.setAttribute(cardFocusableAttributeName, ''));

src/components/core/base-elements/link-base-element.ts

@@ -54,7 +54,7 @@ export abstract class SbbLinkBaseElement extends SbbActionBaseElement {
     // event origin, which means the inner anchor element has not actually been activated/clicked.
     if (
       !this.href ||
-      !target.tagName.startsWith('SBB-') ||
+      !target.localName.startsWith('sbb-') ||
       target !== composedTarget ||
       (await isEventPrevented(event))
     ) {

src/components/core/mixins/named-slot-list-mixin.ts

@@ -30,7 +30,7 @@ export type WithListChildren<
 export declare abstract class SbbNamedSlotListMixinType<
   C extends HTMLElement,
 > extends SbbHydrationMixinType {
-  protected abstract readonly listChildTagNames: string[];
+  protected abstract readonly listChildLocalNames: string[];
   @state() protected listChildren: C[];
   protected renderList(attributes?: {
     class?: string;
@@ -58,7 +58,7 @@ export const SbbNamedSlotListMixin = <
     implements Partial<SbbNamedSlotListMixinType<C>>
   {
     /** A list of upper-cased tag names to match against. (e.g. SBB-LINK) */
-    protected abstract readonly listChildTagNames: string[];
+    protected abstract readonly listChildLocalNames: string[];
 
     /**
      * A list of children with the defined tag names.
@@ -79,7 +79,7 @@ export const SbbNamedSlotListMixin = <
 
     private _handleSlotchange = (): void => {
       const listChildren = Array.from(this.children ?? []).filter((e): e is C =>
-        this.listChildTagNames.includes(e.tagName),
+        this.listChildLocalNames.includes(e.localName),
       );
       // If the slotted child instances have not changed, we can skip syncing and updating
       // the link reference list.

src/components/expansion-panel/expansion-panel/expansion-panel.ts

@@ -137,10 +137,10 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) {
   private _handleSlotchange(): void {
     const children = Array.from(this.children ?? []);
     const header = children.find(
-      (e): e is SbbExpansionPanelHeaderElement => e.tagName === 'SBB-EXPANSION-PANEL-HEADER',
+      (e): e is SbbExpansionPanelHeaderElement => e.localName === 'sbb-expansion-panel-header',
     );
     const content = children.find(
-      (e): e is SbbExpansionPanelContentElement => e.tagName === 'SBB-EXPANSION-PANEL-CONTENT',
+      (e): e is SbbExpansionPanelContentElement => e.localName === 'sbb-expansion-panel-content',
     );
     if (this._headerRef === header && this._contentRef === content) {
       return;

src/components/form-field/form-field-clear/form-field-clear.ts

@@ -43,7 +43,7 @@ export class SbbFormFieldClearElement extends SbbNegativeMixin(SbbButtonBaseElem
 
   private async _handleClick(): Promise<void> {
     const input = this._formField?.inputElement;
-    if (!input || input.tagName !== 'INPUT') {
+    if (!input || input.localName !== 'input') {
       return;
     }
     this._formField?.clear();

src/components/form-field/form-field/form-field.ts

@@ -215,7 +215,7 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) {
     this._readInputState();
     this._registerInputListener();
 
-    if (this._input.tagName === 'TEXTAREA') {
+    if (this._input.localName === 'textarea') {
       this._input.setAttribute('rows', this._input.getAttribute('rows') || '3');
     }
 

src/components/link-list/link-list.ts

@@ -31,10 +31,10 @@ export class SbbLinkListElement extends SbbNegativeMixin(
   >(LitElement),
 ) {
   public static override styles: CSSResultGroup = style;
-  protected override readonly listChildTagNames = [
-    'SBB-BLOCK-LINK',
-    'SBB-BLOCK-LINK-BUTTON',
-    'SBB-BLOCK-LINK-STATIC',
+  protected override readonly listChildLocalNames = [
+    'sbb-block-link',
+    'sbb-block-link-button',
+    'sbb-block-link-static',
   ];
 
   /** The title text we want to show before the list. */

src/components/menu/menu/menu.ts

@@ -66,7 +66,7 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
     willClose: 'willClose',
     didClose: 'didClose',
   } as const;
-  protected override readonly listChildTagNames = ['SBB-MENU-BUTTON', 'SBB-MENU-LINK'];
+  protected override readonly listChildLocalNames = ['sbb-menu-button', 'sbb-menu-link'];
 
   /**
    * The element that will trigger the menu overlay.
@@ -163,7 +163,7 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
    */
   private _onClick(event: Event): void {
     const target = event.target as HTMLElement | undefined;
-    if (target?.tagName === 'SBB-MENU-BUTTON' || target?.tagName === 'SBB-MENU-LINK') {
+    if (target?.localName === 'sbb-menu-button' || target?.localName === 'sbb-menu-link') {
       this.close();
     }
   }
@@ -244,7 +244,7 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
     if (
       this.children?.length &&
       Array.from(this.children ?? []).every(
-        (c) => c.tagName === 'SBB-MENU-BUTTON' || c.tagName === 'SBB-MENU-LINK',
+        (c) => c.localName === 'sbb-menu-button' || c.localName === 'sbb-menu-link',
       )
     ) {
       return;
@@ -344,8 +344,8 @@ export class SbbMenuElement extends SbbNamedSlotListMixin<
       this._triggerElement?.focus({
         // When inside the sbb-header, we prevent the scroll to avoid the snapping to the top of the page
         preventScroll:
-          this._triggerElement.tagName === 'SBB-HEADER-BUTTON' ||
-          this._triggerElement.tagName === 'SBB-HEADER-LINK',
+          this._triggerElement.localName === 'sbb-header-button' ||
+          this._triggerElement.localName === 'sbb-header-link',
       });
       this._didClose.emit();
       this._windowEventsController?.abort();

src/components/navigation/navigation-list/navigation-list.ts

@@ -26,7 +26,10 @@ export class SbbNavigationListElement extends SbbNamedSlotListMixin<
   typeof LitElement
 >(LitElement) {
   public static override styles: CSSResultGroup = style;
-  protected override readonly listChildTagNames = ['SBB-NAVIGATION-BUTTON', 'SBB-NAVIGATION-LINK'];
+  protected override readonly listChildLocalNames = [
+    'sbb-navigation-button',
+    'sbb-navigation-link',
+  ];
 
   /**
    * The label to be shown before the action list.

src/components/navigation/navigation-marker/navigation-marker.ts

@@ -19,7 +19,10 @@ export class SbbNavigationMarkerElement extends SbbNamedSlotListMixin<
   typeof LitElement
 >(LitElement) {
   public static override styles: CSSResultGroup = style;
-  protected override readonly listChildTagNames = ['SBB-NAVIGATION-BUTTON', 'SBB-NAVIGATION-LINK'];
+  protected override readonly listChildLocalNames = [
+    'sbb-navigation-button',
+    'sbb-navigation-link',
+  ];
 
   /**
    * Marker size variant.

src/components/select/select.ts

@@ -199,7 +199,7 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin(
 
   private _onOptionClick(event: MouseEvent): void {
     const target = event.target as SbbSelectElement | SbbOptionElement;
-    if (target.tagName !== 'SBB-OPTION' || target.disabled) {
+    if (target.localName !== 'sbb-option' || target.disabled) {
       return;
     }
 

src/components/skiplink-list/skiplink-list.ts

@@ -31,7 +31,7 @@ export class SbbSkiplinkListElement extends SbbNamedSlotListMixin<
   typeof LitElement
 >(LitElement) {
   public static override styles: CSSResultGroup = style;
-  protected override readonly listChildTagNames = ['SBB-BLOCK-LINK', 'SBB-BLOCK-LINK-BUTTON'];
+  protected override readonly listChildLocalNames = ['sbb-block-link', 'sbb-block-link-button'];
 
   /** The title text we want to place before the list. */
   @property({ attribute: 'title-content', reflect: true }) public titleContent?: string;

src/components/tabs/tab-group/tab-group.ts

@@ -32,7 +32,7 @@ const tabObserverConfig: MutationObserverInit = {
   attributeFilter: ['active', 'disabled'],
 };
 
-const SUPPORTED_CONTENT_WRAPPERS = ['ARTICLE', 'DIV', 'SECTION', 'SBB-TAB-GROUP'];
+const SUPPORTED_CONTENT_WRAPPERS = ['article', 'div', 'section', 'sbb-tab-group'];
 
 let nextId = 0;
 
@@ -128,7 +128,7 @@ export class SbbTabGroupElement extends LitElement {
 
   private _getTabs(): InterfaceSbbTabGroupTab[] {
     return Array.from(this.children ?? []).filter((child) =>
-      /^SBB-TAB-TITLE$/u.test(child.tagName),
+      /^sbb-tab-title$/u.test(child.localName),
     ) as InterfaceSbbTabGroupTab[];
   }
 
@@ -306,8 +306,8 @@ export class SbbTabGroupElement extends LitElement {
       },
     };
     if (
-      tab.nextElementSibling?.tagName &&
-      SUPPORTED_CONTENT_WRAPPERS.includes(tab.nextElementSibling?.tagName)
+      tab.nextElementSibling?.localName &&
+      SUPPORTED_CONTENT_WRAPPERS.includes(tab.nextElementSibling?.localName)
     ) {
       tab.relatedContent = tab.nextElementSibling as HTMLElement;
       tab.relatedContent.id = this._assignId();

src/components/tag/tag-group/tag-group.ts

@@ -25,7 +25,7 @@ export class SbbTagGroupElement extends SbbNamedSlotListMixin<SbbTagElement, typ
 ) {
   public static override styles: CSSResultGroup = style;
   // DIV is added here due to special requirements from sbb.ch.
-  protected override readonly listChildTagNames = ['SBB-TAG', 'DIV'];
+  protected override readonly listChildLocalNames = ['sbb-tag', 'div'];
 
   /**
    * This will be forwarded as aria-label to the inner list.

src/components/train/train-formation/train-formation.ts

@@ -35,7 +35,7 @@ export class SbbTrainFormationElement extends SbbNamedSlotListMixin<
   typeof LitElement
 >(LitElement) {
   public static override styles: CSSResultGroup = style;
-  protected override readonly listChildTagNames = ['SBB-TRAIN'];
+  protected override readonly listChildLocalNames = ['sbb-train'];
 
   /** Option to hide all wagon labels. */
   @property({ attribute: 'hide-wagon-label', reflect: true, type: Boolean }) public hideWagonLabel =
@@ -85,7 +85,7 @@ export class SbbTrainFormationElement extends SbbNamedSlotListMixin<
       ) => {
         const currentAggregatedSector = aggregatedSectors[aggregatedSectors.length - 1];
 
-        if (item.tagName === 'SBB-TRAIN-WAGON') {
+        if (item.localName === 'sbb-train-wagon') {
           const sectorAttribute =
             (item as SbbTrainWagonElement).sector ?? item.getAttribute('sector');
 
@@ -102,7 +102,7 @@ export class SbbTrainFormationElement extends SbbNamedSlotListMixin<
               blockedPassageCount: 0,
             });
           }
-        } else if (item.tagName === 'SBB-TRAIN-BLOCKED-PASSAGE') {
+        } else if (item.localName === 'sbb-train-blocked-passage') {
           currentAggregatedSector.blockedPassageCount++;
         }
 

src/components/train/train-wagon/train-wagon.ts

@@ -42,7 +42,7 @@ export class SbbTrainWagonElement extends SbbNamedSlotListMixin<SbbIconElement,
   public static readonly events = {
     sectorChange: 'sectorChange',
   } as const;
-  protected override readonly listChildTagNames = ['SBB-ICON'];
+  protected override readonly listChildLocalNames = ['sbb-icon'];
 
   /** Wagon type. */
   @property({ reflect: true }) public type: 'locomotive' | 'closed' | 'wagon' = 'wagon';

src/components/train/train/train.ts

@@ -34,7 +34,10 @@ export class SbbTrainElement extends SbbNamedSlotListMixin<
   public static readonly events = {
     trainSlotChange: 'trainSlotChange',
   } as const;
-  protected override readonly listChildTagNames = ['SBB-TRAIN-WAGON', 'SBB-TRAIN-BLOCKED-PASSAGE'];
+  protected override readonly listChildLocalNames = [
+    'sbb-train-wagon',
+    'sbb-train-blocked-passage',
+  ];
 
   /** General label for "driving direction". */
   @property({ attribute: 'direction-label' }) public directionLabel!: string;

tools/eslint/index.ts

@@ -3,6 +3,7 @@ import type { TSESLint } from '@typescript-eslint/utils';
 import * as customElementClassName from './custom-element-class-name-rule.js';
 import * as customElementDecoratorPosition from './custom-element-decorator-position-rule.js';
 import * as importExtensionRule from './import-extension-rule.js';
+import * as useLocalName from './local-name-rule.js';
 import * as missingComponentDocumentation from './missing-component-documentation-rule.js';
 
 const plugin: Omit<Required<TSESLint.FlatConfig.Plugin>, 'processors'> = {
@@ -14,6 +15,7 @@ const plugin: Omit<Required<TSESLint.FlatConfig.Plugin>, 'processors'> = {
     [missingComponentDocumentation.name]: missingComponentDocumentation.rule,
     [customElementClassName.name]: customElementClassName.rule,
     [importExtensionRule.name]: importExtensionRule.rule,
+    [useLocalName.name]: useLocalName.rule,
     [customElementDecoratorPosition.name]: customElementDecoratorPosition.rule,
   },
 };