diff --git a/src/components-examples/aria/toolbar/index.ts b/src/components-examples/aria/toolbar/index.ts index 42e92a97467b..a29a9a9a26ca 100644 --- a/src/components-examples/aria/toolbar/index.ts +++ b/src/components-examples/aria/toolbar/index.ts @@ -1,4 +1,5 @@ export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar-basic-horizontal-example'; export {ToolbarBasicVerticalExample} from './toolbar-basic-vertical/toolbar-basic-vertical-example'; export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example'; +export {ToolbarRtlExample} from './toolbar-rtl/toolbar-rtl-example'; export {ToolbarSkipDisabledExample} from './toolbar-skip-disabled/toolbar-skip-disabled-example'; diff --git a/src/components-examples/aria/toolbar/toolbar-rtl/toolbar-rtl-example.html b/src/components-examples/aria/toolbar/toolbar-rtl/toolbar-rtl-example.html new file mode 100644 index 000000000000..7706d362b5b4 --- /dev/null +++ b/src/components-examples/aria/toolbar/toolbar-rtl/toolbar-rtl-example.html @@ -0,0 +1,43 @@ +
+
+ + + + + +
+
diff --git a/src/components-examples/aria/toolbar/toolbar-rtl/toolbar-rtl-example.ts b/src/components-examples/aria/toolbar/toolbar-rtl/toolbar-rtl-example.ts new file mode 100644 index 000000000000..c26bc51ed06c --- /dev/null +++ b/src/components-examples/aria/toolbar/toolbar-rtl/toolbar-rtl-example.ts @@ -0,0 +1,28 @@ +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 Basic RTL Toolbar Example */ +@Component({ + selector: 'toolbar-rtl-example', + templateUrl: 'toolbar-rtl-example.html', + styleUrl: '../toolbar-common.css', + imports: [RadioButton, RadioGroup, Toolbar, ToolbarWidget], +}) +export class ToolbarRtlExample { + constructor(private _liveAnnouncer: LiveAnnouncer) {} + alignments = [ + {value: 'left', label: 'Left'}, + {value: 'center', label: 'Center'}, + {value: 'right', label: 'Right'}, + ]; + 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 09b493315371..01ee2870f956 100644 --- a/src/dev-app/aria-toolbar/toolbar-demo.html +++ b/src/dev-app/aria-toolbar/toolbar-demo.html @@ -12,6 +12,10 @@

Toolbar Basic Vertical

Toolbar Skip Disabled

+
+

Toolbar RTL

+ +

Configurable CDK Toolbar

diff --git a/src/dev-app/aria-toolbar/toolbar-demo.ts b/src/dev-app/aria-toolbar/toolbar-demo.ts index 535db0baa8c7..f603f80ea006 100644 --- a/src/dev-app/aria-toolbar/toolbar-demo.ts +++ b/src/dev-app/aria-toolbar/toolbar-demo.ts @@ -11,6 +11,7 @@ import { ToolbarBasicHorizontalExample, ToolbarBasicVerticalExample, ToolbarConfigurableExample, + ToolbarRtlExample, ToolbarSkipDisabledExample, } from '@angular/components-examples/aria/toolbar'; @@ -20,6 +21,7 @@ import { ToolbarBasicHorizontalExample, ToolbarBasicVerticalExample, ToolbarConfigurableExample, + ToolbarRtlExample, ToolbarSkipDisabledExample, ], styleUrl: './toolbar-demo.css',