diff --git a/src/components-examples/aria/toolbar/index.ts b/src/components-examples/aria/toolbar/index.ts
index 96b07f6ac29c..ca0f7592339f 100644
--- a/src/components-examples/aria/toolbar/index.ts
+++ b/src/components-examples/aria/toolbar/index.ts
@@ -1,2 +1,3 @@
export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar-basic-horizontal-example';
export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example';
+export {ToolbarSkipDisabledExample} from './toolbar-skip-disabled/toolbar-skip-disabled-example';
diff --git a/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.html b/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.html
new file mode 100644
index 000000000000..b67a71410005
--- /dev/null
+++ b/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.html
@@ -0,0 +1,48 @@
+
diff --git a/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.ts b/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.ts
new file mode 100644
index 000000000000..827b85bc5442
--- /dev/null
+++ b/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.ts
@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar';
+import {RadioGroup, RadioButton} from '@angular/aria/radio-group';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
+
+/** @title Skip Disabled Toolbar Example */
+@Component({
+ selector: 'toolbar-skip-disabled-example',
+ templateUrl: 'toolbar-skip-disabled-example.html',
+ styleUrl: '../toolbar-common.css',
+ imports: [RadioButton, RadioGroup, Toolbar, ToolbarWidget],
+})
+export class ToolbarSkipDisabledExample {
+ constructor(private _liveAnnouncer: LiveAnnouncer) {}
+ alignments = [
+ {value: 'left', label: 'Left'},
+ {value: 'center', label: 'Center'},
+ {value: 'right', label: 'Right'},
+ ];
+
+ // Control for which radio options are individually disabled
+ disabledOptions: string[] = ['center'];
+
+ format(tool: string) {
+ console.log(`Tool activated: ${tool}`);
+ this._liveAnnouncer.announce(`${tool} applied`, 'polite');
+ }
+ test(action: string) {
+ console.log(`Action triggered: ${action}`);
+ this._liveAnnouncer.announce(`${action} button activated`, 'polite');
+ }
+}
diff --git a/src/dev-app/aria-toolbar/toolbar-demo.html b/src/dev-app/aria-toolbar/toolbar-demo.html
index 91333482212c..c339fb73e877 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.html
+++ b/src/dev-app/aria-toolbar/toolbar-demo.html
@@ -4,6 +4,10 @@
Toolbar Basic Horizontal
+
+
Toolbar Skip Disabled
+
+
Configurable CDK Toolbar
diff --git a/src/dev-app/aria-toolbar/toolbar-demo.ts b/src/dev-app/aria-toolbar/toolbar-demo.ts
index a2d3a11f3c8a..a8acb63ce1c2 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.ts
+++ b/src/dev-app/aria-toolbar/toolbar-demo.ts
@@ -10,11 +10,12 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
import {
ToolbarBasicHorizontalExample,
ToolbarConfigurableExample,
+ ToolbarSkipDisabledExample,
} from '@angular/components-examples/aria/toolbar';
@Component({
templateUrl: 'toolbar-demo.html',
- imports: [ToolbarBasicHorizontalExample, ToolbarConfigurableExample],
+ imports: [ToolbarBasicHorizontalExample, ToolbarConfigurableExample, ToolbarSkipDisabledExample],
styleUrl: './toolbar-demo.css',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,