fix(core): segmented button accessibility improvements

.github/workflows/on-pull-request.yml

@@ -16,32 +16,25 @@ concurrency:
     cancel-in-progress: true
 
 jobs:
-    agents:
-        name: Ubuntu latest
-        uses: nrwl/ci/.github/workflows/[email protected]
-        secrets:
-            NX_CLOUD_AUTH_TOKEN: ${{ secrets.NX_CLOUD_AUTH_TOKEN }}
-            NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_AUTH_TOKEN }}
-        with:
-            number-of-agents: 8
-            node-version: 16.x
-            yarn-version: 1.22.19
-            install-commands: |
-                yarn install --frozen-lockfile
-                export DISPLAY=:99
-                sudo Xvfb -ac :99 -screen 0 1920x1080x24 > /dev/null 2>&1 &
-
-    initialize_cloud:
+    nx_agents:
+        name: Nx Cloud Agent ${{ matrix.agent }}
         runs-on: ubuntu-latest
-        name: Initialize Nx Cloud
+        strategy:
+            matrix:
+                agent: [1, 2, 3, 4, 5, 6, 7, 8]
         steps:
             - uses: actions/checkout@v3
             - uses: ./.github/actions/nodejs
-            - name: Initialize the Nx Cloud distributed CI run
-              run: npx nx-cloud start-ci-run
+            - name: set up xvfb
+              run: |
+                  export DISPLAY=:99
+                  sudo Xvfb -ac :99 -screen 0 1920x1080x24 > /dev/null 2>&1 &
+            - name: Start Nx Cloud Agent
+              run: npx nx-cloud start-agent
+              env:
+                  NX_AGENT_NAME: ${{matrix.agent}}
 
     build_test:
-        needs: initialize_cloud
         runs-on: ubuntu-latest
         name: Run affected Build, Lint and test commands
         defaults:
@@ -52,13 +45,24 @@ jobs:
             - uses: actions/checkout@v3
               name: Checkout
               with:
+                  ref: ${{ github.event.pull_request.head.sha }}
                   fetch-depth: 0
+
             - uses: nrwl/nx-set-shas@v2
               name: Derive appropriate SHAs for base and head for nx-affected commands
               with:
                   main-branch-name: main
+
             - uses: ./.github/actions/nodejs
 
+            - name: Initialize the Nx Cloud distributed CI run
+              run: npx nx-cloud start-ci-run
+
+            - name: Format Check
+              run: npx nx format:check --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD
+              env:
+                  NX_CLOUD_DISTRIBUTED_EXECUTION: false
+
             - uses: wagoid/commitlint-github-action@v3
               name: Commit lint
 
@@ -68,15 +72,12 @@ jobs:
                   parallel-commands: |
                       npx nx affected --target=build --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD --exclude=docs --parallel=3
                       npx nx affected --target=test --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD --exclude=nx-plugin --parallel=3
-                      npx nx affected --target=lint --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD --exclude=core,platform,cx --parallel=3
-                      npx nx run nx-plugin:test --skip-nx-cache
-            - name: Format Check
-              run: npx nx format:check --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD
-              env:
-                  NX_CLOUD_DISTRIBUTED_EXECUTION: false
+                      npx nx affected --target=lint --base=origin/${{ github.event.pull_request.base.ref }} --head=HEAD --exclude=core,platform,cx,btp --parallel=3
+
+            - name: Text workspace tags
+              run: npx nx run nx-plugin:test --skip-nx-cache
 
     e2e_test:
-        needs: initialize_cloud
         runs-on: ubuntu-latest
         name: Run affected e2e commands
         defaults:

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. */

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);
+                });
             });
     }