From 69a3caca01c59c00bd29ceba720139c54fa356af Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 26 Oct 2022 09:28:11 +0200 Subject: [PATCH] Disabled: update docs to clarify the absence of inert polyfill (#45272) * Storybook: update docs to clarify the absence of polyfills * Revert "Storybook: update docs to clarify the absence of polyfills" This reverts commit 41faf412dbcfb15a6288318ed9aadfe9c8fca3a9. * Add note about the inert attribute in the Disabled storybook example * CHANGELOG * Revert "Add note about the inert attribute in the Disabled storybook example" This reverts commit 03195996120834e21724bfc2b6b5458fcf84322e. * Add note to README and main export JSDocs * Update CHANGELOG --- packages/components/CHANGELOG.md | 1 + packages/components/src/disabled/README.md | 2 ++ packages/components/src/disabled/index.tsx | 9 ++++++++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 88f9563f0ec58..d7d2c0742756a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -29,6 +29,7 @@ ### Internal +- `Disabled`: add a note in the docs about the lack of polyfill for the `inert` attribute ([#45272](https://github.com/WordPress/gutenberg/pull/45272)) - `Snackbar`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44934](https://github.com/WordPress/gutenberg/pull/44934)) - `AnglePickerControl`: Set Storybook Label control type to 'text' ([#45122](https://github.com/WordPress/gutenberg/pull/45122)). - `SlotFill`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44403](https://github.com/WordPress/gutenberg/pull/44403)) diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md index 73350d4d9e21a..c36afc2044bd2 100644 --- a/packages/components/src/disabled/README.md +++ b/packages/components/src/disabled/README.md @@ -47,6 +47,8 @@ function CustomButton( props ) { } ``` +_Note: this component may not behave as expected in browsers that don't support [the `inert` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert). We recommend adding [the official WICG polyfill](https://github.com/WICG/inert) when using this component in your project._ + ### Props The component accepts the following props: diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx index 6ef627e8350fa..91c4316f3a6d8 100644 --- a/packages/components/src/disabled/index.tsx +++ b/packages/components/src/disabled/index.tsx @@ -15,7 +15,14 @@ const Context = createContext< boolean >( false ); const { Consumer, Provider } = Context; /** - * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction. + * `Disabled` is a component which disables descendant tabbable elements and + * prevents pointer interaction. + * + * _Note: this component may not behave as expected in browsers that don't + * support the `inert` HTML attribute. We recommend adding the official WICG + * polyfill when using this component in your project._ + * + * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert * * ```jsx * import { Button, Disabled, TextControl } from '@wordpress/components';