@skyux/lists 13.6.2 → 13.7.1

package/fesm2022/skyux-lists.mjs

@@ -598,11 +598,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
  */
 class SkyListSummaryComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyListSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyListSummaryComponent, isStandalone: true, selector: "sky-list-summary", hostDirectives: [{ directive: i1$2.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content select=\"sky-list-summary-item\" />\n<div class=\"sky-list-summary-content-container\">\n  <ng-content />\n</div>\n", styles: [":host.sky-cmp-theme-default{--sky-override-list-summary-item-gap: 15px;--sky-override-list-summary-padding: 5px 10px 10px;--sky-override-list-summary-background-color: #ffffff;--sky-override-list-summary-border-bottom: 1px solid #cdcfd2}:host{display:flex;flex-wrap:wrap;column-gap:var(--sky-override-list-summary-item-gap, var(--sky-space-inline-xl));align-items:baseline;padding:var(--sky-override-list-summary-padding, var(--sky-comp-list_summary-space-inset-top) var(--sky-comp-list_summary-space-inset-right) var(--sky-comp-list_summary-space-inset-bottom) var(--sky-comp-list_summary-space-inset-left));background-color:var(--sky-override-list-summary-background-color, var(--sky-comp-override-list-header-background-color));border-bottom:var(--sky-override-list-summary-border-bottom, none)}.sky-list-summary-content-container{display:inline-block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: SkyListSummaryComponent, isStandalone: true, selector: "sky-list-summary", hostDirectives: [{ directive: i1$2.SkyThemeComponentClassDirective }], ngImport: i0, template: "<ng-content select=\"sky-list-summary-item\" />\n<div class=\"sky-list-summary-content-container\">\n  <ng-content />\n</div>\n", styles: [":host.sky-cmp-theme-default{--sky-override-list-summary-item-gap: 15px;--sky-override-list-summary-padding: 5px 10px 10px;--sky-override-list-summary-background-color: #ffffff;--sky-override-list-summary-border-bottom: 1px solid #cdcfd2}:host{display:flex;flex-wrap:wrap;column-gap:var(--sky-override-list-summary-item-gap, var(--sky-space-inline-xl));align-items:baseline;padding:var(--sky-override-list-summary-padding, var(--sky-comp-list_summary-space-inset-top) var(--sky-comp-list_summary-space-inset-right) var(--sky-comp-list_summary-space-inset-bottom) var(--sky-comp-list_summary-space-inset-left));background-color:var(--sky-override-list-summary-background-color, var(--sky-comp-override-list-header-background-color));border-bottom:var(--sky-override-list-summary-border-bottom, none)}:host-context(.sky-viewkeeper-fixed){background-color:var(--sky-override-list-summary-background-color, var(--sky-comp-override-list-header-background-color, var(--sky-background-color-page-default, var(--sky-color-background-page))))}.sky-list-summary-content-container{display:inline-block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyListSummaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-list-summary', hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content select=\"sky-list-summary-item\" />\n<div class=\"sky-list-summary-content-container\">\n  <ng-content />\n</div>\n", styles: [":host.sky-cmp-theme-default{--sky-override-list-summary-item-gap: 15px;--sky-override-list-summary-padding: 5px 10px 10px;--sky-override-list-summary-background-color: #ffffff;--sky-override-list-summary-border-bottom: 1px solid #cdcfd2}:host{display:flex;flex-wrap:wrap;column-gap:var(--sky-override-list-summary-item-gap, var(--sky-space-inline-xl));align-items:baseline;padding:var(--sky-override-list-summary-padding, var(--sky-comp-list_summary-space-inset-top) var(--sky-comp-list_summary-space-inset-right) var(--sky-comp-list_summary-space-inset-bottom) var(--sky-comp-list_summary-space-inset-left));background-color:var(--sky-override-list-summary-background-color, var(--sky-comp-override-list-header-background-color));border-bottom:var(--sky-override-list-summary-border-bottom, none)}.sky-list-summary-content-container{display:inline-block}\n"] }]
+            args: [{ selector: 'sky-list-summary', hostDirectives: [SkyThemeComponentClassDirective], template: "<ng-content select=\"sky-list-summary-item\" />\n<div class=\"sky-list-summary-content-container\">\n  <ng-content />\n</div>\n", styles: [":host.sky-cmp-theme-default{--sky-override-list-summary-item-gap: 15px;--sky-override-list-summary-padding: 5px 10px 10px;--sky-override-list-summary-background-color: #ffffff;--sky-override-list-summary-border-bottom: 1px solid #cdcfd2}:host{display:flex;flex-wrap:wrap;column-gap:var(--sky-override-list-summary-item-gap, var(--sky-space-inline-xl));align-items:baseline;padding:var(--sky-override-list-summary-padding, var(--sky-comp-list_summary-space-inset-top) var(--sky-comp-list_summary-space-inset-right) var(--sky-comp-list_summary-space-inset-bottom) var(--sky-comp-list_summary-space-inset-left));background-color:var(--sky-override-list-summary-background-color, var(--sky-comp-override-list-header-background-color));border-bottom:var(--sky-override-list-summary-border-bottom, none)}:host-context(.sky-viewkeeper-fixed){background-color:var(--sky-override-list-summary-background-color, var(--sky-comp-override-list-header-background-color, var(--sky-background-color-page-default, var(--sky-color-background-page))))}.sky-list-summary-content-container{display:inline-block}\n"] }]
         }] });
 
 class SkyListSummaryModule {
@@ -818,7 +818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 
 /**
  * Wraps and styles a
- * [`skyux-dropdown` component](https://developer.blackbaud.com/skyux-popovers/docs/dropdown).
+ * [`sky-dropdown` component](https://developer.blackbaud.com/skyux-popovers/docs/dropdown).
  */
 /* istanbul ignore next */
 /* Code coverage having problems with no statements in classes */
@@ -1004,13 +1004,12 @@ let nextContentId = 0;
  */
 class SkyRepeaterItemComponent {
     /**
-     * Make the first, non-disabled item tab-focusable.
-     * - Disabled items should not be focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_disabled_controls).
-     * - One item per list/grid/listbox should be tab focusable per [W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#grid).
+     * Make the first, non-disabled item tab-focusable in a selectable repeater.
+     * - Disabled items should not be focusable per [W3C](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols).
+     * - One item per grid should be tab focusable per [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
      */
     get tabindex() {
-        return this.#repeaterService.items.filter((item) => !item.disabled)[0] ===
-            this
+        return this.#repeaterService.items.find((item) => !item.disabled && this.selectable) === this
             ? 0
             : -1;
     }
@@ -1822,15 +1821,13 @@ class SkyRepeaterComponent {
         });
     }
     #updateRole() {
-        // Determine a role using a hierarchy based on https://www.w3.org/TR/wai-aria-practices-1.1/
-        //   1. If there are one or more interactions in the repeater item projected content, use grid.
-        //   2. If there are selectable repeater items and no other interactions, use listbox.
-        //   3. If there are no interactions, use list.
+        // Determine a role using a hierarchy based on https://www.w3.org/WAI/ARIA/apg/
+        //   - If there are one or more interactions in the repeater item projected content or there is a context menu, use `grid`.
+        //   - If there are no interactions, use `list`.
         // Default to list role.
         let autoRole = 'list';
         const roleMap = {
             list: { item: 'listitem', title: undefined, content: undefined },
-            listbox: { item: 'option', title: undefined, content: undefined },
             grid: { item: 'row', title: 'rowheader', content: 'gridcell' },
         };
         // Based on https://html.spec.whatwg.org/multipage/dom.html#interactive-content
@@ -1851,14 +1848,14 @@ class SkyRepeaterComponent {
             '.sky-repeater[role="grid"]',
         ]
             .map((selector) => `sky-repeater-item-title ${selector}:not([hidden]), sky-repeater-item-content ${selector}:not([hidden])`)
-            .concat([`skyux-dropdown`])
+            .concat([`sky-dropdown`])
             .join(', ');
         const hasInteraction = this.reorderable ||
             this.items?.some((item) => item.isCollapsible) ||
             this.items?.some((item) => !!item.selectable) ||
             !!this.#elementRef.nativeElement.querySelector(interactionSelector);
         if (hasInteraction) {
-            // If the repeater matches interaction selector https://www.w3.org/TR/wai-aria-practices-1.1/#grid
+            // If the repeater matches interaction selector https://www.w3.org/WAI/ARIA/apg/patterns/grid/
             autoRole = 'grid';
         }
         if (this.role !== autoRole) {