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

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: `Tema ${this.themeStorage === 'po-theme-dark' ? 'Light' : 'Dark'}`,
+        tooltip: `${this.themeStorage === 'po-theme-dark' ? 'Dark' : 'Light'}`,
         action: this.changeTheme.bind(this)
+      },
+      {
+        icon: `${this.a11yStorage === 'po-a11y-AAA' ? 'an-fill an-person-arms-spread' : 'an an-person-arms-spread'}`,
+        label: `Acessibilidade ${this.a11yStorage === 'po-a11y-AAA' ? 'AA' : 'AAA'}`,
+        tooltip: `${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);
   }
 }

projects/portal/src/styles.css

@@ -470,6 +470,10 @@ a,
 
 .show-me-the-code {
   float: right;
+}
+
+.show-me-the-code,
+.show-me-the-code .po-icon {
   font-size: 16px;
 }
 

projects/templates/src/lib/components/po-page-dynamic-edit/enums/po-page-dynamic-edit-actions.size.enum.ts

@@ -0,0 +1,14 @@
+/**
+ * @usedBy PoPageDynamicEditComponent
+ *
+ * @description
+ *
+ * Enum para configurar o tamanho (`p-size`) dos fields no componente.
+ */
+export enum PoPageDynamicEditActionsSize {
+  /** Define o tamanho dos fields com altura de 32px, disponível para acessibilidade AA. */
+  small = 'small',
+
+  /** Define o tamanho dos fields com altura de 44px. */
+  medium = 'medium'
+}

projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.html

@@ -12,13 +12,13 @@
 </ng-template>
 
 <ng-template #formFieldsTemplate>
-  <po-dynamic-form #dynamicForm [p-fields]="controlFields" [p-value]="model"> </po-dynamic-form>
+  <po-dynamic-form #dynamicForm [p-fields]="controlFields" [p-size]="size" [p-value]="model"> </po-dynamic-form>
 
   <div *ngIf="detailFields.length > 0" class="po-sm-12">
     <po-divider [p-label]="detailFields[0].divider"></po-divider>
 
     <div class="po-row po-mb-2">
-      <po-button [p-label]="literals.detailActionNew" (p-click)="detailActionNew()"></po-button>
+      <po-button [p-label]="literals.detailActionNew" [p-size]="size" (p-click)="detailActionNew()"></po-button>
     </div>
 
     <po-grid

projects/templates/src/lib/components/po-page-dynamic-edit/po-page-dynamic-edit.component.spec.ts

@@ -1,35 +1,42 @@
-import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { FormControl, FormsModule, NgForm, Validators } from '@angular/forms';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { throwError, of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 
-import { PoDialogModule } from '@po-ui/ng-components';
+import { PoDialogModule, PoThemeA11yEnum, PoThemeService } from '@po-ui/ng-components';
 
-import * as util from './../../utils/util';
 import { expectPropertiesValues } from './../../util-test/util-expect.spec';
+import * as util from './../../utils/util';
 
 import { poLocaleDefault } from './../../../../../ui/src/lib/services/po-language/po-language.constant';
 
-import { PoPageDynamicEditComponent, poPageDynamicEditLiteralsDefault } from './po-page-dynamic-edit.component';
 import { PoPageDynamicEditActions } from './interfaces/po-page-dynamic-edit-actions.interface';
-import { PoDynamicFormStubComponent } from './test/po-dynamic-form-stub-component';
-import { PoPageDynamicEditBeforeSave } from './interfaces/po-page-dynamic-edit-before-save.interface';
 import { PoPageDynamicEditBeforeSaveNew } from './interfaces/po-page-dynamic-edit-before-save-new.interface';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { PoPageDynamicEditBeforeSave } from './interfaces/po-page-dynamic-edit-before-save.interface';
+import { PoPageDynamicEditComponent, poPageDynamicEditLiteralsDefault } from './po-page-dynamic-edit.component';
+import { PoDynamicFormStubComponent } from './test/po-dynamic-form-stub-component';
 
 describe('PoPageDynamicEditComponent: ', () => {
   let component: PoPageDynamicEditComponent;
   let fixture: ComponentFixture<PoPageDynamicEditComponent>;
+  let poThemeService: jasmine.SpyObj<PoThemeService>;
 
   beforeEach(waitForAsync(() => {
+    poThemeService = jasmine.createSpyObj('PoThemeService', ['getA11yDefaultSize', 'getA11yLevel']);
+
     TestBed.configureTestingModule({
       declarations: [PoPageDynamicEditComponent, PoDynamicFormStubComponent],
       schemas: [NO_ERRORS_SCHEMA],
       imports: [FormsModule, RouterTestingModule.withRoutes([]), PoDialogModule],
-      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
+      providers: [
+        { provide: PoThemeService, useValue: poThemeService },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting()
+      ]
     }).compileComponents();
   }));
 
@@ -206,6 +213,46 @@ describe('PoPageDynamicEditComponent: ', () => {
 
       expect(component.duplicates).toEqual(duplicates);
     });
+
+    describe('p-size:', () => {
+      it('should update size with valid values', () => {
+        const validValues = ['medium'];
+
+        expectPropertiesValues(component, 'size', validValues, validValues);
+      });
+
+      it('should update size to `medium` with invalid values', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('medium');
+
+        const invalidValues = ['extraSmall', 'extraLarge'];
+
+        expectPropertiesValues(component, 'size', invalidValues, 'medium');
+      });
+
+      it('should use default size when size is not set', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('small');
+
+        component.size = undefined;
+        expect(component.size).toBe('small');
+      });
+
+      it('should return `p-size` if it is defined', () => {
+        component['_size'] = 'large';
+        expect(component.size).toBe('large');
+      });
+
+      it('should call `getDefaultSize` and return its value if `p-size` is null or undefined', () => {
+        spyOn(component as any, 'getDefaultSize').and.returnValue('medium');
+
+        component['_size'] = null;
+        expect(component.size).toBe('medium');
+        expect(component['getDefaultSize']).toHaveBeenCalled();
+
+        component['_size'] = undefined;
+        expect(component.size).toBe('medium');
+        expect(component['getDefaultSize']).toHaveBeenCalledTimes(2);
+      });
+    });
   });
 
   describe('Methods: ', () => {
@@ -1620,5 +1667,46 @@ describe('PoPageDynamicEditComponent: ', () => {
         expect(component.model).toEqual(expectedModel);
       });
     });
+
+    describe('validateSize:', () => {
+      it('should return the same size if valid and accessibility level allows it', () => {
+        poThemeService.getA11yLevel.and.returnValue(PoThemeA11yEnum.AA);
+
+        expect(component['validateSize']('small')).toBe('small');
+        expect(component['validateSize']('medium')).toBe('medium');
+      });
+
+      it('should return `medium` if p-size is `small` and accessibility level is not `AA`', () => {
+        poThemeService.getA11yLevel.and.returnValue(PoThemeA11yEnum.AAA);
+
+        expect(component['validateSize']('small')).toBe('medium');
+      });
+
+      it('should return default size from getA11yDefaultSize if value is invalid', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('small');
+
+        expect(component['validateSize']('invalid')).toBe('small');
+      });
+
+      it('should return `medium` if default size is `medium`', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('medium');
+
+        expect(component['validateSize']('invalid')).toBe('medium');
+      });
+    });
+
+    describe('getDefaultSize:', () => {
+      it('should return `small` if getA11yDefaultSize returns `small`', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('small');
+
+        expect(component['getDefaultSize']()).toBe('small');
+      });
+
+      it('should return `medium` if getA11yDefaultSize returns `medium`', () => {
+        poThemeService.getA11yDefaultSize.and.returnValue('medium');
+
+        expect(component['getDefaultSize']()).toBe('medium');
+      });
+    });
   });
 });