@react-aria/dialog - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

dist/main.js

@@ -6,4 +6,7 @@ var {
 var {
+  focusSafely
+} = require("@react-aria/focus");
+
+var {
   filterDOMProps,
-  focusWithoutScrolling,
   useSlotId
@@ -31,3 +34,3 @@ } = require("@react-aria/utils");
     if (ref.current && !ref.current.contains(document.activeElement)) {
-      focusWithoutScrolling(ref.current); // Safari on iOS does not move the VoiceOver cursor to the dialog
+      focusSafely(ref.current); // Safari on iOS does not move the VoiceOver cursor to the dialog
       // or announce that it has opened until it has rendered. A workaround
@@ -39,3 +42,3 @@ // is to wait for half a second, then blur and re-focus the dialog.
           ref.current.blur();
-          focusWithoutScrolling(ref.current);
+          focusSafely(ref.current);
         }
@@ -47,3 +50,8 @@ }, 500);
     }
-  }, [ref]);
+  }, [ref]); // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
+  // on mount when inside an iframe, no matter which element we programmatically focus.
+  // See https://bugs.webkit.org/show_bug.cgi?id=211934.
+  // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
+  // even without aria-modal on the dialog itself.
+
   return {
@@ -55,4 +63,3 @@ dialogProps: _babelRuntimeHelpersExtends({}, filterDOMProps(props, {
       tabIndex: -1,
-      'aria-labelledby': props['aria-labelledby'] || titleId,
-      'aria-modal': true
+      'aria-labelledby': props['aria-labelledby'] || titleId
     }),
@@ -59,0 +66,0 @@ titleProps: {

dist/module.js

 import { useEffect } from "react";
-import { filterDOMProps, focusWithoutScrolling, useSlotId } from "@react-aria/utils";
+import { focusSafely } from "@react-aria/focus";
+import { filterDOMProps, useSlotId } from "@react-aria/utils";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
@@ -18,3 +19,3 @@
     if (ref.current && !ref.current.contains(document.activeElement)) {
-      focusWithoutScrolling(ref.current); // Safari on iOS does not move the VoiceOver cursor to the dialog
+      focusSafely(ref.current); // Safari on iOS does not move the VoiceOver cursor to the dialog
       // or announce that it has opened until it has rendered. A workaround
@@ -26,3 +27,3 @@ // is to wait for half a second, then blur and re-focus the dialog.
           ref.current.blur();
-          focusWithoutScrolling(ref.current);
+          focusSafely(ref.current);
         }
@@ -34,3 +35,8 @@ }, 500);
     }
-  }, [ref]);
+  }, [ref]); // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
+  // on mount when inside an iframe, no matter which element we programmatically focus.
+  // See https://bugs.webkit.org/show_bug.cgi?id=211934.
+  // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
+  // even without aria-modal on the dialog itself.
+
   return {
@@ -42,4 +48,3 @@ dialogProps: _babelRuntimeHelpersEsmExtends({}, filterDOMProps(props, {
       tabIndex: -1,
-      'aria-labelledby': props['aria-labelledby'] || titleId,
-      'aria-modal': true
+      'aria-labelledby': props['aria-labelledby'] || titleId
     }),
@@ -46,0 +51,0 @@ titleProps: {

package.json

 {
   "name": "@react-aria/dialog",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Spectrum UI components in React",
@@ -24,5 +24,6 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/utils": "^3.1.0",
+    "@react-aria/focus": "^3.2.0",
+    "@react-aria/utils": "^3.2.0",
     "@react-stately/overlays": "^3.1.0",
-    "@react-types/dialog": "^3.1.0"
+    "@react-types/dialog": "^3.2.0"
   },
@@ -32,3 +33,3 @@ "publishConfig": {
   },
-  "gitHead": "211099972fe75ee581892efd01a7f89dfb9cdf69"
+  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
 }

src/useDialog.ts

@@ -14,3 +14,4 @@ /*
 import {AriaDialogProps} from '@react-types/dialog';
-import {filterDOMProps, focusWithoutScrolling, useSlotId} from '@react-aria/utils';
+import {filterDOMProps, useSlotId} from '@react-aria/utils';
+import {focusSafely} from '@react-aria/focus';
 import {HTMLAttributes, RefObject, useEffect} from 'react';
@@ -38,3 +39,3 @@
     if (ref.current && !ref.current.contains(document.activeElement)) {
-      focusWithoutScrolling(ref.current);
+      focusSafely(ref.current);
 
@@ -47,3 +48,3 @@ // Safari on iOS does not move the VoiceOver cursor to the dialog
           ref.current.blur();
-          focusWithoutScrolling(ref.current);
+          focusSafely(ref.current);
         }
@@ -58,2 +59,7 @@ }, 500);
 
+  // We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
+  // on mount when inside an iframe, no matter which element we programmatically focus.
+  // See https://bugs.webkit.org/show_bug.cgi?id=211934.
+  // useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
+  // even without aria-modal on the dialog itself.
   return {
@@ -64,4 +70,3 @@ dialogProps: {
       tabIndex: -1,
-      'aria-labelledby': props['aria-labelledby'] || titleId,
-      'aria-modal': true
+      'aria-labelledby': props['aria-labelledby'] || titleId
     },
@@ -68,0 +73,0 @@ titleProps: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30458

increased by6.92%

Lines of code

197

increased by7.65%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@react-aria/focus@^3.2.0

• + Added@react-aria/focus@3.19.0(transitive)

• + Added@react-aria/interactions@3.22.5(transitive)

• Updated@react-aria/utils@^3.2.0

• Updated@react-types/dialog@^3.2.0