Skip to content

fix(core): fix Avatar Group's popover control styles & enhance a11y #5628

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

Merged
merged 5 commits into from
Jun 17, 2021
+130 −38
Merged

fix(core): fix Avatar Group's popover control styles & enhance a11y #5628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc419d9
fix(core): styles of group popover control & a11y issues
artolshansky Jun 8, 2021
e382176
docs(core): focus trap on individual item
artolshansky Jun 8, 2021
ef49287
chore(core): export avatar-group-popover-control directive
artolshansky Jun 9, 2021
bbe69ef
fix(core): fix id binding and add label for popover in Avatar Group
artolshansky Jun 14, 2021
65b000d
docs(core): corresponding labels and description for individual details
artolshansky Jun 16, 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 @@ -26,6 +26,7 @@ export const API_FILES = {
'AvatarGroupComponent',
'AvatarGroupItemDirective',
'AvatarGroupFocusableAvatarDirective',
'AvatarGroupPopoverControlDirective',
'AvatarGroupOverflowBodyDirective',
'AvatarGroupOverflowItemDirective',
'AvatarGroupOverflowButtonDirective',
Expand Down
2 changes: 2 additions & 0 deletions apps/docs/src/app/core/component-docs/avatar-group/avatar-group-docs.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { PopoverModule } from '@fundamental-ngx/core/popover';
import { QuickViewModule } from '@fundamental-ngx/core/quick-view';
import { BarModule } from '@fundamental-ngx/core/bar';
import { TitleModule } from '@fundamental-ngx/core/title';
import { LinkModule } from '@fundamental-ngx/core/link';

const routes: Routes = [
{
Expand All @@ -38,6 +39,7 @@ const routes: Routes = [
PopoverModule,
QuickViewModule,
BarModule,
LinkModule,
TitleModule
],
exports: [RouterModule],
Expand Down
28 changes: 20 additions & 8 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 @@ -9,13 +9,16 @@
placement="bottom"
maxWidth="312"
#overflowPopover>
<fd-popover-control tabindex="0"
<fd-popover-control fd-avatar-group-popover-control
[attr.aria-label]="'Has popup type dialog Conjoined avatars, ' + (people?.length - avatarGroup_GroupType?.overflowItemsCount)
+ ' avatars displayed, ' + avatarGroup_GroupType?.overflowItemsCount + ' avatars hidden, activate for complete list'"
(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"
[ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
role="img"
[circle]="true"
[border]="true"
Expand All @@ -24,6 +27,7 @@
<fd-avatar *ngIf="person.imageUrl"
role="img"
[title]="person.firstName + ' ' + person.lastName"
[ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
[circle]="true"
[border]="true"
[size]="size"
Expand All @@ -32,6 +36,7 @@
<fd-avatar *ngIf="person.glyph"
role="img"
[title]="person.firstName + ' ' + person.lastName"
[ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
[circle]="true"
[border]="true"
[size]="size"
Expand All @@ -41,13 +46,14 @@
fd-button
fd-avatar-group-overflow-button
tabindex="-1"
[compact]="false"
[size]="size">
<bdi fd-avatar-group-overflow-button-text>
+{{ avatarGroup_GroupType.overflowItemsCount }}
</bdi>
</button>
</fd-popover-control>
<fd-popover-body #overflowPopoverBody>
<fd-popover-body #overflowPopoverBody aria-labelledby="avatar-group-1-popover-header" role="tooltip">
<div class="fd-popover__wrapper">
<div fd-popover-body-header>
<div fd-bar barDesign="header">
Expand All @@ -59,7 +65,7 @@
aria-label="Back"
title="Back"
></fd-button-bar>
<fd-bar-element>
<fd-bar-element id="avatar-group-1-popover-header">
{{ isDetailStage ? 'Business Card' : 'Team Members (' + people.length + ')' }}
</fd-bar-element>
<fd-bar-element *ngIf="isDetailStage">&nbsp;</fd-bar-element>
Expand All @@ -81,6 +87,7 @@
size="s"
[label]="person.firstName + ' ' + person.lastName"
[title]="person.firstName + ' ' + person.lastName"
[ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
role="img"
(click)="openOverflowDetails(idx)"
(keydown.enter)="openOverflowDetails(idx)"
Expand All @@ -90,6 +97,7 @@
fd-avatar-group-focusable-avatar
role="img"
[title]="person.firstName + ' ' + person.lastName"
[ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
[circle]="true"
size="s"
[image]="person.imageUrl"
Expand All @@ -101,6 +109,7 @@
fd-avatar-group-focusable-avatar
role="img"
[title]="person.firstName + ' ' + person.lastName"
[ariaLabel]="person.firstName + ' ' + person.lastName + ' avatar'"
[circle]="true"
size="s"
[glyph]="person.glyph"
Expand All @@ -118,20 +127,23 @@
<fd-avatar *ngIf="!personDetails.imageUrl && !personDetails.glyph"
[circle]="true"
size="s"
[label]="personDetails.firstName + ' ' + personDetails.lastName"
role="img"
[title]="personDetails.firstName + ' ' + personDetails.lastName"></fd-avatar>
[label]="personDetails.firstName + ' ' + personDetails.lastName"
[title]="personDetails.firstName + ' ' + personDetails.lastName"
[ariaLabel]="personDetails.firstName + ' ' + personDetails.lastName + ' avatar'"></fd-avatar>
<fd-avatar *ngIf="personDetails.imageUrl"
[circle]="true"
size="s"
role="img"
[title]="personDetails.firstName + ' ' + personDetails.lastName"
[ariaLabel]="personDetails.firstName + ' ' + personDetails.lastName + ' avatar'"
[image]="personDetails.imageUrl"></fd-avatar>
<fd-avatar *ngIf="personDetails.glyph"
[circle]="true"
size="s"
role="img"
[title]="personDetails.firstName + ' ' + personDetails.lastName"
[ariaLabel]="personDetails.firstName + ' ' + personDetails.lastName + ' avatar'"
[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 All @@ -142,21 +154,21 @@
<fd-quick-view-group-item>
<fd-quick-view-group-item-label>Phone</fd-quick-view-group-item-label>
<fd-quick-view-group-item-content>
<a [href]="'tel:' + personDetails.phone" [innerText]="personDetails.phone"></a>
<a fd-link [href]="'tel:' + personDetails.phone" [innerText]="personDetails.phone"></a>
</fd-quick-view-group-item-content>
</fd-quick-view-group-item>

<fd-quick-view-group-item>
<fd-quick-view-group-item-label>Mobile</fd-quick-view-group-item-label>
<fd-quick-view-group-item-content>
<a [href]="'tel:' + personDetails.mobile" [innerText]="personDetails.mobile"></a>
<a fd-link [href]="'tel:' + personDetails.mobile" [innerText]="personDetails.mobile"></a>
</fd-quick-view-group-item-content>
</fd-quick-view-group-item>

<fd-quick-view-group-item>
<fd-quick-view-group-item-label>Email</fd-quick-view-group-item-label>
<fd-quick-view-group-item-content>
<a [href]="'mailto:' + personDetails.email" [innerText]="personDetails.email"></a>
<a fd-link [href]="'mailto:' + personDetails.email" [innerText]="personDetails.email"></a>
</fd-quick-view-group-item-content>
</fd-quick-view-group-item>
</fd-quick-view-group>
Expand Down
Loading