fix(docs-infra): make `NotificationComponent` elements non-focusable when hidden (#42584)

Previously, the `NotificationComponent` would be hidden by reducing its
height to `0`. This allowed for a smoother hide animation when closing
the notification, but left the component's interactive elements
focusable via keyboard navigation. This was confusing for users, because
the focused elements would not be visible on the page.

This commit fixes the issue be also setting the `display` CSS property
to `none` when the `NotificationComponent` is hidden, thus ensuring that
its contents are not focusable via keyboard navigation.
(This does not affect the hide animation, since the `display` style is
not animatable and is only applied at the end of the animation.)

PR Close #42584

aio/src/app/layout/notification/notification.component.ts

@@ -11,7 +11,7 @@ const LOCAL_STORAGE_NAMESPACE = 'aio-notification/';
   animations: [
     trigger('hideAnimation', [
       state('show', style({height: '*'})),
-      state('hide', style({height: 0})),
+      state('hide', style({display: 'none', height: 0})),
       // this should be kept in sync with the animation durations in:
       // - aio/src/styles/2-modules/_notification.scss
       // - aio/src/app/app.component.ts : notificationDismissed()

goldens/size-tracking/aio-payloads.json

@@ -3,7 +3,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4619,
-        "main-es2017": 456422,
+        "main-es2017": 456437,
         "polyfills-es2017": 55210,
         "styles": 69324,
         "light-theme": 79417,
@@ -15,7 +15,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2017": 4619,
-        "main-es2017": 456561,
+        "main-es2017": 456576,
         "polyfills-es2017": 55348,
         "styles": 69324,
         "light-theme": 79417,