@skyux/tabs 5.0.4 → 5.1.0

package/modules/sectioned-form/sectioned-form-section.component.d.ts

@@ -27,12 +27,9 @@ export declare class SkySectionedFormSectionComponent implements OnInit, OnDestr
      * @default false
      */
     active: boolean;
-    get ariaRole(): string;
-    get ariaLabelledby(): string;
     fieldRequired: boolean;
     fieldInvalid: boolean;
     tab: SkyVerticalTabComponent;
-    private isMobile;
     private _ngUnsubscribe;
     constructor(sectionedFormService: SkySectionedFormService, tabsetService: SkyVerticalTabsetService, changeRef: ChangeDetectorRef);
     ngOnInit(): void;

package/modules/tabs/tab-button.component.d.ts

@@ -16,8 +16,8 @@ export declare class SkyTabButtonComponent {
     tabStyle: SkyTabsetStyle;
     buttonClick: EventEmitter<void>;
     closeClick: EventEmitter<void>;
-    onButtonClick(event: MouseEvent): void;
-    onButtonEnterKeyDown(event: any): void;
+    onButtonClick(event: any): void;
+    onTabButtonKeyDown(event: KeyboardEvent): void;
     onCloseClick(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyTabButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SkyTabButtonComponent, "sky-tab-button", never, { "active": "active"; "ariaControls": "ariaControls"; "buttonHref": "buttonHref"; "buttonId": "buttonId"; "buttonText": "buttonText"; "buttonTextCount": "buttonTextCount"; "closeable": "closeable"; "disabled": "disabled"; "tabStyle": "tabStyle"; }, { "buttonClick": "buttonClick"; "closeClick": "closeClick"; }, never, never>;

package/modules/tabs/tabset.component.d.ts

@@ -59,7 +59,7 @@ export declare class SkyTabsetComponent implements AfterViewInit, OnDestroy {
      * @deprecated The property was designed to create wizards by setting tabStyle="wizard" on tabsets in modals,
      * but this wizard implementation was replaced by the
      * [progress indicator component](https://developer.blackbaud.com/skyux/components/progress-indicator).
-     * @default 'tabs'
+     * @default "tabs"
      */
     set tabStyle(value: SkyTabsetStyle);
     get tabStyle(): SkyTabsetStyle;

package/modules/vertical-tabset/vertical-tab.component.d.ts

@@ -16,17 +16,9 @@ export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
      * Specifies the HTML element ID (without the leading `#`) of the element that contains
      * the content that the vertical tab displays, which corresponds to the `tabId`. This property
      * [supports accessibility rules for disclosures](https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).
+     * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
      */
-    get ariaControls(): string;
-    set ariaControls(value: string);
-    /**
-     * @internal
-     */
-    ariaInvalid: boolean;
-    /**
-     * @internal
-     */
-    ariaRequired: boolean;
+    ariaControls: string;
     /**
      * Specifies an ARIA role for the vertical tab
      * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
@@ -34,6 +26,8 @@ export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
      * an ARIA role indicates what an item represents on a web page, see the
      * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
      * @default "tab"
+     * @deprecated Any other value than `tab` could lead to a poor user experience for users with assistive technology.
+     * In the next major version, this property will be automatically set to `tab`.
      */
     get ariaRole(): string;
     set ariaRole(value: string);
@@ -63,14 +57,14 @@ export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
     set showTabRightArrow(value: boolean);
     /**
      * Specifies an ID for the tab.
+     * @deprecated Now that the vertical tabs provide aria labels automatically, this input is no longer necessary.
      */
     tabId: string;
     set contentRendered(value: boolean);
     get contentRendered(): boolean;
     index: number;
+    isMobile: boolean;
     tabContent: ElementRef;
-    private isMobile;
-    private _ariaControls;
     private _ariaRole;
     private _contentRendered;
     private _mobileSubscription;
@@ -81,9 +75,10 @@ export declare class SkyVerticalTabComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     tabIndex(): number;
     activateTab(): void;
+    onTabButtonKeyUp(event: KeyboardEvent): void;
     onWindowResize(): void;
     tabDeactivated(): void;
     private updateBreakpointAndResponsiveClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyVerticalTabComponent, "sky-vertical-tab", never, { "active": "active"; "ariaControls": "ariaControls"; "ariaInvalid": "ariaInvalid"; "ariaRequired": "ariaRequired"; "ariaRole": "ariaRole"; "disabled": "disabled"; "errorIndicator": "errorIndicator"; "tabHeaderCount": "tabHeaderCount"; "tabHeading": "tabHeading"; "showTabRightArrow": "showTabRightArrow"; "tabId": "tabId"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyVerticalTabComponent, "sky-vertical-tab", never, { "active": "active"; "ariaControls": "ariaControls"; "ariaRole": "ariaRole"; "disabled": "disabled"; "errorIndicator": "errorIndicator"; "tabHeaderCount": "tabHeaderCount"; "tabHeading": "tabHeading"; "showTabRightArrow": "showTabRightArrow"; "tabId": "tabId"; }, {}, never, ["*"]>;
 }

package/modules/vertical-tabset/vertical-tabset-group.component.d.ts

@@ -6,7 +6,7 @@ export declare class SkyVerticalTabsetGroupComponent implements OnInit, OnDestro
     private changeRef;
     /**
      * Indicates whether to disable the ability to expand and collapse the group.
-     * @default "false"
+     * @default false
      */
     disabled: boolean;
     /**
@@ -15,7 +15,7 @@ export declare class SkyVerticalTabsetGroupComponent implements OnInit, OnDestro
     groupHeading: string;
     /**
      * Indicates whether the collapsible group is expanded.
-     * @default "false"
+     * @default false
      */
     set open(value: boolean);
     get open(): boolean;

package/modules/vertical-tabset/vertical-tabset.component.d.ts

@@ -12,6 +12,19 @@ export declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChec
      * Specifies the text to display on the show tabs button on mobile devices.
      */
     showTabsText: string;
+    /**
+     * Specifies an ARIA label for the tabset. This sets the tabset's `aria-label` attribute
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
+     * If the tabset includes a visible label, use `ariaLabelledBy` instead.
+     */
+    ariaLabel: string;
+    /**
+     * Specifies the HTML element ID (without the leading `#`) of the element that labels
+     * the tabset. This sets the tabset's `aria-labelledby` attribute
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
+     * If the tabset does not include a visible label, use `ariaLabel` instead.
+     */
+    ariaLabelledBy: string;
     /**
      * Specifies an ARIA role for the vertical tabset
      * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
@@ -19,13 +32,15 @@ export declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChec
      * an ARIA role indicates what an item represents on a web page, see the
      * [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/roles).
      * @default "tablist"
+     * @deprecated Any other value than `tablist` could lead to a poor user experience for users with assistive technology.
+     * In the next major version, this property will be automatically set to `tablist`.
      */
     get ariaRole(): string;
     set ariaRole(value: string);
     /**
      * Indicates whether the vertical tabset loads tab content during initialization so that it
      * displays content without moving around elements in the content container.
-     * @default 'false'
+     * @default false
      */
     maintainTabContent: boolean;
     /**
@@ -44,5 +59,5 @@ export declare class SkyVerticalTabsetComponent implements OnInit, AfterViewChec
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabsetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyVerticalTabsetComponent, "sky-vertical-tabset", never, { "showTabsText": "showTabsText"; "ariaRole": "ariaRole"; "maintainTabContent": "maintainTabContent"; }, { "activeChange": "activeChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyVerticalTabsetComponent, "sky-vertical-tabset", never, { "showTabsText": "showTabsText"; "ariaLabel": "ariaLabel"; "ariaLabelledBy": "ariaLabelledBy"; "ariaRole": "ariaRole"; "maintainTabContent": "maintainTabContent"; }, { "activeChange": "activeChange"; }, never, ["*"]>;
 }

package/modules/vertical-tabset/vertical-tabset.module.d.ts

@@ -4,10 +4,11 @@ import * as i2 from "./vertical-tabset-group.component";
 import * as i3 from "./vertical-tab.component";
 import * as i4 from "@angular/common";
 import * as i5 from "@skyux/indicators";
-import * as i6 from "../shared/sky-tabs-resources.module";
-import * as i7 from "@skyux/theme";
+import * as i6 from "@skyux/core";
+import * as i7 from "../shared/sky-tabs-resources.module";
+import * as i8 from "@skyux/theme";
 export declare class SkyVerticalTabsetModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyVerticalTabsetModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyVerticalTabsetModule, [typeof i1.SkyVerticalTabsetComponent, typeof i2.SkyVerticalTabsetGroupComponent, typeof i3.SkyVerticalTabComponent], [typeof i4.CommonModule, typeof i5.SkyChevronModule, typeof i5.SkyIconModule, typeof i5.SkyStatusIndicatorModule, typeof i6.SkyTabsResourcesModule, typeof i7.SkyThemeModule], [typeof i1.SkyVerticalTabsetComponent, typeof i2.SkyVerticalTabsetGroupComponent, typeof i3.SkyVerticalTabComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyVerticalTabsetModule, [typeof i1.SkyVerticalTabsetComponent, typeof i2.SkyVerticalTabsetGroupComponent, typeof i3.SkyVerticalTabComponent], [typeof i4.CommonModule, typeof i5.SkyIconModule, typeof i6.SkyIdModule, typeof i5.SkyExpansionIndicatorModule, typeof i5.SkyStatusIndicatorModule, typeof i7.SkyTabsResourcesModule, typeof i8.SkyThemeModule], [typeof i1.SkyVerticalTabsetComponent, typeof i2.SkyVerticalTabsetGroupComponent, typeof i3.SkyVerticalTabComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SkyVerticalTabsetModule>;
 }

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@skyux/tabs",
-  "version": "5.0.4",
+  "version": "5.1.0",
   "peerDependencies": {
-    "@angular/common": "^12.2.15",
-    "@angular/core": "^12.2.15",
-    "@angular/router": "^12.2.15",
-    "@skyux/core": "^5.2.2",
-    "@skyux/i18n": "^5.0.1",
+    "@angular/common": "^12.2.16",
+    "@angular/core": "^12.2.16",
+    "@angular/router": "^12.2.16",
+    "@skyux/core": "^5.2.3",
+    "@skyux/i18n": "^5.0.2",
     "@skyux/forms": "^5.0.2",
-    "@skyux/indicators": "^5.1.2",
-    "@skyux/modals": "^5.0.3",
+    "@skyux/indicators": "^5.3.0",
+    "@skyux/modals": "^5.0.5",
     "@skyux/popovers": "^5.0.2",
-    "@skyux/theme": "^5.0.4"
+    "@skyux/theme": "^5.0.5"
   },
   "dependencies": {
     "tslib": "^2.3.1"