From 65b000de9e0098f3657a4afcd47c57c7a8c16da1 Mon Sep 17 00:00:00 2001
From: olshansky <olshansky0@gmail.com>
Date: Wed, 16 Jun 2021 17:11:02 +0300
Subject: [PATCH] docs(core): corresponding labels and description for
 individual details

---
 ...vatar-group-individual-type-example.component.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

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 bf46e8eb695..1565bb85da5 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
@@ -45,10 +45,13 @@
                 </div>
             </fd-popover-control>
 
-            <fd-popover-body [attr.aria-labelledby]="person.id+'-popover-header'" role="tooltip">
+            <fd-popover-body
+                [attr.aria-labelledby]="person.id+'-popover-header'"
+                [attr.aria-describedby]="person.id+'-popover-subheader'"
+                role="tooltip">
                 <fd-quick-view [id]="person.id">
                     <fd-quick-view-title align="left" [id]="person.id+'-popover-header'">Business card</fd-quick-view-title>
-                    <fd-quick-view-subheader>
+                    <fd-quick-view-subheader [id]="person.id+'-popover-subheader'">
                         <fd-avatar *ngIf="!person.imageUrl && !person.glyph"
                                    [circle]="true"
                                    size="s"
@@ -76,8 +79,8 @@
                         <fd-quick-view-subheader-subtitle>{{ person.position }}</fd-quick-view-subheader-subtitle>
                     </fd-quick-view-subheader>
 
-                    <fd-quick-view-group>
-                        <fd-quick-view-group-title>Contact Details</fd-quick-view-group-title>
+                    <fd-quick-view-group [attr.aria-labelledby]="person.id+'-group-title'">
+                        <fd-quick-view-group-title [id]="person.id+'-group-title'">Contact Details</fd-quick-view-group-title>
                         <fd-quick-view-group-item>
                             <fd-quick-view-group-item-label>Phone</fd-quick-view-group-item-label>
                             <fd-quick-view-group-item-content>