From c21e9ab4bf0d492d7f4416dc951bb4083b75746f Mon Sep 17 00:00:00 2001 From: Davide Date: Thu, 28 Apr 2022 00:54:46 +0100 Subject: [PATCH 1/3] Update docs for `displayCheck` configuration. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4ad233a5e..b3df32a0c 100644 --- a/README.md +++ b/README.md @@ -137,8 +137,8 @@ To reliably check if an element is tabbable/focusable, Tabbable defaults to the The `displayCheck` configuration accepts the following options: -- `full`: (default) Most reliably resembling browser behavior, this option checks that an element is displayed and all of his ancestors are displayed as well (notice that this doesn't exclude `visibility: hidden` or elements with zero size). This check is by far the slowest option as it will cause layout reflow. -- `non-zero-area`: This option checks display under the assumption that elements that are not displayed have zero area (width AND height equals zero). While not keeping true to browser behavior, this option may be less intensive than the `full` option, and better for accessibility, as zero-size elements with focusable content are considered a strong accessibility anti-pattern. +- `full`: (default) Most reliably resembling browser behavior, this option checks that an element is displayed and all of his ancestors are displayed as well (notice that this doesn't exclude `visibility: hidden` or elements with zero size). +- `non-zero-area`: This option checks display under the assumption that elements that are not displayed have zero area (width AND height equals zero). While not keeping true to browser behavior, this option may enhance accessibility, as zero-size elements with focusable content are considered a strong accessibility anti-pattern; it also used to be less intensive than the `full` option, but as a result of optimizations this is not the case anymore. - `none`: This completely opts out of the display check. **This option is not recommended**, as it might return elements that are not displayed, and as such not tabbable/focusable and can break accessibility. Make sure you know which elements in your DOM are not displayed and can filter them out yourself before using this option. > ⚠️ __Testing in JSDom__ (e.g. with Jest): See notes about [testing in JSDom](#testing-in-jsdom). From fac92cab5ba73a034ea269812dc0f5f0c138d2cd Mon Sep 17 00:00:00 2001 From: DaviDevMod <98312056+DaviDevMod@users.noreply.github.com> Date: Fri, 29 Apr 2022 00:25:27 +0100 Subject: [PATCH 2/3] Add note about layout reflow Co-authored-by: Stefan Cameron --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b3df32a0c..a91504ef5 100644 --- a/README.md +++ b/README.md @@ -137,8 +137,8 @@ To reliably check if an element is tabbable/focusable, Tabbable defaults to the The `displayCheck` configuration accepts the following options: -- `full`: (default) Most reliably resembling browser behavior, this option checks that an element is displayed and all of his ancestors are displayed as well (notice that this doesn't exclude `visibility: hidden` or elements with zero size). -- `non-zero-area`: This option checks display under the assumption that elements that are not displayed have zero area (width AND height equals zero). While not keeping true to browser behavior, this option may enhance accessibility, as zero-size elements with focusable content are considered a strong accessibility anti-pattern; it also used to be less intensive than the `full` option, but as a result of optimizations this is not the case anymore. +- `full`: (default) Most reliably resembling browser behavior, this option checks that an element is displayed and all of his ancestors are displayed as well (notice that this doesn't exclude `visibility: hidden` or elements with zero size). This option will cause layout reflow, however. If that is a concern, consider the `none` option. +- `non-zero-area`: This option checks display under the assumption that elements that are not displayed have zero area (width AND height equals zero). While not keeping true to browser behavior, this option may enhance accessibility, as zero-size elements with focusable content are considered a strong accessibility anti-pattern. Like the `full` option, this option also causes layout reflow, and should have basically the same performance. Consider the `none` option if reflow is a concern. - `none`: This completely opts out of the display check. **This option is not recommended**, as it might return elements that are not displayed, and as such not tabbable/focusable and can break accessibility. Make sure you know which elements in your DOM are not displayed and can filter them out yourself before using this option. > ⚠️ __Testing in JSDom__ (e.g. with Jest): See notes about [testing in JSDom](#testing-in-jsdom). From 3a815e4a3c31c0cd4ee34bde580d9ddb3e292883 Mon Sep 17 00:00:00 2001 From: Davide Date: Fri, 29 Apr 2022 00:30:29 +0100 Subject: [PATCH 3/3] Added changeset. --- .changeset/healthy-dryers-camp.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/healthy-dryers-camp.md diff --git a/.changeset/healthy-dryers-camp.md b/.changeset/healthy-dryers-camp.md new file mode 100644 index 000000000..aa0c763a0 --- /dev/null +++ b/.changeset/healthy-dryers-camp.md @@ -0,0 +1,5 @@ +--- +'tabbable': patch +--- + +Updated docs for `displayCheck` configuration.