Bugfix/oo 50848/nui toolbar access new

docs/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [20.0.6] 📅 2025-06-04
+### Fixes
+- `@nova-ui/bits` | A11y fixes for nui-toolbar
+
 ## [20.0.5] 📅 2025-06-04
 ### Fixes
 - `@nova-ui/bits` | A11y fixies for Home Summary

package.json

@@ -129,7 +129,7 @@
     "trigger-pipeline-build-ci": "bash scripts/trigger-pipeline-build",
     "verify-ci": "bash scripts/verify-published"
   },
-  "version": "20.0.5",
+  "version": "20.0.6",
   "workspaces": [
     "packages/*"
   ]

packages/bits/package.json

@@ -133,6 +133,6 @@
     "visual:watch": "npx watch \"yarn run visual:base\" src demo spec --watch=1"
   },
   "typings": "public_api.d.ts",
-  "version": "20.0.5",
+  "version": "20.0.6",
   "packageManager": "yarn@1.22.18"
 }

packages/bits/schematics/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nova-schematics",
   "license": "Apache-2.0",
-  "version": "20.0.5",
+  "version": "20.0.6",
   "scripts": {
     "assemble": "run-s build copy:json copy:data test copy:dist",
     "build": "tsc -p tsconfig.json",

packages/bits/src/lib/button/button.component.html

@@ -12,6 +12,7 @@
     [icon]="icon"
     [iconSize]="getIconSize()"
     [iconColor]="iconColor"
+    [decorative]="true"
 ></nui-icon>
 <div #contentContainer class="nui-button__content">
     <ng-content></ng-content>

packages/bits/src/lib/toolbar/toolbar-keyboard.service.spec.ts

@@ -122,6 +122,36 @@ describe("Services > ", () => {
                 service.onKeyDown(rightButtonPressEvent);
                 expect(spy).toHaveBeenCalled();
             });
+
+            it("should navigate to first element on pressing Home key", () => {
+                const items = service["toolbarItems"];
+                const first = items[0];
+                const last = items[items.length - 1];
+                const spy = spyOn(first, "focus");
+
+                last.focus();
+
+                service.onKeyDown({
+                    ...keyboardEventMock,
+                    code: KEYBOARD_CODE.HOME,
+                } as KeyboardEvent);
+                expect(spy).toHaveBeenCalled();
+            });
+
+            it("should navigate to last element on pressing End key", () => {
+                const items = service["toolbarItems"];
+                const first = items[0];
+                const last = items[items.length - 1];
+                const spy = spyOn(last, "focus");
+
+                first.focus();
+
+                service.onKeyDown({
+                    ...keyboardEventMock,
+                    code: KEYBOARD_CODE.END,
+                } as KeyboardEvent);
+                expect(spy).toHaveBeenCalled();
+            });
         });
     });
 });

packages/bits/src/lib/toolbar/toolbar-keyboard.service.ts

@@ -44,6 +44,16 @@ export class ToolbarKeyboardService {
             this.navigateByArrow(code);
         }
 
+        if (code === KEYBOARD_CODE.HOME) {
+            event.preventDefault();
+            this.focusFirst();
+        }
+
+        if (code === KEYBOARD_CODE.END) {
+            event.preventDefault();
+            this.focusLast();
+        }
+
         if (code === KEYBOARD_CODE.TAB) {
             this.closeMenuIfOpened();
         }

packages/bits/src/lib/toolbar/toolbar.component.ts

@@ -65,6 +65,9 @@ import { MenuComponent } from "../menu";
     host: {
         class: "nui-toolbar nui-strip-layout nui-flex-container",
         role: "toolbar",
+        "[attr.aria-label]": "ariaLabel || null",
+        "[attr.aria-labelledby]": "ariaLabelledBy || null",
+        "[attr.aria-orientation]": "ariaOrientation || null",
     },
     styleUrls: ["./toolbar.component.less"],
     encapsulation: ViewEncapsulation.None,
@@ -78,6 +81,12 @@ export class ToolbarComponent implements AfterViewInit, OnDestroy {
     @ContentChildren(ToolbarItemComponent, { descendants: true })
     public items: QueryList<ToolbarItemComponent>;
 
+    @Input() public ariaLabel?: string;
+
+    @Input() public ariaLabelledBy?: string;
+
+    @Input() public ariaOrientation?: "horizontal" | "vertical";
+
     @Input()
     /**
      * selectionEnabled: boolean which allows to show selected section

packages/charts/package.json

@@ -45,7 +45,7 @@
   "license": "Apache-2.0",
   "name": "@nova-ui/charts",
   "dependencies": {
-    "@nova-ui/bits": "~20.0.5"
+    "@nova-ui/bits": "~20.0.6"
   },
   "peerDependencies": {
     "@types/d3": "^5.0.0",
@@ -114,5 +114,5 @@
     "visual:gui": "yarn run visual:base -c gui",
     "visual:serve": "yarn run visual:base -c serve"
   },
-  "version": "20.0.5"
+  "version": "20.0.6"
 }

packages/dashboards/package.json

@@ -41,8 +41,8 @@
   "license": "Apache-2.0",
   "name": "@nova-ui/dashboards",
   "dependencies": {
-    "@nova-ui/bits": "~20.0.5",
-    "@nova-ui/charts": "~20.0.5"
+    "@nova-ui/bits": "~20.0.6",
+    "@nova-ui/charts": "~20.0.6"
   },
   "devDependencies": {
     "@apollo/client": "3.13.9",
@@ -116,5 +116,5 @@
     "visual:gui": "yarn run visual:base -c gui",
     "visual:serve": "yarn run visual:base -c serve"
   },
-  "version": "20.0.5"
+  "version": "20.0.6"
 }

packages/dashboards/schematics/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dashboards-schematics",
   "license": "Apache-2.0",
-  "version": "20.0.5",
+  "version": "20.0.6",
   "scripts": {
     "assemble": "run-s build copy:json copy:data test copy:dist",
     "build": "tsc -p tsconfig.json",