fix(core): notification a11y improvements (#12752)

Co-authored-by: deno <[email protected]>
SAP · Nov 25, 2024 · 8a41b6f · 8a41b6f
1 parent c8d6317
commit 8a41b6f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/libs/core/notification/directives/notification-popover.directive.ts b/libs/core/notification/directives/notification-popover.directive.ts
@@ -4,7 +4,8 @@ import { Directive } from '@angular/core';
     selector: '[fdNotificationPopover], [fd-notification-popover]',
     standalone: true,
     host: {
-        class: 'fd-notification-popover'
+        class: 'fd-notification-popover',
+        role: 'dialog'
     }
 })
 export class NotificationPopoverDirective {}
diff --git a/...s/core/notification/examples/notification-group/notification-group-example.component.html b/...s/core/notification/examples/notification-group/notification-group-example.component.html
@@ -1,12 +1,12 @@
 <div [style.min-height.px]="500">
-    <fd-popover [noArrow]="false">
+    <fd-popover [noArrow]="false" [focusTrapped]="true" [focusAutoCapture]="true">
         <fd-popover-control>
             <button fd-button label="Open Notification Group"></button>
         </fd-popover-control>
         <fd-popover-body>
-            <div fd-notification-popover>
+            <div fd-notification-popover aria-labelledby="fd-notification-title-1">
                 <fd-toolbar fdType="transparent" [clearBorder]="true">
-                    <h4 fd-title>Notifications(30)</h4>
+                    <h4 fd-title id="fd-notification-title-1">Notifications (30)</h4>
                     <fd-toolbar-spacer></fd-toolbar-spacer>
                     <button fd-button label="Clear All" fdType="transparent" ariaLabel="Clear All"></button>
                     <button