fix(ToastProvider): improve toast keyboard navigation (DS-4549)

Author: KamilEmeleev

packages/components/src/components/ToastProvider/components/Toast/Toast.module.css

@@ -1,36 +1,20 @@
 .base {
   --toast-inline-size: 360px;
+  --toast-transition-z-index: ;
   --toast-transition-duration: 300ms;
-  --toast-outline-color: transparent;
   --toast-transition-block-size: 0;
-  --toast-outline-width: var(--kbq-size-3xs);
 
   outline: none;
   position: relative;
   border-radius: var(--kbq-size-s);
   inline-size: var(--toast-inline-size);
+  z-index: var(--toast-transition-z-index);
   transition:
     margin-block-end var(--kbq-transition-slow),
     margin-block-start var(--kbq-transition-slow),
     block-size var(--kbq-transition-slow);
   will-change: margin-bottom, margin-top, block-size;
   transition-duration: var(--toast-transition-duration);
-
-  &:focus-visible {
-    --toast-outline-color: var(--kbq-states-line-focus-theme);
-  }
-
-  &::after {
-    inset: 0;
-    content: '';
-    position: absolute;
-    pointer-events: none;
-    border-radius: inherit;
-    z-index: var(--kbq-layer-absolute);
-    transition: outline-color var(--kbq-transition-default);
-    outline-offset: calc(-1 * var(--toast-outline-width) / 2);
-    outline: var(--toast-outline-width) solid var(--toast-outline-color);
-  }
 }
 
 .base[data-placement^='bottom'] {

packages/components/src/components/ToastProvider/components/Toast/Toast.tsx

@@ -78,7 +78,7 @@ export function Toast({
   );
 
   return (
-    <div {...toastProps}>
+    <div {...toastProps} tabIndex={undefined}>
       <div className={s.wrapper}>
         {!hideCloseButton && (
           <IconButton {...closeButtonProps}>

packages/components/src/components/ToastProvider/components/ToastRegion/ToastRegion.module.css

@@ -1,6 +1,7 @@
 .base {
   display: flex;
   position: fixed;
+  flex-direction: column;
   z-index: var(--kbq-layer-toast);
   border-radius: var(--kbq-size-s);
 
@@ -9,26 +10,18 @@
   }
 }
 
-.ascending {
-  flex-direction: column-reverse;
-}
-
-.descending {
-  flex-direction: column;
-}
-
 .base:where([data-placement^='top'].ascending) > * {
   margin-block-end: var(--kbq-size-s);
 
-  &:first-child {
+  &:last-child {
     margin-block-end: 0;
   }
 }
 
 .base:where([data-placement^='bottom'].ascending) > * {
   margin-block-start: var(--kbq-size-s);
 
-  &:last-child {
+  &:first-child {
     margin-block-start: 0;
   }
 }

packages/components/src/components/ToastProvider/components/ToastRegion/ToastRegion.tsx

@@ -70,10 +70,15 @@ export function ToastRegionRender(
     props
   );
 
+  const visibleToasts =
+    stackDirection === 'ascending'
+      ? [...state.visibleToasts].reverse()
+      : state.visibleToasts;
+
   return createPortal(
     <div {...regionProps}>
       <TransitionGroup component={null} appear enter>
-        {state.visibleToasts.map((toast, idx) => {
+        {visibleToasts.map((toast, idx) => {
           const nodeRef = getNodeRef(toast.key);
 
           return (
@@ -95,7 +100,7 @@ export function ToastRegionRender(
                     data-placement={placement}
                     style={
                       {
-                        zIndex:
+                        '--toast-transition-z-index':
                           stackDirection === 'ascending'
                             ? -(idx + 1)
                             : -(total - (idx + 1)),