use defaults for roles

Author: Blackbaud-ErikaMcVey

libs/components/tabs/src/lib/modules/tabs/tab-button.component.ts

@@ -19,6 +19,8 @@ import { SkyTabIndex } from './tab-index';
 import { SkyTabsetStyle } from './tabset-style';
 import { SkyTabsetService } from './tabset.service';
 
+const DEFAULT_ELEMENT_ROLE = 'tab';
+
 /**
  * @internal
  */
@@ -63,9 +65,9 @@ export class SkyTabButtonComponent implements AfterViewInit, OnDestroy {
     return this.#_tabStyle;
   }
 
-  public set tabStyle(style: SkyTabsetStyle) {
+  public set tabStyle(style: SkyTabsetStyle | undefined) {
     this.#_tabStyle = style;
-    this.elementRole = style === 'tabs' ? 'tab' : undefined;
+    this.elementRole = style === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
   }
 
   @Output()
@@ -86,7 +88,7 @@ export class SkyTabButtonComponent implements AfterViewInit, OnDestroy {
     this.#tabsetService = tabsetService;
   }
 
-  public elementRole: string | undefined = 'tab';
+  public elementRole: string | undefined = DEFAULT_ELEMENT_ROLE;
   public closeBtnTabIndex = '-1';
 
   #_tabStyle: SkyTabsetStyle;

libs/components/tabs/src/lib/modules/tabs/tabset.component.ts

@@ -26,6 +26,8 @@ import { SkyTabsetStyle } from './tabset-style';
 import { SkyTabsetTabIndexesChange } from './tabset-tab-indexes-change';
 import { SkyTabsetService } from './tabset.service';
 
+const DEFAULT_ELEMENT_ROLE = 'tablist';
+
 @Component({
   selector: 'sky-tabset',
   styleUrls: ['./tabset.component.scss'],
@@ -120,7 +122,7 @@ export class SkyTabsetComponent implements AfterViewInit, OnDestroy {
   @Input()
   public set tabStyle(value: SkyTabsetStyle) {
     this._tabStyle = value;
-    this.elementRole = value === 'tabs' ? 'tablist' : undefined;
+    this.elementRole = value === 'tabs' ? DEFAULT_ELEMENT_ROLE : undefined;
   }
 
   public get tabStyle(): SkyTabsetStyle {
@@ -186,7 +188,7 @@ export class SkyTabsetComponent implements AfterViewInit, OnDestroy {
 
   public tabButtons: TabButtonViewModel[] = [];
 
-  public elementRole: string | undefined = 'tablist';
+  public elementRole: string | undefined = DEFAULT_ELEMENT_ROLE;
 
   private ngUnsubscribe = new Subject<void>();