feat(components): implementa alternância no nível de acessibilidade

Implementa alternância no nível de acessibilidade dos componentes de formulário.

fixes DTHFUI-10108

Author: anabye

.gitignore

@@ -58,6 +58,8 @@ projects/portal/src/app/guide/menu-guides.service.ts
 projects/portal/src/app/documentation/samples/
 projects/portal/src/app/menu.service.ts
 projects/portal/src/assets/json/api-list.json
+projects/portal/src/assets/json/icons-fill.json
+projects/portal/src/assets/json/icons-regular.json
 projects/portal/src/assets/json/version.json
 projects/portal/src/app/documentation/documentation-routing.module.ts
 

README.md

@@ -39,7 +39,7 @@ yarn global add @angular/cli@19
 O [Angular CLI](https://cli.angular.io/) se encarrega de construir toda estrutura inicial do projeto. Para isso, execute o seguinte comando:
 
 ```
-ng new my-po-project --skipInstall
+ng new my-po-project --skip-install
 ```
 
 > O parâmetro `--skip-install` permite criar o projeto, contudo, não instalará as dependências automaticamente.

projects/portal/src/app/app.component.ts

@@ -1,7 +1,13 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
-import { PoMenuItem, PoNavbarIconAction, PoNavbarItem, PoNotificationService } from '@po-ui/ng-components';
+import {
+  PoMenuItem,
+  PoNavbarIconAction,
+  PoNavbarItem,
+  PoNotificationService,
+  PoThemeA11yEnum
+} from '@po-ui/ng-components';
 
 import { PoThemeService, PoThemeTypeEnum } from '../../../ui/src/lib';
 import { poThemeConstant } from './shared/po-theme.constant';
@@ -19,11 +25,14 @@ export class AppComponent implements OnInit, OnDestroy {
   items: Array<PoNavbarItem> = [];
   iconActions: Array<PoNavbarIconAction> = [];
   themeStorage = 'po-theme-default';
+  a11yStorage = 'po-a11y-AAA';
   logoPoUI = './assets/po-logos/po_black.png';
   theme: PoThemeTypeEnum = 0;
+  a11y: PoThemeA11yEnum = PoThemeA11yEnum.AAA;
 
   private location;
   private themeChangeListener: any;
+  private a11yChangeListener: any;
 
   constructor(
     private versionService: VersionService,
@@ -34,7 +43,7 @@ export class AppComponent implements OnInit, OnDestroy {
     const _poTheme = this.poTheme.applyTheme();
     if (!_poTheme) {
       this.theme = poThemeConstant.active;
-      this.poTheme.setTheme(poThemeConstant, this.theme);
+      this.poTheme.setTheme(poThemeConstant, this.theme, this.a11y);
     } else {
       this.theme = typeof _poTheme.active === 'object' ? _poTheme.active.type : _poTheme.active;
     }
@@ -45,6 +54,10 @@ export class AppComponent implements OnInit, OnDestroy {
       this.themeStorage = localStorage.getItem('po-ui-theme');
     }
 
+    if (localStorage.getItem('po-ui-a11y')) {
+      this.a11yStorage = localStorage.getItem('po-ui-a11y');
+    }
+
     const version = await this.versionService.getCurrentVersion().toPromise();
 
     this.items = [
@@ -67,7 +80,13 @@ export class AppComponent implements OnInit, OnDestroy {
     this.themeChangeListener = () => {
       this.changeTheme(false);
     };
+
+    this.a11yChangeListener = () => {
+      this.changeA11yLevel(false);
+    };
+
     window.addEventListener('po-sample-change-theme', this.themeChangeListener);
+    window.addEventListener('po-sample-change-a11y', this.a11yChangeListener);
   }
 
   openExternalLink(url) {
@@ -82,27 +101,52 @@ export class AppComponent implements OnInit, OnDestroy {
       this.themeStorage === 'po-theme-default' ? './assets/po-logos/po_black.png' : './assets/po-logos/po_white.png';
     this.iconActions = this.actions;
 
-    this.poTheme.setTheme(poThemeConstant, this.theme);
+    this.poTheme.setTheme(poThemeConstant, this.theme, this.a11y);
 
     if (dispatchEvent) {
       window.dispatchEvent(new Event(this.themeStorage));
     }
   }
 
+  changeA11yLevel(dispatchEvent = true) {
+    this.a11yStorage = this.a11yStorage === 'po-a11y-AAA' ? 'po-a11y-AA' : 'po-a11y-AAA';
+    localStorage.setItem('po-ui-a11y', this.a11yStorage);
+    this.a11y = this.a11yStorage === 'po-a11y-AAA' ? PoThemeA11yEnum.AAA : PoThemeA11yEnum.AA;
+    this.iconActions = this.actions;
+
+    this.poTheme.setTheme(poThemeConstant, this.theme, this.a11y);
+
+    if (dispatchEvent) {
+      window.dispatchEvent(new Event(this.a11yStorage));
+    }
+  }
+
   get actions() {
     return [
-      { icon: 'an an-github-logo', link: 'https://github.com/po-ui', label: 'Github' },
-      { icon: 'an an-x-logo', link: 'https://twitter.com/@pouidev', label: 'Twitter' },
-      { icon: 'an an-instagram-logo', link: 'https://www.instagram.com/pouidev/', label: 'Instagram' },
+      { icon: 'an an-github-logo', link: 'https://github.com/po-ui', label: 'Github', tooltip: 'Github' },
+      {
+        icon: 'an an-instagram-logo',
+        link: 'https://www.instagram.com/pouidev/',
+        label: 'Instagram',
+        tooltip: 'Instagram'
+      },
       {
         icon: `${this.themeStorage === 'po-theme-dark' ? 'an an-sun' : 'an an-moon'}`,
-        label: 'tema',
+        label: `Theme ${this.themeStorage === 'po-theme-dark' ? 'Light' : 'Dark'}`,
+        tooltip: `Theme ${this.themeStorage === 'po-theme-dark' ? 'Dark' : 'Light'}`,
         action: this.changeTheme.bind(this)
+      },
+      {
+        icon: `${this.a11yStorage === 'po-a11y-AAA' ? 'an-fill an-text-aa' : 'an an-text-aa'}`,
+        label: `Accessibility level ${this.a11yStorage === 'po-a11y-AAA' ? 'AA' : 'AAA'}`,
+        tooltip: `Accessibility level ${this.a11yStorage === 'po-a11y-AAA' ? 'AAA' : 'AA'}`,
+        action: this.changeA11yLevel.bind(this)
       }
     ];
   }
 
   ngOnDestroy(): void {
     window.removeEventListener('po-sample-change-theme', this.themeChangeListener);
+    window.removeEventListener('po-sample-change-a11y', this.a11yChangeListener);
   }
 }