[Sheet] Add required aria label

UNRELEASED.md

@@ -4,8 +4,9 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Breaking changes
 
-- Remove `light` property from `Tooltip` as it now defaults to a light background ([#3803](https://github.com/Shopify/polaris-react/pull/3803)) ([#3803](https://github.com/Shopify/polaris-react/pull/3803))
-- Made `title` property required in `Modal` for accessibility label, added `hideTitle` property ([#3803](https://github.com/Shopify/polaris-react/pull/3803)) ([#3803](https://github.com/Shopify/polaris-react/pull/3803))
+- Remove `light` property from `Tooltip` as it now defaults to a light background ([#3846](https://github.com/Shopify/polaris-react/pull/3846))
+- Made `title` property required in `Modal` for accessibility label, added `hideTitle` property ([#3803](https://github.com/Shopify/polaris-react/pull/3803))
+- Added required `ariaLabel` property in `Sheet` ([#3852](https://github.com/Shopify/polaris-react/pull/3852))
 
 ### Enhancements
 

src/components/Filters/Filters.tsx

@@ -390,6 +390,7 @@ class FiltersInner extends Component<CombinedProps, State> {
 
     const filtersContainerMarkup = isNavigationCollapsed ? (
       <Sheet
+        accessibilityLabel={moreFiltersLabel}
         open={open}
         onClose={this.closeFilters}
         onEntered={this.setReadyForFocus(true)}
@@ -403,6 +404,7 @@ class FiltersInner extends Component<CombinedProps, State> {
       </Sheet>
     ) : (
       <Sheet
+        accessibilityLabel={moreFiltersLabel}
         open={open}
         onClose={this.closeFilters}
         onEntered={this.setReadyForFocus(true)}

src/components/Sheet/README.md

@@ -138,7 +138,11 @@ function SheetExample() {
       >
         {salesChannelsCardMarkup}
       </Card>
-      <Sheet open={sheetActive} onClose={toggleSheetActive}>
+      <Sheet
+        open={sheetActive}
+        onClose={toggleSheetActive}
+        ariaLabel="Manage sales channels"
+      >
         <div
           style={{
             display: 'flex',

src/components/Sheet/Sheet.tsx

@@ -38,6 +38,8 @@ export interface SheetProps {
   onEntered?(): void;
   /** Callback when the sheet has started to exit */
   onExit?(): void;
+  /** ARIA label for sheet */
+  accessibilityLabel: string;
 }
 
 export function Sheet({
@@ -46,6 +48,7 @@ export function Sheet({
   onClose,
   onEntered,
   onExit,
+  accessibilityLabel,
 }: SheetProps) {
   const {isNavigationCollapsed} = useMediaQuery();
   const container = useRef<HTMLDivElement>(null);
@@ -71,7 +74,12 @@ export function Sheet({
           ref={container}
         >
           <TrapFocus trapping={open}>
-            <div role="dialog" tabIndex={-1} className={styles.Sheet}>
+            <div
+              role="dialog"
+              tabIndex={-1}
+              className={styles.Sheet}
+              aria-label={accessibilityLabel}
+            >
               {children}
             </div>
           </TrapFocus>

src/components/Sheet/tests/Sheet.test.tsx

@@ -10,7 +10,7 @@ describe('<Sheet />', () => {
   const mockProps = {
     open: true,
     onClose: noop,
-    accessibilityLabel: 'abc',
+    accessibilityLabel: 'More filters',
   };
 
   it('renders its children', () => {