Fixed accessibility requirements on home summary page

packages/bits/demo/src/components/demo/color-picker/color-picker-basic/color-picker-basic.example.component.ts

@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import {
     FormBuilder,
     FormControl,
@@ -45,10 +45,10 @@ const CHART_PALETTE_CS1: string[] = [
     styles: [],
     standalone: false,
 })
-export class ColorPickerBasicExampleComponent {
+export class ColorPickerBasicExampleComponent implements OnInit {
     public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
     public colors: string[] = CHART_PALETTE_CS1;
-    
+
     constructor(
         private formBuilder: FormBuilder
     ) {}

packages/bits/demo/src/components/demo/color-picker/color-picker-palette/color-picker-palette.example.component.ts

@@ -18,12 +18,13 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import {
     FormBuilder,
     FormControl,
     FormGroup,
 } from "@angular/forms";
+
 import { HTML_COLORS, IPaletteColor } from "../../../../../../src/constants/color-picker.constants";
 
 
@@ -33,12 +34,12 @@ import { HTML_COLORS, IPaletteColor } from "../../../../../../src/constants/colo
     styles: [],
     standalone: false,
 })
-export class ColorPickerPaletteExampleComponent {
+export class ColorPickerPaletteExampleComponent implements OnInit {
     public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
     public colorPalette: IPaletteColor[] = Array.from(HTML_COLORS.entries())
     .map(([label, color]) => ({label,color}));
-  
-    
+
+
     constructor(
         private formBuilder: FormBuilder
     ) {}

packages/bits/demo/src/components/demo/color-picker/color-picker-select/color-picker-select.example.component.ts

@@ -18,12 +18,13 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import {
     FormBuilder,
     FormControl,
     FormGroup,
 } from "@angular/forms";
+
 import { HTML_COLORS, IPaletteColor } from "../../../../../../src/constants/color-picker.constants";
 
 
@@ -33,12 +34,12 @@ import { HTML_COLORS, IPaletteColor } from "../../../../../../src/constants/colo
     styles: [],
     standalone: false,
 })
-export class ColorPickerSelectExampleComponent {
+export class ColorPickerSelectExampleComponent implements OnInit {
     public myForm: FormGroup<{ backgroundColor: FormControl<string | null> }>;
     public colorPalette: IPaletteColor[] = Array.from(HTML_COLORS.entries())
     .map(([label, color]) => ({label,color}));
-  
-    
+
+
     constructor(
         private formBuilder: FormBuilder
     ) {}

packages/bits/demo/src/components/demo/color-picker/color-picker.module.ts

@@ -19,8 +19,8 @@
 //  THE SOFTWARE.
 
 import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { RouterModule } from "@angular/router";
 
 import {
     DEMO_PATH_TOKEN,
@@ -30,11 +30,12 @@ import {
     NuiPopoverModule,
     SrlcStage,
 } from "@nova-ui/bits";
-import { getDemoFiles } from "../../../static/demo-files-factory";
+
 import { ColorPickerBasicExampleComponent } from "./color-picker-basic/color-picker-basic.example.component";
+import { ColorPickerExampleComponent } from "./color-picker-docs/color-picker-docs.example.component";
 import { ColorPickerPaletteExampleComponent } from "./color-picker-palette/color-picker-palette.example.component";
 import { ColorPickerSelectExampleComponent } from "./color-picker-select/color-picker-select.example.component";
-import { ColorPickerExampleComponent } from "./color-picker-docs/color-picker-docs.example.component";
+import { getDemoFiles } from "../../../static/demo-files-factory";
 
 const routes = [
     {

packages/bits/src/common/directives/dragdrop/drag-and-drop.service.ts

@@ -71,7 +71,7 @@ export class DragAndDropService {
             event.dataTransfer?.getData("text/plain");
         try {
             return JSON.parse(payload || "");
-        } catch (e) {
+        } catch (_e) {
             return payload;
         }
     }

packages/bits/src/common/directives/resize/resize.directive.ts

@@ -32,9 +32,9 @@ import forEach from "lodash/forEach";
 /** @ignore */
 interface IResizeEventQueue {
     events: any[];
-    add(event: Function): void;
+    add(event: () => void): void;
     call(): void;
-    remove(event: Function): void;
+    remove(event: () => void): void;
 }
 /** @ignore */
 interface IResizeElement extends HTMLElement {
@@ -87,15 +87,15 @@ export class ResizeDirective implements AfterViewInit, OnDestroy {
     private resizeEventQueue = class implements IResizeEventQueue {
         public events: any[] = [];
 
-        public add(event: Function) {
+        public add(event: () => void) {
             this.events.push(event);
         }
 
         public call() {
             forEach(this.events, (event) => event.call());
         }
 
-        public remove(event: Function) {
+        public remove(event: () => void) {
             this.events = filter(
                 this.events,
                 (item: Function) => item !== event
@@ -134,7 +134,7 @@ export class ResizeDirective implements AfterViewInit, OnDestroy {
      */
     private attachResizeEvent(
         targetElement: IResizeElement,
-        resizeCallback: Function
+        resizeCallback: () => void
     ): void {
         if (targetElement.resizedAttached) {
             targetElement.resizedAttached.add(resizeCallback);
@@ -234,7 +234,7 @@ export class ResizeDirective implements AfterViewInit, OnDestroy {
      */
     private detachResizeEvent = (
         targetElement: IResizeElement,
-        event: Function
+        event: () => void
     ) => {
         if (targetElement.resizedAttached && typeof event === "function") {
             targetElement.resizedAttached.remove(event);

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

@@ -1,5 +1,4 @@
 <div
-    [attr.aria-label]="ariaLabel"
     class="nui-breadcrumb"
     *ngIf="items?.length > 1"
 >

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

@@ -35,7 +35,10 @@ import { BreadcrumbItem } from "./public-api";
     styleUrls: ["./breadcrumb.component.less"],
     templateUrl: "./breadcrumb.component.html",
     encapsulation: ViewEncapsulation.None,
-    host: { "[attr.aria-label]": "ariaLabel" },
+    host: {
+        "[attr.aria-label]": "ariaLabel",
+        "[attr.role]": "'navigation'",
+    },
     standalone: false,
 })
 export class BreadcrumbComponent {

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

@@ -188,7 +188,7 @@ export class CheckboxComponent
     @ViewChild("checkboxLabel")
     public checkboxLabel: ElementRef;
 
-    private rendererListener: Function;
+    private rendererListener: () => void;
     private sub: Subscription;
 
     private _ariaLabel: string = "Checkbox";

packages/bits/src/lib/color-picker/color-picker.component.spec.ts

@@ -18,6 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
+import { Overlay } from "@angular/cdk/overlay";
 import {
     Component,
     CUSTOM_ELEMENTS_SCHEMA,
@@ -26,11 +27,10 @@ import {
 } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
-import { Overlay } from "@angular/cdk/overlay";
+import { Subject } from "rxjs/internal/Subject";
 
 import { ColorPickerComponent } from "./color-picker.component";
 import { ColorService } from "./color.service";
-import { Subject } from "rxjs/internal/Subject";
 
 
 @Component({

packages/bits/src/lib/color-picker/color-picker.component.ts

@@ -34,11 +34,13 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { Subject } from "rxjs";
 import { takeUntil, tap } from "rxjs/operators";
+
+import { SelectV2Component } from "../select-v2/select/select-v2.component";
+
 import { ColorService } from "./color.service";
-import { getColorValueByName } from "./../../functions/color.helper";
-import { IPaletteColor } from "./../../constants/color-picker.constants";
+import { getColorValueByName } from "../../functions/color.helper";
+import { IPaletteColor } from "../../constants/color-picker.constants";
 import { getOverlayPositions, IOptionValueObject, IResizeConfig, NuiFormFieldControl, OverlayUtilitiesService } from "../public-api";
-import { SelectV2Component } from "../select-v2/select/select-v2.component";
 
 // Left and right paddings of .color-picker-container element
 const CONTAINER_SIDE_PADDINGS_PX: number = 20;
@@ -194,7 +196,7 @@ export class ColorPickerComponent
     public registerOnChange(fn: () => void): void {
         this.onChange = fn;
     }
-    
+
     public registerOnTouched(fn: () => void): void {
         this._onTouched = fn;
     }

packages/bits/src/lib/color-picker/color-picker.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
 
+import { NuiIconModule } from "../icon/icon.module";
+import { NuiSelectV2Module } from "../select-v2/select-v2.module";
 import { NuiCommonModule } from "../../common/common.module";
 import { ColorPickerComponent } from "./color-picker.component";
-import { NuiSelectV2Module } from "../select-v2/select-v2.module";
-import { NuiIconModule } from "../icon/icon.module";
 
 /**
  * @ignore

packages/bits/src/lib/date-picker/date-picker-inner.component.ts

@@ -89,12 +89,12 @@ export class DatePickerInnerComponent
     protected _value: Moment | undefined;
     protected _todayDate: Moment = moment();
 
-    protected refreshViewHandlerDay: Function;
-    protected compareHandlerDay: Function;
-    protected refreshViewHandlerMonth: Function;
-    protected compareHandlerMonth: Function;
-    protected refreshViewHandlerYear: Function;
-    protected compareHandlerYear: Function;
+    protected refreshViewHandlerDay: () => void;
+    protected compareHandlerDay: (d1: Moment, d2: Moment) => number | undefined;
+    protected refreshViewHandlerMonth: () => void;
+    protected compareHandlerMonth: (d1: Moment, d2: Moment) => number | undefined;
+    protected refreshViewHandlerYear: () => void;
+    protected compareHandlerYear: (d1: Moment, d2: Moment) => number | undefined;
 
     private modes: string[] = ["day", "month", "year"];
 
@@ -179,7 +179,10 @@ export class DatePickerInnerComponent
         return shouldRefreshView;
     }
 
-    public setCompareHandler(handler: Function, type: string): void {
+    public setCompareHandler(
+        handler: (d1: Moment, d2: Moment) => number | undefined,
+        type: string
+    ): void {
         if (type === "day") {
             this.compareHandlerDay = handler;
         }
@@ -213,7 +216,7 @@ export class DatePickerInnerComponent
         return void 0;
     }
 
-    public setRefreshViewHandler(handler: Function, type: string): void {
+    public setRefreshViewHandler(handler: () => void, type: string): void {
         if (type === "day") {
             this.refreshViewHandlerDay = handler;
         }

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

@@ -18,7 +18,7 @@
 //  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 //  THE SOFTWARE.
 
-import { CdkScrollable, ScrollDispatcher } from "@angular/cdk/scrolling";
+import { CdkScrollable } from "@angular/cdk/scrolling";
 import { DOCUMENT } from "@angular/common";
 import {
     AfterViewInit,

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

@@ -135,7 +135,7 @@ export class ImageComponent implements OnInit, AfterViewInit, OnChanges {
                 const svg = this.el.nativeElement.querySelector("svg");
                 svg.setAttribute("width", "100%");
                 svg.setAttribute("height", "100%");
-            } catch (e) {
+            } catch {
                 console.warn(
                     "Can't apply 'autoFill' to nui-image, because it is only applicable to SVG type of images"
                 );

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

@@ -22,7 +22,7 @@
     >
         <span>{{ title }}</span>
     </button>
-    <div popupAreaContent>
+    <div popupAreaContent role="menu">
         <nui-menu-popup
             *ngIf="itemsSource"
             [itemsSource]="itemsSource"

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

@@ -2,11 +2,10 @@
     <div class="nui-paginator__items">
         <ul
             class="nui-paginator__list"
-            role="listbox"
+            role="list"
             aria-label="List of pages"
         >
             <li
-                role="option"
                 title="{{ item.title }}"
                 [ngClass]="item.style"
                 *ngFor="let item of itemsList"

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

@@ -32,6 +32,7 @@
             [placeholder]="getPlaceholder()"
             (keyup)="onKeyup($event)"
             [attr.aria-invalid]="isInErrorState"
+            aria-label="Search"
         />
     </div>
 </div>

packages/bits/src/lib/table/table-state-handler.service.spec.ts

@@ -19,6 +19,7 @@
 //  THE SOFTWARE.
 
 import { NgZone } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
 
 import { TableSpecHelpers } from "./table-spec-helpers/table-spec-helpers";
 import {
@@ -91,10 +92,13 @@ describe("services >", () => {
         let serviceInstance: TableStateHandlerService;
 
         beforeEach(() => {
-            serviceInstance = new TableStateHandlerService(
-                NgZone as any,
-                SelectorService as any
-            );
+            TestBed.configureTestingModule({
+                providers: [
+                    TableStateHandlerService,
+                    { provide: SelectorService, useValue: {} },
+                ],
+            });
+            serviceInstance = TestBed.inject(TableStateHandlerService);
             serviceInstance.tableColumns = ["first", "second", "third"];
         });
 

packages/bits/src/lib/table/table-state-handler.service.ts

@@ -20,7 +20,7 @@
 
 import {
     forwardRef,
-    Inject,
+    inject,
     Injectable,
     NgZone,
     TrackByFunction,
@@ -144,11 +144,10 @@ export class TableStateHandlerService {
         desc: "triangle-down",
     };
 
-    constructor(
-        protected zone: NgZone,
-        @Inject(forwardRef(() => SelectorService))
-        protected selectorService: SelectorService
-    ) {}
+    protected zone = inject(NgZone);
+    protected selectorService = inject(SelectorService);
+
+    constructor() {}
 
     /**
      * Used to sync directives and components in table to apply additional styles and logic

packages/bits/src/lib/table/table-virtual-scroll/table-sticky-header.directive.ts

@@ -383,6 +383,8 @@ export class TableStickyHeaderDirective implements AfterViewInit, OnDestroy {
             this.renderer.addClass(this.stickyHeadContainer, cssClass)
         );
 
+        this.renderer.setAttribute(this.stickyHeadContainer, "role", "table");
+
         this.renderer.insertBefore(
             this.viewportEl.parentElement,
             wrapper,