From 9b20778f45088e1b59ca8207a0b341d365651543 Mon Sep 17 00:00:00 2001 From: Aaron Mertzenich Date: Thu, 1 Dec 2022 16:17:29 -0600 Subject: [PATCH 1/5] Revert "Revert "Properly handle buttons with `aria-disabled` and `tabindex="-1"` in focus helpers Fixes #7728"" This reverts commit 839a26d142a1a1d11297147f42142b58dac2c452. --- .changeset/gentle-cobras-punch.md | 5 +++++ polaris-react/src/utilities/focus.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/gentle-cobras-punch.md diff --git a/.changeset/gentle-cobras-punch.md b/.changeset/gentle-cobras-punch.md new file mode 100644 index 00000000000..34c4687a88d --- /dev/null +++ b/.changeset/gentle-cobras-punch.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Updates the focus helper functions to no longer treat buttons with `aria-disabled="disabled"` and `tabindex="-1" (but no`disabled` attribute) as focusable. diff --git a/polaris-react/src/utilities/focus.ts b/polaris-react/src/utilities/focus.ts index a2cb139b824..4fffd7abd41 100644 --- a/polaris-react/src/utilities/focus.ts +++ b/polaris-react/src/utilities/focus.ts @@ -6,9 +6,9 @@ export type MouseUpBlurHandler = ( ) => void; const FOCUSABLE_SELECTOR = - 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]'; + 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([tabindex="-1"]),*[tabindex]'; const KEYBOARD_FOCUSABLE_SELECTORS = - 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]:not([tabindex="-1"])'; + 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([tabindex="-1"]),*[tabindex]:not([tabindex="-1"])'; const MENUITEM_FOCUSABLE_SELECTORS = 'a[role="menuitem"],frame[role="menuitem"],iframe[role="menuitem"],input[role="menuitem"]:not([type=hidden]):not(:disabled),select[role="menuitem"]:not(:disabled),textarea[role="menuitem"]:not(:disabled),button[role="menuitem"]:not(:disabled),*[tabindex]:not([tabindex="-1"])'; export const handleMouseUpByBlurring: MouseUpBlurHandler = ({currentTarget}) => From e0b1ff560b91b257b4b9202194b0af7b1fb30f9b Mon Sep 17 00:00:00 2001 From: Aaron Mertzenich Date: Thu, 1 Dec 2022 16:17:29 -0600 Subject: [PATCH 2/5] Revert "Revert "Update .changeset/gentle-cobras-punch.md"" This reverts commit 92ed5dfe5d76d9283946786b92e30ef204304251. --- .changeset/gentle-cobras-punch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gentle-cobras-punch.md b/.changeset/gentle-cobras-punch.md index 34c4687a88d..af516b5a466 100644 --- a/.changeset/gentle-cobras-punch.md +++ b/.changeset/gentle-cobras-punch.md @@ -2,4 +2,4 @@ '@shopify/polaris': patch --- -Updates the focus helper functions to no longer treat buttons with `aria-disabled="disabled"` and `tabindex="-1" (but no`disabled` attribute) as focusable. +Updated the focus helper functions to no longer treat buttons with `aria-disabled="disabled"` and `tabindex="-1" (but no`disabled` attribute) as focusable. From 3e97c2f88e60c029032ed01878f59c4c7ed6695e Mon Sep 17 00:00:00 2001 From: Aaron Mertzenich Date: Thu, 1 Dec 2022 16:17:29 -0600 Subject: [PATCH 3/5] Revert "Revert "Add `:not([aria-disabled])` to selector"" This reverts commit 43b5cc419a9d06e92e1bf1b748e042f8b95ba266. --- polaris-react/src/utilities/focus.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/utilities/focus.ts b/polaris-react/src/utilities/focus.ts index 4fffd7abd41..b508619bc10 100644 --- a/polaris-react/src/utilities/focus.ts +++ b/polaris-react/src/utilities/focus.ts @@ -6,9 +6,9 @@ export type MouseUpBlurHandler = ( ) => void; const FOCUSABLE_SELECTOR = - 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([tabindex="-1"]),*[tabindex]'; + 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([aria-disabled]):not([tabindex="-1"]),*[tabindex]'; const KEYBOARD_FOCUSABLE_SELECTORS = - 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([tabindex="-1"]),*[tabindex]:not([tabindex="-1"])'; + 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([aria-disabled]):not([tabindex="-1"]),*[tabindex]:not([tabindex="-1"])'; const MENUITEM_FOCUSABLE_SELECTORS = 'a[role="menuitem"],frame[role="menuitem"],iframe[role="menuitem"],input[role="menuitem"]:not([type=hidden]):not(:disabled),select[role="menuitem"]:not(:disabled),textarea[role="menuitem"]:not(:disabled),button[role="menuitem"]:not(:disabled),*[tabindex]:not([tabindex="-1"])'; export const handleMouseUpByBlurring: MouseUpBlurHandler = ({currentTarget}) => From 926bb81fd0f8fefb6d0e004cd776184e0086283a Mon Sep 17 00:00:00 2001 From: Aaron Mertzenich Date: Mon, 5 Dec 2022 17:57:57 +0000 Subject: [PATCH 4/5] Explicitly select `:not([aria-disabled="true"])` Allows us to select buttons that would be excluded by just using `:not([aria-disabled])` --- polaris-react/src/utilities/focus.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/utilities/focus.ts b/polaris-react/src/utilities/focus.ts index b508619bc10..e332cc06e34 100644 --- a/polaris-react/src/utilities/focus.ts +++ b/polaris-react/src/utilities/focus.ts @@ -6,9 +6,9 @@ export type MouseUpBlurHandler = ( ) => void; const FOCUSABLE_SELECTOR = - 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([aria-disabled]):not([tabindex="-1"]),*[tabindex]'; + 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([aria-disabled="true"]):not([tabindex="-1"]),*[tabindex]'; const KEYBOARD_FOCUSABLE_SELECTORS = - 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([aria-disabled]):not([tabindex="-1"]),*[tabindex]:not([tabindex="-1"])'; + 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([aria-disabled="true"]):not([tabindex="-1"]),*[tabindex]:not([tabindex="-1"])'; const MENUITEM_FOCUSABLE_SELECTORS = 'a[role="menuitem"],frame[role="menuitem"],iframe[role="menuitem"],input[role="menuitem"]:not([type=hidden]):not(:disabled),select[role="menuitem"]:not(:disabled),textarea[role="menuitem"]:not(:disabled),button[role="menuitem"]:not(:disabled),*[tabindex]:not([tabindex="-1"])'; export const handleMouseUpByBlurring: MouseUpBlurHandler = ({currentTarget}) => From 733ef445b0cb5c539c808e7b55a8a58ed30451b9 Mon Sep 17 00:00:00 2001 From: Aaron Mertzenich Date: Thu, 8 Dec 2022 19:40:13 +0000 Subject: [PATCH 5/5] Fix typo in changeset --- .changeset/gentle-cobras-punch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gentle-cobras-punch.md b/.changeset/gentle-cobras-punch.md index af516b5a466..b8c14a1a942 100644 --- a/.changeset/gentle-cobras-punch.md +++ b/.changeset/gentle-cobras-punch.md @@ -2,4 +2,4 @@ '@shopify/polaris': patch --- -Updated the focus helper functions to no longer treat buttons with `aria-disabled="disabled"` and `tabindex="-1" (but no`disabled` attribute) as focusable. +Updated the focus helper functions to no longer treat buttons with `aria-disabled="true"` and `tabindex="-1" (but no`disabled` attribute) as focusable.