fix: move hostAttributes to base class

src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts

@@ -1,26 +1,16 @@
 import { customElement } from 'lit/decorators.js';
 
-import { hostAttributes } from '../../core/decorators.js';
-import { isSafari } from '../../core/dom.js';
 import { SbbOptgroupBaseElement } from '../../option/optgroup.js';
 import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
 import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
 import type { SbbAutocompleteGridElement } from '../autocomplete-grid.js';
 
-/**
- * On Safari, the groups labels are not read by VoiceOver.
- * To solve the problem, we remove the role="group" and add a hidden span containing the group name
- * TODO: We should periodically check if it has been solved and, if so, remove the property.
- */
-const inertAriaGroups = isSafari();
-
 /**
  * It can be used as a container for one or more `sbb-autocomplete-grid-option`.
  *
  * @slot - Use the unnamed slot to add `sbb-autocomplete-grid-option` elements to the `sbb-autocomplete-grid-optgroup`.
  */
 @customElement('sbb-autocomplete-grid-optgroup')
-@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
 export class SbbAutocompleteGridOptgroupElement extends SbbOptgroupBaseElement {
   protected get options(): SbbAutocompleteGridOptionElement[] {
     return Array.from(

src/components/option/optgroup/optgroup-base-element.ts

@@ -8,6 +8,7 @@ import {
 import { property, state } from 'lit/decorators.js';
 
 import type { SbbAutocompleteBaseElement } from '../../autocomplete.js';
+import { hostAttributes } from '../../core/decorators.js';
 import { isSafari, setOrRemoveAttribute } from '../../core/dom.js';
 import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins.js';
 import { AgnosticMutationObserver } from '../../core/observers.js';
@@ -24,6 +25,7 @@ import '../../divider.js';
  */
 const inertAriaGroups = isSafari();
 
+@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
 export abstract class SbbOptgroupBaseElement extends SbbDisabledMixin(
   SbbHydrationMixin(LitElement),
 ) {

src/components/option/optgroup/optgroup.ts

@@ -1,26 +1,16 @@
 import { customElement } from 'lit/decorators.js';
 
 import type { SbbAutocompleteElement } from '../../autocomplete.js';
-import { hostAttributes } from '../../core/decorators.js';
-import { isSafari } from '../../core/dom.js';
 import type { SbbOptionElement } from '../option.js';
 
 import { SbbOptgroupBaseElement } from './optgroup-base-element.js';
 
-/**
- * On Safari, the groups labels are not read by VoiceOver.
- * To solve the problem, we remove the role="group" and add a hidden span containing the group name
- * TODO: We should periodically check if it has been solved and, if so, remove the property.
- */
-const inertAriaGroups = isSafari();
-
 /**
  * It can be used as a container for one or more `sbb-option`.
  *
  * @slot - Use the unnamed slot to add `sbb-option` elements to the `sbb-optgroup`.
  */
 @customElement('sbb-optgroup')
-@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
 export class SbbOptGroupElement extends SbbOptgroupBaseElement {
   protected get options(): SbbOptionElement[] {
     return Array.from(this.querySelectorAll?.('sbb-option') ?? []) as SbbOptionElement[];