From 298038f94ce2d43e25064851372b5a5ff7b7e85e Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Fri, 12 Apr 2024 11:13:27 +0200
Subject: [PATCH] fix: move hostAttributes to base class

---
 .../autocomplete-grid-optgroup.ts                      | 10 ----------
 .../option/optgroup/optgroup-base-element.ts           |  2 ++
 src/components/option/optgroup/optgroup.ts             | 10 ----------
 3 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
index a30481de228..e812e5a3944 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
+++ b/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(
diff --git a/src/components/option/optgroup/optgroup-base-element.ts b/src/components/option/optgroup/optgroup-base-element.ts
index 893cb6957d4..8f5a6213af6 100644
--- a/src/components/option/optgroup/optgroup-base-element.ts
+++ b/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),
 ) {
diff --git a/src/components/option/optgroup/optgroup.ts b/src/components/option/optgroup/optgroup.ts
index 56ec3699105..9d793dbc34f 100644
--- a/src/components/option/optgroup/optgroup.ts
+++ b/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[];