[Modal, Frame(Nav), Sheet] Trapped virtual cursor inside dialogs (#3931)

* Trapped virtual cursor inside dialogs

* changelog

* Add nav container label

* Only applt attributes on small screens

UNRELEASED.md

@@ -8,6 +8,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Fixed virtual cursor leaving dialog in `Modal`, `Navigation` and `Sheet` ([#3931](https://github.com/Shopify/polaris-react/pull/3931))
+
 ### Documentation
 
 - Added an example for the `onRemove` prop to `Tag` and clarified that no remove button is rendered when `onClick` is set ([#2987](https://github.com/Shopify/polaris-react/pull/2987))

locales/en.json

@@ -113,6 +113,7 @@
     },
     "Frame": {
       "skipToContent": "Skip to content",
+      "navigationLabel": "Navigation",
       "Navigation": {
         "closeMobileNavigationLabel": "Close navigation"
       }

src/components/Frame/Frame.tsx

@@ -124,6 +124,13 @@ class FrameInner extends PureComponent<CombinedProps, State> {
     const mobileNavShowing = isNavigationCollapsed && showMobileNavigation;
     const tabIndex = mobileNavShowing ? 0 : -1;
 
+    const mobileNavAttributes = {
+      ...(mobileNavShowing && {
+        'aria-modal': true,
+        role: 'dialog',
+      }),
+    };
+
     const navigationMarkup = navigation ? (
       <TrapFocus trapping={mobileNavShowing}>
         <CSSTransition
@@ -135,6 +142,8 @@ class FrameInner extends PureComponent<CombinedProps, State> {
           classNames={navTransitionClasses}
         >
           <div
+            {...mobileNavAttributes}
+            aria-label={i18n.translate('Polaris.Frame.navigationLabel')}
             ref={this.navigationNode}
             className={navClassName}
             onKeyDown={this.handleNavKeydown}

src/components/Frame/README.md

@@ -346,6 +346,7 @@ function FrameExample() {
             },
             Frame: {
               skipToContent: 'Skip to content',
+              navigationLabel: 'Navigation',
               Navigation: {
                 closeMobileNavigationLabel: 'Close navigation',
               },
@@ -680,6 +681,7 @@ function FrameExample() {
             },
             Frame: {
               skipToContent: 'Skip to content',
+              navigationLabel: 'Navigation',
               Navigation: {
                 closeMobileNavigationLabel: 'Close navigation',
               },

src/components/Frame/tests/Frame.test.tsx

@@ -224,6 +224,32 @@ describe('<Frame />', () => {
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
+
+    it('renders mobile accessibility attributes on small screens', () => {
+      const navigation = <div />;
+      const frame = mountWithApp(
+        <Frame showMobileNavigation navigation={navigation} />,
+        {mediaQuery: {isNavigationCollapsed: true}},
+      );
+
+      expect(frame).toContainReactComponent('div', {
+        'aria-modal': true,
+        role: 'dialog',
+      });
+    });
+
+    it('does not render mobile accessibility attributes on large screens', () => {
+      const navigation = <div />;
+      const frame = mountWithApp(
+        <Frame showMobileNavigation navigation={navigation} />,
+        {mediaQuery: {isNavigationCollapsed: false}},
+      );
+
+      expect(frame).not.toContainReactComponent('div', {
+        'aria-modal': true,
+        role: 'dialog',
+      });
+    });
   });
 
   describe('globalRibbon', () => {

src/components/Modal/components/Dialog/Dialog.tsx

@@ -66,6 +66,7 @@ export function Dialog({
         <TrapFocus>
           <div
             role="dialog"
+            aria-modal
             aria-labelledby={labelledBy}
             tabIndex={-1}
             className={styles.Dialog}

src/components/Sheet/Sheet.tsx

@@ -76,6 +76,7 @@ export function Sheet({
           <TrapFocus trapping={open}>
             <div
               role="dialog"
+              aria-modal
               tabIndex={-1}
               className={styles.Sheet}
               aria-label={accessibilityLabel}