From 6799de981ee2fbeb78c206289dc013862b8a0ed0 Mon Sep 17 00:00:00 2001 From: olshansky Date: Tue, 8 Jun 2021 10:35:38 +0300 Subject: [PATCH] fix(core): styles of group popover control & a11y issues --- apps/docs/src/app/core/api-files.ts | 1 + ...ar-group-group-type-example.component.html | 17 ++++++-- ...oup-individual-type-example.component.html | 42 ++++++++++++------- .../lib/avatar-group/avatar-group.module.ts | 3 ++ ...ar-group-popover-control.directive.spec.ts | 38 +++++++++++++++++ .../avatar-group-popover-control.directive.ts | 19 +++++++++ 6 files changed, 102 insertions(+), 18 deletions(-) create mode 100644 libs/core/src/lib/avatar-group/directives/avatar-group-popover-control.directive.spec.ts create mode 100644 libs/core/src/lib/avatar-group/directives/avatar-group-popover-control.directive.ts diff --git a/apps/docs/src/app/core/api-files.ts b/apps/docs/src/app/core/api-files.ts index 99e4666f506..f53383eb49c 100644 --- a/apps/docs/src/app/core/api-files.ts +++ b/apps/docs/src/app/core/api-files.ts @@ -26,6 +26,7 @@ export const API_FILES = { 'AvatarGroupComponent', 'AvatarGroupItemDirective', 'AvatarGroupFocusableAvatarDirective', + 'AvatarGroupPopoverControlDirective', 'AvatarGroupOverflowBodyDirective', 'AvatarGroupOverflowItemDirective', 'AvatarGroupOverflowButtonDirective', diff --git a/apps/docs/src/app/core/component-docs/avatar-group/examples/avatar-group-group-type-example.component.html b/apps/docs/src/app/core/component-docs/avatar-group/examples/avatar-group-group-type-example.component.html index 267c0513a0f..a46ef1bde21 100644 --- a/apps/docs/src/app/core/component-docs/avatar-group/examples/avatar-group-group-type-example.component.html +++ b/apps/docs/src/app/core/component-docs/avatar-group/examples/avatar-group-group-type-example.component.html @@ -9,13 +9,16 @@ placement="bottom" maxWidth="312" #overflowPopover> -
+ [label]="personDetails.firstName + ' ' + personDetails.lastName" + [title]="personDetails.firstName + ' ' + personDetails.lastName" + [ariaLabel]="personDetails.firstName + ' ' + personDetails.lastName + ' avatar'"> {{ personDetails.firstName }} {{ personDetails.lastName }} {{ personDetails.position }} diff --git a/apps/docs/src/app/core/component-docs/avatar-group/examples/avatar-group-individual-type-example.component.html b/apps/docs/src/app/core/component-docs/avatar-group/examples/avatar-group-individual-type-example.component.html index 8728c8cb1aa..a714acb78bb 100644 --- a/apps/docs/src/app/core/component-docs/avatar-group/examples/avatar-group-individual-type-example.component.html +++ b/apps/docs/src/app/core/component-docs/avatar-group/examples/avatar-group-individual-type-example.component.html @@ -20,7 +20,8 @@ [size]="size" role="img" [title]="person.firstName + ' ' + person.lastName" - [label]="person.firstName + ' ' + person.lastName"> + [label]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"> + [title]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"> + [title]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'">
@@ -47,23 +50,26 @@ + [label]="person.firstName + ' ' + person.lastName" + [title]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"> + [image]="person.imageUrl" + [title]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"> + [glyph]="person.glyph" + [title]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"> {{ person.firstName }} {{ person.lastName }} {{ person.position }} @@ -151,9 +157,10 @@ fd-avatar-group-focusable-avatar [circle]="true" size="s" - [label]="person.firstName + ' ' + person.lastName" role="img" + [label]="person.firstName + ' ' + person.lastName" [title]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'" (click)="openOverflowDetails(idx)" (keydown.enter)="openOverflowDetails(idx)" (keydown.space)="openOverflowDetails(idx)" @@ -163,9 +170,10 @@ fd-avatar-group-focusable-avatar [circle]="true" size="s" - [image]="person.imageUrl" role="img" + [image]="person.imageUrl" [title]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'" (click)="openOverflowDetails(idx)" (keydown.enter)="openOverflowDetails(idx)" (keydown.space)="openOverflowDetails(idx)" @@ -175,9 +183,10 @@ fd-avatar-group-focusable-avatar [circle]="true" size="s" - [glyph]="person.glyph" role="img" + [glyph]="person.glyph" [title]="person.firstName + ' ' + person.lastName" + [ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'" (click)="openOverflowDetails(idx)" (keydown.enter)="openOverflowDetails(idx)" (keydown.space)="openOverflowDetails(idx)" @@ -193,21 +202,24 @@ size="s" [label]="personDetails.firstName + ' ' + personDetails.lastName" role="img" - [title]="personDetails.firstName + ' ' + personDetails.lastName"> + [title]="personDetails.firstName + ' ' + personDetails.lastName" + [ariaLabel]="personDetails.firstName + ' ' + personDetails.lastName + ' avatar'"> + [title]="personDetails.firstName + ' ' + personDetails.lastName" + [ariaLabel]="personDetails.firstName + ' ' + personDetails.lastName + ' avatar'"> + [title]="personDetails.firstName + ' ' + personDetails.lastName" + [ariaLabel]="personDetails.firstName + ' ' + personDetails.lastName + ' avatar'"> {{ personDetails.firstName }} {{ personDetails.lastName }} {{ personDetails.position }} diff --git a/libs/core/src/lib/avatar-group/avatar-group.module.ts b/libs/core/src/lib/avatar-group/avatar-group.module.ts index 51da9a32124..a094c710ff1 100644 --- a/libs/core/src/lib/avatar-group/avatar-group.module.ts +++ b/libs/core/src/lib/avatar-group/avatar-group.module.ts @@ -8,6 +8,7 @@ import { AvatarGroupOverflowItemDirective } from './directives/avatar-group-over import { AvatarGroupOverflowButtonDirective } from './directives/avatar-group-overflow-button.directive'; import { AvatarGroupOverflowButtonTextDirective } from './directives/avatar-group-overflow-button-text.directive'; import { AvatarGroupFocusableAvatarDirective } from './directives/avatar-group-focusable-avatar.directive'; +import { AvatarGroupPopoverControlDirective } from './directives/avatar-group-popover-control.directive'; @NgModule({ imports: [CommonModule], @@ -15,6 +16,7 @@ import { AvatarGroupFocusableAvatarDirective } from './directives/avatar-group-f AvatarGroupComponent, AvatarGroupItemDirective, AvatarGroupFocusableAvatarDirective, + AvatarGroupPopoverControlDirective, AvatarGroupOverflowBodyDirective, AvatarGroupOverflowItemDirective, AvatarGroupOverflowButtonDirective, @@ -24,6 +26,7 @@ import { AvatarGroupFocusableAvatarDirective } from './directives/avatar-group-f AvatarGroupComponent, AvatarGroupItemDirective, AvatarGroupFocusableAvatarDirective, + AvatarGroupPopoverControlDirective, AvatarGroupOverflowBodyDirective, AvatarGroupOverflowItemDirective, AvatarGroupOverflowButtonDirective, diff --git a/libs/core/src/lib/avatar-group/directives/avatar-group-popover-control.directive.spec.ts b/libs/core/src/lib/avatar-group/directives/avatar-group-popover-control.directive.spec.ts new file mode 100644 index 00000000000..398392cda78 --- /dev/null +++ b/libs/core/src/lib/avatar-group/directives/avatar-group-popover-control.directive.spec.ts @@ -0,0 +1,38 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { Component, ElementRef, ViewChild } from '@angular/core'; + +import { AvatarGroupModule } from '../avatar-group.module'; + +@Component({ + template: `` +}) +class TestComponent { + @ViewChild('directiveElement', { static: false }) + ref: ElementRef; +} + +describe('AvatarGroupPopoverControlDirective', () => { + let component: TestComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [TestComponent], + imports: [AvatarGroupModule] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should assign class', () => { + expect(component.ref.nativeElement).toHaveClass('fd-avatar-group__popover-control'); + }); +}); diff --git a/libs/core/src/lib/avatar-group/directives/avatar-group-popover-control.directive.ts b/libs/core/src/lib/avatar-group/directives/avatar-group-popover-control.directive.ts new file mode 100644 index 00000000000..06766ccc23a --- /dev/null +++ b/libs/core/src/lib/avatar-group/directives/avatar-group-popover-control.directive.ts @@ -0,0 +1,19 @@ +import { Directive, HostBinding, Input } from '@angular/core'; + +/** Needed to bind specific class to group type popover control. */ +@Directive({ + // tslint:disable-next-line:directive-selector + selector: '[fd-avatar-group-popover-control]', + host: { class: 'fd-avatar-group__popover-control' } +}) +export class AvatarGroupPopoverControlDirective { + /** Tabindex of the popover control. */ + @Input() + @HostBinding('attr.tabindex') + tabindex = 0; + + /** Role of the popover control. */ + @Input() + @HostBinding('attr.role') + role = 'button'; +}