Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(core): fix tab focus, focus styles on popover and avatars, overflow trigger, avatar titles and roles for Avatar Group #5074

Merged
merged 12 commits into from
Jun 5, 2021
Merged

fix(core): fix tab focus, focus styles on popover and avatars, overflow trigger, avatar titles and roles for Avatar Group #5074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
74d976c
fix: (Core) Avatar Group group type overflow & avatar label
artolshansky Apr 5, 2021
acc7ec1
fix: popover-control focus styles
artolshansky Apr 6, 2021
6db2515
fix: overflow popover control focus styles
artolshansky Apr 7, 2021
395b1fe
fix: handle enter and space keys to open overflow
artolshansky Apr 13, 2021
676a647
fix: cleanup styles, add focusale avatar directive
artolshansky May 5, 2021
2e3509b
fix: opening/closing by click and keys
artolshansky May 12, 2021
b52e0db
fix: change aria-label to title with img role
artolshansky May 13, 2021
9d26d39
test: (Core) update avatar visual regression
Seamoo13 May 18, 2021
4936991
docs: (Core) get rid of popover styles in examples
artolshansky May 31, 2021
f3ce5fe
feat(core): improvements for overflow body directive
artolshansky Jun 1, 2021
cb8524d
chore(deps): bump fundamental-styles to 0.18.1-rc.23
artolshansky Jun 4, 2021
8354979
test(e2e): update visual regression
nikvalor Jun 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/docs/src/app/core/api-files.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export const API_FILES = {
avatarGroup: [
'AvatarGroupComponent',
'AvatarGroupItemDirective',
'AvatarGroupFocusableAvatarDirective',
'AvatarGroupOverflowBodyDirective',
'AvatarGroupOverflowItemDirective',
'AvatarGroupOverflowButtonDirective',
Expand Down
12 changes: 0 additions & 12 deletions apps/docs/src/app/core/component-docs/avatar-group/avatar-group-docs.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ import { Component } from '@angular/core';

import * as avatarGroupIndividualTs from '!raw-loader!./examples/avatar-group-individual-type-example.component.ts';
import * as avatarGroupIndividualHtml from '!raw-loader!./examples/avatar-group-individual-type-example.component.html';
import * as avatarGroupIndividualScss from '!raw-loader!./examples/avatar-group-individual-type-example.component.scss';
import * as avatarGroupGroupTs from '!raw-loader!./examples/avatar-group-group-type-example.component.ts';
import * as avatarGroupGroupHtml from '!raw-loader!./examples/avatar-group-group-type-example.component.html';
import * as avatarGroupGroupScss from '!raw-loader!./examples/avatar-group-group-type-example.component.scss';
import * as avatarGroupDataServiceTs from '!raw-loader!./examples/avatar-group-data-example.service.ts';

import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
Expand All @@ -21,11 +19,6 @@ export class AvatarGroupDocsComponent {
fileName: 'avatar-group-individual-type-example',
code: avatarGroupIndividualHtml
},
{
language: 'scss',
fileName: 'avatar-group-individual-type-example',
code: avatarGroupIndividualScss
},
{
language: 'typescript',
code: avatarGroupIndividualTs,
Expand All @@ -48,11 +41,6 @@ export class AvatarGroupDocsComponent {
fileName: 'avatar-group-group-type-example',
code: avatarGroupGroupHtml
},
{
language: 'scss',
fileName: 'avatar-group-group-type-example',
code: avatarGroupGroupScss
},
{
language: 'typescript',
code: avatarGroupGroupTs,
Expand Down
64 changes: 51 additions & 13 deletions .../core/component-docs/avatar-group/examples/avatar-group-group-type-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,45 @@
<fd-popover [noArrow]="false"
[focusTrapped]="true"
[focusAutoCapture]="true"
[triggers]="[]"
[closeOnOutsideClick]="true"
[closeOnEscapeKey]="true"
(isOpenChange)="isOpenChanged($event)"
placement="bottom"
additionalBodyClass="fd-avatar-group--group-type__overflow-popover-body--custom-class">
<fd-popover-control>
maxWidth="312"
#overflowPopover>
<fd-popover-control tabindex="0"
(click)="handleControlClick($event, overflowPopover)"
(keydown)="handleControlKeydown($event, overflowPopover)">
<div *ngFor="let person of people" fd-avatar-group-item>
<fd-avatar *ngIf="!person.imageUrl && !person.glyph"
[label]="person.firstName + ' ' + person.lastName"
[title]="person.firstName + ' ' + person.lastName"
role="img"
[circle]="true"
[border]="true"
[size]="size"></fd-avatar>

<fd-avatar *ngIf="person.imageUrl" [circle]="true"
<fd-avatar *ngIf="person.imageUrl"
role="img"
[title]="person.firstName + ' ' + person.lastName"
[circle]="true"
[border]="true"
[size]="size"
[image]="person.imageUrl"></fd-avatar>

<fd-avatar *ngIf="person.glyph" [circle]="true"
<fd-avatar *ngIf="person.glyph"
role="img"
[title]="person.firstName + ' ' + person.lastName"
[circle]="true"
[border]="true"
[size]="size"
[glyph]="person.glyph"></fd-avatar>
</div>
<button *ngIf="avatarGroup_GroupType.overflowItemsCount > 0"
fd-button
fd-avatar-group-overflow-button
tabindex="-1"
[size]="size">
<bdi fd-avatar-group-overflow-button-text>
+{{ avatarGroup_GroupType.overflowItemsCount }}
Expand All @@ -53,47 +67,71 @@
</div>
</div>

<div fd-avatar-group-overflow-body>
<div fd-avatar-group-overflow-body
[noPadding]="isDetailStage"
[noHorizontalScroll]="isDetailStage"
[noVerticalScroll]="false"
>
<ng-container *ngIf="overflowPopoverStage === 'main'">
<ng-container *ngFor="let person of people; let idx = index;">
<div fd-avatar-group-overflow-item (click)="openOverflowDetails(idx)">
<div fd-avatar-group-overflow-item>
<fd-avatar *ngIf="!person.imageUrl && !person.glyph"
fd-avatar-group-focusable-avatar
[circle]="true"
size="s"
[label]="person.firstName + ' ' + person.lastName"
[title]="person.firstName + ' ' + person.lastName"
role="img"
(click)="openOverflowDetails(idx)"
(keydown.enter)="openOverflowDetails(idx)"
(keydown.space)="openOverflowDetails(idx)"
tabindex="0"></fd-avatar>
></fd-avatar>
<fd-avatar *ngIf="person.imageUrl"
fd-avatar-group-focusable-avatar
role="img"
[title]="person.firstName + ' ' + person.lastName"
[circle]="true"
size="s"
[image]="person.imageUrl"
(click)="openOverflowDetails(idx)"
(keydown.enter)="openOverflowDetails(idx)"
(keydown.space)="openOverflowDetails(idx)"
tabindex="0"></fd-avatar>
></fd-avatar>
<fd-avatar *ngIf="person.glyph"
fd-avatar-group-focusable-avatar
role="img"
[title]="person.firstName + ' ' + person.lastName"
[circle]="true"
size="s"
[glyph]="person.glyph"
(click)="openOverflowDetails(idx)"
(keydown.enter)="openOverflowDetails(idx)"
(keydown.space)="openOverflowDetails(idx)"
tabindex="0"></fd-avatar>
></fd-avatar>
</div>
</ng-container>
</ng-container>

<ng-container *ngIf="overflowPopoverStage === 'detail'">
<fd-quick-view [id]="personDetails.id">
<fd-quick-view-subheader>
<fd-avatar *ngIf="!personDetails.imageUrl && !personDetails.glyph" [circle]="true"
<fd-avatar *ngIf="!personDetails.imageUrl && !personDetails.glyph"
[circle]="true"
size="s"
[label]="personDetails.firstName + ' ' + personDetails.lastName"></fd-avatar>
<fd-avatar *ngIf="personDetails.imageUrl" [circle]="true" size="s"
[label]="personDetails.firstName + ' ' + personDetails.lastName"
role="img"
[title]="personDetails.firstName + ' ' + personDetails.lastName"></fd-avatar>
<fd-avatar *ngIf="personDetails.imageUrl"
[circle]="true"
size="s"
role="img"
[title]="personDetails.firstName + ' ' + personDetails.lastName"
[image]="personDetails.imageUrl"></fd-avatar>
<fd-avatar *ngIf="personDetails.glyph" [circle]="true" size="s"
<fd-avatar *ngIf="personDetails.glyph"
[circle]="true"
size="s"
role="img"
[title]="personDetails.firstName + ' ' + personDetails.lastName"
[glyph]="personDetails.glyph"></fd-avatar>
<fd-quick-view-subheader-title>{{ personDetails.firstName }} {{ personDetails.lastName }}</fd-quick-view-subheader-title>
<fd-quick-view-subheader-subtitle>{{ personDetails.position }}</fd-quick-view-subheader-subtitle>
Expand Down
25 changes: 0 additions & 25 deletions .../core/component-docs/avatar-group/examples/avatar-group-group-type-example.component.scss
View file
Open in desktop

This file was deleted.

29 changes: 23 additions & 6 deletions ...pp/core/component-docs/avatar-group/examples/avatar-group-group-type-example.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { PopoverBodyComponent } from '@fundamental-ngx/core/popover';
import { Size } from '@fundamental-ngx/core/utils';
import { Component, ViewChild } from '@angular/core';
import { ENTER, ESCAPE, SPACE, TAB } from '@angular/cdk/keycodes';

import { PopoverComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
import { KeyUtil, Size } from '@fundamental-ngx/core/utils';
import { AvatarGroupDataExampleService } from './avatar-group-data-example.service';

@Component({
selector: 'fd-avatar-group-group-type-example',
templateUrl: './avatar-group-group-type-example.component.html',
styleUrls: ['./avatar-group-group-type-example.component.scss'],
encapsulation: ViewEncapsulation.None
templateUrl: './avatar-group-group-type-example.component.html'
})
export class AvatarGroupGroupTypeExampleComponent {
@ViewChild('overflowPopoverBody')
Expand Down Expand Up @@ -44,4 +43,22 @@ export class AvatarGroupGroupTypeExampleComponent {

setTimeout(() => this.popoverBodyComponent?._focusFirstTabbableElement(), 0);
}

handleControlClick(event: MouseEvent, popover: PopoverComponent): void {
popover.open();
}

handleControlKeydown(event: KeyboardEvent, popover: PopoverComponent): void {
if (!KeyUtil.isKeyCode(event, [ESCAPE, TAB, SPACE, ENTER])) {
return;
}

if (KeyUtil.isKeyCode(event, [ESCAPE, TAB])) {
popover.close();
}

if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {
popover.open();
}
}
}
Loading