fix(core): segmented button accessibility improvements

SAP · Dec 1, 2023 · 9cbfa4e · 9cbfa4e
1 parent 39b9adc
commit 9cbfa4e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/libs/core/src/lib/button/button.component.ts b/libs/core/src/lib/button/button.component.ts
@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 import { BaseButton } from './base-button';
 import { Subscription } from 'rxjs';
-import { applyCssClass, CssClassBuilder } from '@fundamental-ngx/cdk/utils';
+import { applyCssClass, CssClassBuilder, FocusableItemDirective } from '@fundamental-ngx/cdk/utils';
 import { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
 
 import { FD_BUTTON_COMPONENT } from './tokens';
@@ -47,7 +47,8 @@ import { FD_BUTTON_COMPONENT } from './tokens';
             provide: FD_BUTTON_COMPONENT,
             useExisting: ButtonComponent
         }
-    ]
+    ],
+    hostDirectives: [FocusableItemDirective]
 })
 export class ButtonComponent extends BaseButton implements OnChanges, CssClassBuilder, OnInit, OnDestroy {
     /** The property allows user to pass additional css classes. */

diff --git a/libs/core/src/lib/segmented-button/segmented-button.component.ts b/libs/core/src/lib/segmented-button/segmented-button.component.ts
@@ -6,17 +6,19 @@ import {
     ContentChildren,
     ElementRef,
     forwardRef,
+    Host,
     HostBinding,
     HostListener,
     Input,
     OnDestroy,
+    Optional,
     QueryList,
     ViewEncapsulation
 } from '@angular/core';
 import { ButtonComponent, FD_BUTTON_COMPONENT } from '@fundamental-ngx/core/button';
 import { filter, observeOn, startWith, takeUntil, tap } from 'rxjs/operators';
 import { Subject, merge, fromEvent, asyncScheduler } from 'rxjs';
-import { DestroyedService, KeyUtil } from '@fundamental-ngx/cdk/utils';
+import { DestroyedService, FocusableListDirective, KeyUtil } from '@fundamental-ngx/cdk/utils';
 import { ENTER, SPACE } from '@angular/cdk/keycodes';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -40,7 +42,7 @@ export type SegmentedButtonValue = string | (string | null)[] | null;
     templateUrl: './segmented-button.component.html',
     styleUrls: ['./segmented-button.component.scss'],
     host: {
-        role: 'group'
+        role: 'listbox'
     },
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -51,7 +53,8 @@ export type SegmentedButtonValue = string | (string | null)[] | null;
             multi: true
         },
         DestroyedService
-    ]
+    ],
+    hostDirectives: [FocusableListDirective]
 })
 export class SegmentedButtonComponent implements AfterViewInit, ControlValueAccessor, OnDestroy {
     /** Whether segmented button is on toggle mode, which allows to toggle more than 1 button */
@@ -89,8 +92,13 @@ export class SegmentedButtonComponent implements AfterViewInit, ControlValueAcce
     constructor(
         private readonly _changeDetRef: ChangeDetectorRef,
         private readonly _elementRef: ElementRef,
-        private readonly _onDestroy$: DestroyedService
-    ) {}
+        private readonly _onDestroy$: DestroyedService,
+        @Optional() @Host() private focusableList: FocusableListDirective
+    ) {
+        if (this.focusableList) {
+            this.focusableList.navigationDirection = 'horizontal';
+        }
+    }
 
     /** @hidden */
     ngAfterViewInit(): void {
@@ -150,7 +158,10 @@ export class SegmentedButtonComponent implements AfterViewInit, ControlValueAcce
                 this._onRefresh$.next();
                 this._toggleDisableButtons(this._isDisabled);
                 this._pickButtonsByValues(this._currentValue);
-                this._buttons.forEach((button) => this._listenToTriggerEvents(button));
+                this._buttons.forEach((button) => {
+                    button.elementRef.nativeElement.role = 'option';
+                    this._listenToTriggerEvents(button);
+                });
             });
     }