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
This commit is contained in:
parent
29302e3baa
commit
0c105c38da
|
@ -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()
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue