@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/src/progress/__tests__/__snapshots__/CircularProgress.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`CircularProgress should allow the animation to be simplified when the disableShrink prop is enabled 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -24,6 +25,7 @@ exports[`CircularProgress should allow the animation to be simplified when the d
 
 exports[`CircularProgress should allow the animation to be simplified when the disableShrink prop is enabled 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="100"
@@ -48,6 +50,7 @@ exports[`CircularProgress should allow the animation to be simplified when the d
 
 exports[`CircularProgress should allow the transition to be disabled for determinate progress bars 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -72,6 +75,7 @@ exports[`CircularProgress should allow the transition to be disabled for determi
 
 exports[`CircularProgress should allow the transition to be disabled for determinate progress bars 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -95,6 +99,7 @@ exports[`CircularProgress should allow the transition to be disabled for determi
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -117,6 +122,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color custom-class-name"
@@ -140,6 +146,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -164,6 +171,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should apply the correct styling, HTMLAttributes, and allow a ref 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -189,6 +197,7 @@ exports[`CircularProgress should apply the correct styling, HTMLAttributes, and
 
 exports[`CircularProgress should be able to render as a dense size 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--dense rmd-circular-progress--centered rmd-primary-color"
@@ -211,6 +220,7 @@ exports[`CircularProgress should be able to render as a dense size 1`] = `
 
 exports[`CircularProgress should be able to render as a dense size 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--dense rmd-primary-color"
@@ -233,6 +243,7 @@ exports[`CircularProgress should be able to render as a dense size 2`] = `
 
 exports[`CircularProgress should be able to render as any of the theme colors 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -255,6 +266,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 1`
 
 exports[`CircularProgress should be able to render as any of the theme colors 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-secondary-color"
@@ -277,6 +289,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 2`
 
 exports[`CircularProgress should be able to render as any of the theme colors 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-warning-color"
@@ -299,6 +312,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 3`
 
 exports[`CircularProgress should be able to render as any of the theme colors 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-success-color"
@@ -321,6 +335,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 4`
 
 exports[`CircularProgress should be able to render as any of the theme colors 5`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-error-color"
@@ -343,6 +358,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 5`
 
 exports[`CircularProgress should be able to render as any of the theme colors 6`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered"
@@ -365,6 +381,7 @@ exports[`CircularProgress should be able to render as any of the theme colors 6`
 
 exports[`CircularProgress should default to being centered but can be removed by enabling the disableCentered prop 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"
@@ -387,6 +404,7 @@ exports[`CircularProgress should default to being centered but can be removed by
 
 exports[`CircularProgress should default to being centered but can be removed by enabling the disableCentered prop 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-primary-color"
@@ -409,6 +427,7 @@ exports[`CircularProgress should default to being centered but can be removed by
 
 exports[`CircularProgress should render as a determinate progress bar when the value is provided 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -433,6 +452,7 @@ exports[`CircularProgress should render as a determinate progress bar when the v
 
 exports[`CircularProgress should render as a determinate progress bar when the value is provided 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -457,6 +477,7 @@ exports[`CircularProgress should render as a determinate progress bar when the v
 
 exports[`CircularProgress should support customizing the svg through the radio, center, and dashoffset props even though I don't know what they do 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color"

package/src/progress/__tests__/__snapshots__/LinearProgress.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`LinearProgress should allow the transition to be disabled for determinate progress bars 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -18,6 +19,7 @@ exports[`LinearProgress should allow the transition to be disabled for determina
 
 exports[`LinearProgress should allow the transition to be disabled for determinate progress bars 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -33,6 +35,7 @@ exports[`LinearProgress should allow the transition to be disabled for determina
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -47,6 +50,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color custom-class-name"
@@ -62,6 +66,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should apply the correct styling, HTMLAttributes, and allow a ref 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -78,6 +83,7 @@ exports[`LinearProgress should apply the correct styling, HTMLAttributes, and al
 
 exports[`LinearProgress should be able to render as any of the theme colors 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -92,6 +98,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 1`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-secondary-color"
@@ -106,6 +113,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 2`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-warning-color"
@@ -120,6 +128,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 3`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-success-color"
@@ -134,6 +143,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 4`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 5`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-error-color"
@@ -148,6 +158,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 5`]
 
 exports[`LinearProgress should be able to render as any of the theme colors 6`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate"
@@ -162,6 +173,7 @@ exports[`LinearProgress should be able to render as any of the theme colors 6`]
 
 exports[`LinearProgress should be able to render vertically 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -177,6 +189,7 @@ exports[`LinearProgress should be able to render vertically 1`] = `
 
 exports[`LinearProgress should be able to render vertically 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -192,6 +205,7 @@ exports[`LinearProgress should be able to render vertically 2`] = `
 
 exports[`LinearProgress should be able to render vertically 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -207,6 +221,7 @@ exports[`LinearProgress should be able to render vertically 3`] = `
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--horizontal rmd-linear-progress--indeterminate rmd-primary-color"
@@ -221,6 +236,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   class="rmd-linear-progress rmd-linear-progress--vertical rmd-linear-progress--indeterminate rmd-primary-color"
@@ -236,6 +252,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 3`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -253,6 +270,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should be able to reverse the animation by enabling the reverse prop 4`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"
@@ -270,6 +288,7 @@ exports[`LinearProgress should be able to reverse the animation by enabling the
 
 exports[`LinearProgress should render as a determinate progress bar when the value is provided 1`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="30"
@@ -286,6 +305,7 @@ exports[`LinearProgress should render as a determinate progress bar when the val
 
 exports[`LinearProgress should render as a determinate progress bar when the value is provided 2`] = `
 <span
+  aria-label="Progressbar"
   aria-valuemax="100"
   aria-valuemin="0"
   aria-valuenow="50"

package/src/progress/_progress.scss

@@ -206,45 +206,27 @@ $linear-vertical-reverse-short-styles: (
   ),
 ) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-progress-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-progress-color,
-    value: $color,
-  ),
-  circular-size: (
-    var: --rmd-progress-circular-size,
-    value: $circular-size,
-  ),
-  circular-stroke-width: (
-    var: --rmd-progress-circular-width,
-    value: $circular-stroke-width,
-  ),
-  linear-size: (
-    var: --rmd-progress-linear-size,
-    value: $linear-size,
-  ),
+$variables: (
+  background-color,
+  color,
+  circular-size,
+  circular-stroke-width,
+  linear-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "progress var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "progress");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "progress var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "progress")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -566,6 +548,19 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-circular {
+    @include set-var(circular-size, $circular-size);
+    @include set-var(circular-stroke-width, $circular-stroke-width);
+  }
+
+  @if not $disable-linear {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(linear-size, $linear-size);
+  }
+}
+
 @mixin styles {
   @if not $disable-circular {
     @include _circular-progress;

package/src/segmented-button/_segmented-button.scss

@@ -4,11 +4,13 @@
 @use "../icon/icon";
 @use "../interaction/interaction";
 @use "../typography/typography";
+@use "../transition/transition";
 @use "../theme/a11y";
 @use "../theme/colors";
 @use "../theme/theme";
 
 $disable-everything: false !default;
+$disable-selected-icon: false !default;
 
 $light-theme-color: colors.$black !default;
 $light-theme-outline-color: #79747e !default;
@@ -57,29 +59,33 @@ $selected-background-color: theme.get-default-color(
 
 $typography-styles: typography.$button-styles !default;
 
-$var-lookup: (
-  outline-width: (
-    var: --rmd-segmented-button-outline-width,
-    value: $outline-width,
-  ),
-  outline-color: (
-    var: --rmd-segmented-button-outline-color,
-    value: $outline-color,
-  ),
-  color: (
-    var: --rmd-segmented-button-color,
-    value: currentcolor,
-  ),
-  selected-background-color: (
-    var: --rmd-segmented-button-selected-background-color,
-    value: $selected-background-color,
-  ),
-  selected-color: (
-    var: --rmd-segmented-button-selected-color,
-    value: $selected-color,
-  ),
+$variables: (
+  outline-width,
+  outline-color,
+  color,
+  selected-background-color,
+  selected-color
 );
 
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "segmented-button");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  @if $value {
+    #{utils.get-var-name($variables, $name, "segmented-button")}: #{$value};
+  }
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
 @mixin use-light-theme {
   @if not $disable-everything {
     @if $light-theme-outline-color != $dark-theme-outline-color {
@@ -122,29 +128,14 @@ $var-lookup: (
   }
 }
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "segmented button var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(outline-width, $outline-width);
+    @include set-var(outline-color, $outline-color);
+    @include set-var(color, currentcolor);
+    @include set-var(selected-background-color, $selected-background-color);
+    @include set-var(selected-color, $selected-color);
   }
-
-  @return var(#{$var});
-}
-
-@mixin set-var($name, $value) {
-  $var: map.get(
-    utils.validate($var-lookup, $name, "segmented button var"),
-    var
-  );
-
-  #{$var}: #{$value};
-}
-
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
 }
 
 @mixin styles {
@@ -201,6 +192,9 @@ $var-lookup: (
       }
 
       &--selected {
+        @if not $disable-selected-icon {
+          @include transition.transition-set-var(max-width, icon.get-var(size));
+        }
         @include use-var(background-color, selected-background-color);
         @include use-var(color, selected-color);
       }

package/src/sheet/_sheet.scss

@@ -30,63 +30,45 @@ $touch-max-height: calc(100% - #{$touch-margin}) !default;
 $recommended-min-height: 3.5rem !default;
 $recommended-max-height: 50% !default;
 
-$var-lookup: (
-  height: (
-    var: --rmd-sheet-height,
-    value: null,
-  ),
-  width: (
-    var: --rmd-sheet-width,
-    value: null,
-  ),
-  max-height: (
-    var: --rmd-sheet-max-height,
-    value: null,
-  ),
-  touch-width: (
-    var: --rmd-sheet-touch-width,
-    value: $touch-width,
-  ),
-  touch-max-height: (
-    var: --rmd-sheet-touch-max-height,
-    value: $touch-max-height,
-  ),
-  static-width: (
-    var: --rmd-sheet-static-width,
-    value: $static-width,
-  ),
-  transform-offscreen: (
-    var: --rmd-sheet-transform-offscreen,
-    value: null,
-  ),
-  z-index: (
-    var: --rmd-sheet-z-index,
-    value: $z-index,
-  ),
+$variables: (
+  height,
+  width,
+  max-height,
+  touch-width,
+  touch-max-height,
+  static-width,
+  transform-offscreen,
+  z-index
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "sheet var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "sheet");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "sheet var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "sheet")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(touch-width, $touch-width);
+    @include set-var(touch-max-height, $touch-max-height);
+    @include set-var(static-width, $static-width);
+    @include set-var(z-index, $z-index);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-sheet {

package/src/snackbar/DefaultToastRenderer.tsx

@@ -61,7 +61,7 @@ export function DefaultToastRenderer(props: ToastRendererProps): ReactElement {
   } = props;
   const {
     closeButtonProps,
-    closeButton = !!closeButtonProps,
+    closeButton = !!closeButtonProps || !!remaining.closeButtonProps,
     onEntered: defaultEntered = noop,
     onExited: defaultExited = noop,
     onMouseEnter: defaultMouseEnter = noop,

package/src/snackbar/Snackbar.tsx

@@ -1,10 +1,5 @@
 "use client";
-import {
-  forwardRef,
-  type AriaRole,
-  type ComponentType,
-  type HTMLAttributes,
-} from "react";
+import { forwardRef, type ComponentType, type HTMLAttributes } from "react";
 import { Portal } from "../portal/Portal.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import {
@@ -24,9 +19,6 @@ export interface SnackbarProps extends HTMLAttributes<HTMLDivElement> {
    */
   id?: string;
 
-  /** @defaultValue `"status"` */
-  role?: AriaRole;
-
   /**
    * Set this to the number of toasts that can be visible within the snackbar at
    * the same time. Any toasts added after this value will be added into the
@@ -154,7 +146,6 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
   function Snackbar(props, ref) {
     const {
       id: propId,
-      role = "status",
       className,
       limit = 1,
       position = "bottom",
@@ -168,21 +159,22 @@ export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
 
     return (
       <Portal disabled={disablePortal}>
-        <div
-          {...remaining}
-          id={id}
-          ref={ref}
-          role={role}
-          className={snackbar({ position, className })}
-        >
-          {queue.map((toast) => (
-            <RenderToast
-              {...toast}
-              key={toast.toastId}
-              toastDefaults={toastDefaults}
-            />
-          ))}
-        </div>
+        {queue.length > 0 && (
+          <div
+            {...remaining}
+            id={id}
+            ref={ref}
+            className={snackbar({ position, className })}
+          >
+            {queue.map((toast) => (
+              <RenderToast
+                {...toast}
+                key={toast.toastId}
+                toastDefaults={toastDefaults}
+              />
+            ))}
+          </div>
+        )}
       </Portal>
     );
   }