Merge branch 'main' into dependabot/github_actions/actions/setup-node…

…-4.0.2

.all-contributorsrc

@@ -1415,6 +1415,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "ggdawson",
+      "name": "Garrett Dawson",
+      "avatar_url": "https://avatars.githubusercontent.com/u/37080130?v=4",
+      "profile": "https://github.com/ggdawson",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -275,6 +275,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/amercury"><img src="https://avatars.githubusercontent.com/u/17834588?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alexandr Ovchinnikov</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=amercury" title="Code">💻</a></td>
     <td align="center"><a href="https://jt-helsinki.github.io/blog/"><img src="https://avatars.githubusercontent.com/u/20871336?v=4?s=100" width="100px;" alt=""/><br /><sub><b>J Thomas</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=jt-helsinki" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/ggdawson"><img src="https://avatars.githubusercontent.com/u/37080130?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Garrett Dawson</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ggdawson" title="Code">💻</a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

packages/react/src/components/ComposedModal/ComposedModal.tsx

@@ -62,18 +62,13 @@ export const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(
       : {};
 
     return (
-      <>
-        <div
-          className={contentClass}
-          {...hasScrollingContentProps}
-          {...rest}
-          ref={ref}>
-          {children}
-        </div>
-        {hasScrollingContent && (
-          <div className={`${prefix}--modal-content--overflow-indicator`} />
-        )}
-      </>
+      <div
+        className={contentClass}
+        {...hasScrollingContentProps}
+        {...rest}
+        ref={ref}>
+        {children}
+      </div>
     );
   }
 );

packages/react/src/components/DataTable/DataTable.tsx

@@ -91,7 +91,7 @@ export interface DataTableRow<ColTypes extends any[]> {
 export interface DataTableHeader {
   key: string;
   header: React.ReactNode;
-  slug: React.ReactElement;
+  slug?: React.ReactElement;
 }
 
 export interface DataTableRenderProps<RowType, ColTypes extends any[]> {

packages/react/src/components/Modal/Modal.tsx

@@ -488,9 +488,6 @@ const Modal = React.forwardRef(function Modal(
         {...hasScrollingContentProps}>
         {children}
       </div>
-      {hasScrollingContent && (
-        <div className={`${prefix}--modal-content--overflow-indicator`} />
-      )}
       {!passiveModal && (
         <ButtonSet className={footerClasses} aria-busy={loadingActive}>
           {Array.isArray(secondaryButtons) && secondaryButtons.length <= 2

packages/react/src/components/MultiSelect/MultiSelect.tsx

@@ -137,6 +137,11 @@ export interface MultiSelectProps<ItemType>
     > {
   className?: string;
 
+  /**
+   * Specify the text that should be read for screen readers that describes that all items are deleted
+   */
+  clearAnnouncement?: string;
+
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */
@@ -324,6 +329,7 @@ const MultiSelect = React.forwardRef(
       sortItems = defaultSortItems as MultiSelectProps<ItemType>['sortItems'],
       compareItems = defaultCompareItems,
       clearSelectionText = 'To clear selection, press Delete or Backspace',
+      clearAnnouncement = 'all items have been cleared',
       clearSelectionDescription = 'Total items selected: ',
       light,
       invalid,
@@ -353,6 +359,7 @@ const MultiSelect = React.forwardRef(
     const [isOpen, setIsOpen] = useState(open || false);
     const [prevOpenProp, setPrevOpenProp] = useState(open);
     const [topItems, setTopItems] = useState([]);
+    const [itemsCleared, setItemsCleared] = useState(false);
     const {
       selectedItems: controlledSelectedItems,
       onItemChange,
@@ -409,12 +416,17 @@ const MultiSelect = React.forwardRef(
             e.stopPropagation();
           }
 
+          if (!isOpen && match(e, keys.Delete) && selectedItems.length > 0) {
+            setItemsCleared(true);
+          }
+
           if (
             (match(e, keys.Space) ||
               match(e, keys.ArrowDown) ||
               match(e, keys.Enter)) &&
             !isOpen
           ) {
+            setItemsCleared(false);
             setIsOpenWrapper(true);
           }
         }
@@ -709,6 +721,9 @@ const MultiSelect = React.forwardRef(
                 }
               )}
           </ListBox.Menu>
+          {itemsCleared && (
+            <span aria-live="assertive" aria-label={clearAnnouncement} />
+          )}
         </ListBox>
         {!inline && !invalid && !warn && helperText && (
           <div id={helperId} className={helperClasses}>

packages/styles/scss/components/modal/_modal.scss

@@ -350,60 +350,22 @@
   .#{$prefix}--modal-scroll-content {
     // Required to accommodate focus outline's negative offset when scrolling in Chrome
     border-block-end: 2px solid transparent;
+    mask-image: linear-gradient(
+        to bottom,
+        $layer calc(100% - 80px),
+        transparent calc(100% - 48px),
+        transparent 100%
+      ),
+      linear-gradient(to left, $layer 0, 16px, transparent 16px),
+      linear-gradient(to right, $layer 0, 2px, transparent 2px),
+      linear-gradient(to top, $layer 0, 2px, transparent 2px);
   }
+
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
     padding-block-end: $spacing-06;
   }
 
-  .#{$prefix}--modal-content--overflow-indicator {
-    position: absolute;
-    background: $layer;
-    block-size: convert.to-rem(48px);
-    grid-column: 1/-1;
-    grid-row: 2/-2;
-    inline-size: calc(100% - $spacing-05);
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    pointer-events: none;
-
-    &::before {
-      position: absolute;
-      background-image: linear-gradient(to bottom, transparent, $layer);
-      block-size: convert.to-rem(32px);
-      content: '';
-      inline-size: 100%;
-      inset-block-start: -32px;
-      pointer-events: none;
-    }
-  }
-
-  // Safari-only media query
-  // won't appear correctly with CSS custom properties
-  // see: code snippet and tabs overflow indicators
-  @media not all and (min-resolution >= 0.001dpcm) {
-    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
-      .#{$prefix}--modal-content--overflow-indicator {
-        background-image: linear-gradient(to bottom, rgba($layer, 0), $layer);
-      }
-    }
-  }
-
-  .#{$prefix}--modal-content:focus
-    ~ .#{$prefix}--modal-content--overflow-indicator {
-    margin: 0 2px 2px;
-  }
-
-  @media screen and (-ms-high-contrast: active) {
-    .#{$prefix}--modal-scroll-content > *:last-child {
-      padding-block-end: 0;
-    }
-
-    .#{$prefix}--modal-content--overflow-indicator {
-      display: none;
-    }
-  }
-
   // -----------------------------
   // Modal footer
   // -----------------------------