Remove multiselectable part from tabs ui pattern

Author: ok7sai

src/cdk-experimental/tabs/tabs.ts

@@ -53,7 +53,6 @@ export class CdkTabs {
     '[attr.tabindex]': 'pattern.tabindex()',
     '[attr.aria-disabled]': 'pattern.disabled()',
     '[attr.aria-orientation]': 'pattern.orientation()',
-    '[attr.aria-multiselectable]': 'pattern.multiselectable()',
     '[attr.aria-activedescendant]': 'pattern.activedescendant()',
     '(keydown)': 'pattern.onKeydown($event)',
     '(mousedown)': 'pattern.onPointerdown($event)',
@@ -77,9 +76,6 @@ export class CdkTablist {
   /** Whether the tablist is vertically or horizontally oriented. */
   orientation = input<'vertical' | 'horizontal'>('horizontal');
 
-  /** Whether multiple items in the list can be selected at once. */
-  multiselectable = input(false, {transform: booleanAttribute});
-
   /** Whether focus should wrap when navigating. */
   wrap = input(true, {transform: booleanAttribute});
 

src/cdk-experimental/ui-patterns/tabs/tablist.ts

@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ModifierKey as Modifier} from '../behaviors/event-manager/event-manager';
 import {KeyboardEventManager} from '../behaviors/event-manager/keyboard-event-manager';
 import {PointerEventManager} from '../behaviors/event-manager/pointer-event-manager';
 import {TabPattern} from './tab';
 import {ListSelection, ListSelectionInputs} from '../behaviors/list-selection/list-selection';
 import {ListNavigation, ListNavigationInputs} from '../behaviors/list-navigation/list-navigation';
 import {ListFocus, ListFocusInputs} from '../behaviors/list-focus/list-focus';
-import {computed, Signal} from '@angular/core';
+import {computed, signal, Signal} from '@angular/core';
 
 /** The selection operations that the tablist can perform. */
 interface SelectOptions {
@@ -28,7 +27,7 @@ interface SelectOptions {
 
 /** The required inputs for the tablist. */
 export type TablistInputs = ListNavigationInputs<TabPattern> &
-  ListSelectionInputs<TabPattern> &
+  Omit<ListSelectionInputs<TabPattern>, 'multiselectable'> &
   ListFocusInputs<TabPattern> & {
     disabled: Signal<boolean>;
   };
@@ -56,12 +55,6 @@ export class TablistPattern {
   /** The id of the current active tab. */
   activedescendant = computed(() => this.focusManager.getActiveDescendant());
 
-  /** Whether multiple tabs in the tablist can be selected at once. */
-  multiselectable: Signal<boolean>;
-
-  /** The number of tabs in the tablist. */
-  setsize = computed(() => this.navigation.inputs.items().length);
-
   followFocus = computed(() => this.inputs.selectionMode() === 'follow');
 
   /** The key used to navigate to the previous tab in the tablist. */
@@ -84,50 +77,20 @@ export class TablistPattern {
   keydown = computed(() => {
     const manager = new KeyboardEventManager();
 
-    if (!this.followFocus()) {
-      manager
-        .on(this.prevKey, () => this.prev())
-        .on(this.nextKey, () => this.next())
-        .on('Home', () => this.first())
-        .on('End', () => this.last());
-    }
-
     if (this.followFocus()) {
       manager
         .on(this.prevKey, () => this.prev({selectOne: true}))
         .on(this.nextKey, () => this.next({selectOne: true}))
         .on('Home', () => this.first({selectOne: true}))
         .on('End', () => this.last({selectOne: true}));
-    }
-
-    if (this.inputs.multiselectable()) {
-      manager
-        .on(Modifier.Shift, ' ', () => this._updateSelection({selectFromAnchor: true}))
-        .on(Modifier.Shift, this.prevKey, () => this.prev({toggle: true}))
-        .on(Modifier.Shift, this.nextKey, () => this.next({toggle: true}))
-        .on(Modifier.Ctrl | Modifier.Shift, 'Home', () => this.first({selectFromActive: true}))
-        .on(Modifier.Ctrl | Modifier.Shift, 'End', () => this.last({selectFromActive: true}))
-        .on(Modifier.Ctrl, 'A', () => this._updateSelection({selectAll: true}));
-    }
-
-    if (!this.followFocus() && this.inputs.multiselectable()) {
-      manager
-        .on(' ', () => this._updateSelection({toggle: true}))
-        .on('Enter', () => this._updateSelection({toggle: true}));
-    }
-
-    if (!this.followFocus() && !this.inputs.multiselectable()) {
-      manager
-        .on(' ', () => this._updateSelection({toggleOne: true}))
-        .on('Enter', () => this._updateSelection({toggleOne: true}));
-    }
-
-    if (this.inputs.multiselectable() && this.followFocus()) {
+    } else {
       manager
-        .on(Modifier.Ctrl, this.prevKey, () => this.prev())
-        .on(Modifier.Ctrl, this.nextKey, () => this.next())
-        .on(Modifier.Ctrl, 'Home', () => this.first()) // TODO: Not in spec but prob should be.
-        .on(Modifier.Ctrl, 'End', () => this.last()); // TODO: Not in spec but prob should be.
+        .on(this.prevKey, () => this.prev())
+        .on(this.nextKey, () => this.next())
+        .on('Home', () => this.first())
+        .on('End', () => this.last())
+        .on(' ', () => this._updateSelection({selectOne: true}))
+        .on('Enter', () => this._updateSelection({selectOne: true}));
     }
 
     return manager;
@@ -136,25 +99,21 @@ export class TablistPattern {
   /** The pointerdown event manager for the tablist. */
   pointerdown = computed(() => {
     const manager = new PointerEventManager();
-
-    if (this.inputs.multiselectable()) {
-      manager
-        .on(e => this.goto(e, {toggle: true}))
-        .on(Modifier.Shift, e => this.goto(e, {selectFromActive: true}));
-    } else {
-      manager.on(e => this.goto(e, {toggleOne: true}));
-    }
+    manager.on(e => this.goto(e, {selectOne: true}));
 
     return manager;
   });
 
   constructor(readonly inputs: TablistInputs) {
     this.disabled = inputs.disabled;
     this.orientation = inputs.orientation;
-    this.multiselectable = inputs.multiselectable;
 
     this.navigation = new ListNavigation(inputs);
-    this.selection = new ListSelection({...inputs, navigation: this.navigation});
+    this.selection = new ListSelection({
+      ...inputs,
+      navigation: this.navigation,
+      multiselectable: signal(false),
+    });
     this.focusManager = new ListFocus({...inputs, navigation: this.navigation});
   }
 

src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.css

@@ -1,20 +1,20 @@
-.example-listbox-controls {
+.example-tablist-controls {
   display: flex;
   align-items: center;
   gap: 16px;
   padding-bottom: 16px;
 }
 
-.tabs {
+.example-tabs {
   border: 1px solid var(--mat-sys-outline);
   min-height: 30vh;
 }
 
-.tabs:has(ul[aria-orientation='vertical']) {
+.example-tabs:has(ul[aria-orientation='vertical']) {
   display: flex;
 }
 
-ul {
+.example-tablist {
   gap: 8px;
   margin: 0;
   padding: 8px;
@@ -28,22 +28,22 @@ ul {
   overflow: scroll;
 }
 
-ul[aria-orientation='vertical'] {
+.example-tablist[aria-orientation='vertical'] {
   flex-direction: column;
   border-bottom: initial;
   border-right: 1px solid var(--mat-sys-outline);
   justify-content: start;
 }
 
-ul[aria-orientation='horizontal'] li::before {
+.example-tablist[aria-orientation='horizontal'] li::before {
   display: none;
 }
 
-ul[aria-orientation='horizontal'] li[aria-selected='true']::before {
+.example-tablist[aria-orientation='horizontal'] li[aria-selected='true']::before {
   display: block;
 }
 
-li {
+.example-tab {
   gap: 16px;
   padding: 16px;
   display: flex;
@@ -52,25 +52,25 @@ li {
   border-radius: var(--mat-sys-corner-extra-small);
 }
 
-li:hover,
-li[tabindex='0'] {
+.example-tab:hover,
+.example-tab[tabindex='0'] {
   outline: 1px solid var(--mat-sys-outline);
   background: var(--mat-sys-surface-container);
 }
 
-li:focus-within {
+.example-tab:focus-within {
   outline: 2px solid var(--mat-sys-primary);
   background: var(--mat-sys-surface-container);
 }
 
-li[aria-selected='true'] {
+.example-tab[aria-selected='true'] {
   background-color: var(--mat-sys-secondary-container);
 }
 
-[role='tabpanel'] {
+.example-tabpanel {
   margin: 8px;
 }
 
-[role='tabpanel'][aria-hidden='true'] {
+.example-tabpanel[aria-hidden='true'] {
   display: none;
 }

src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html

@@ -1,6 +1,5 @@
-<div class="example-listbox-controls">
+<div class="example-tablist-controls">
   <mat-checkbox [formControl]="wrap">Wrap</mat-checkbox>
-  <mat-checkbox [formControl]="multi">Multi</mat-checkbox>
   <mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
   <mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
 
@@ -30,24 +29,24 @@
 </div>
 
 <!-- #docregion tabs -->
-<div cdkTabs class="tabs">
+<div cdkTabs class="example-tabs">
   <ul
     cdkTablist
+    class="example-tablist"
     [wrap]="wrap.value"
     [disabled]="disabled.value"
-    [multiselectable]="multi.value"
     [skipDisabled]="skipDisabled.value"
     [orientation]="orientation"
     [focusMode]="focusMode"
     [selectionMode]="selectionMode"
   >
-    <li cdkTab>tab 1</li>
-    <li cdkTab>tab 2</li>
-    <li cdkTab>tab 3</li>
+    <li cdkTab class="example-tab">tab 1</li>
+    <li cdkTab class="example-tab">tab 2</li>
+    <li cdkTab class="example-tab">tab 3</li>
   </ul>
 
-  <div cdkTabpanel>Tabpanel 1</div>
-  <div cdkTabpanel>Tabpanel 2</div>
-  <div cdkTabpanel>Tabpanel 3</div>
+  <div cdkTabpanel class="example-tabpanel">Tabpanel 1</div>
+  <div cdkTabpanel class="example-tabpanel">Tabpanel 2</div>
+  <div cdkTabpanel class="example-tabpanel">Tabpanel 3</div>
 </div>
 <!-- #enddocregion tabs -->

src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.ts

@@ -28,7 +28,6 @@ export class CdkTabsExample {
   selectionMode: 'explicit' | 'follow' = 'follow';
 
   wrap = new FormControl(true, {nonNullable: true});
-  multi = new FormControl(false, {nonNullable: true});
   disabled = new FormControl(false, {nonNullable: true});
   skipDisabled = new FormControl(true, {nonNullable: true});
 }