docs(core): corresponding labels and description for individual details

SAP · Jun 16, 2021 · 65b000d · 65b000d
1 parent bbe69ef
commit 65b000d
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/.../component-docs/avatar-group/examples/avatar-group-individual-type-example.component.html b/.../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>