From a5425f536e86975714f883919ede5648c3b00546 Mon Sep 17 00:00:00 2001 From: Aaron Mertzenich Date: Thu, 17 Nov 2022 17:42:55 +0000 Subject: [PATCH 1/3] Properly handle buttons with `aria-disabled` and `tabindex="-1"` in focus helpers Fixes #7728 --- .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 16c3c2b6397716885ccd9829c3899f815c97af17 Mon Sep 17 00:00:00 2001 From: Aaron Mertzenich Date: Fri, 18 Nov 2022 08:46:02 -0600 Subject: [PATCH 2/3] Update .changeset/gentle-cobras-punch.md Co-authored-by: Kyle Durand --- .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 16d6efe7eced86d8addff1b948e43af40bed686c Mon Sep 17 00:00:00 2001 From: Aaron Mertzenich Date: Mon, 21 Nov 2022 09:09:31 -0600 Subject: [PATCH 3/3] Add `:not([aria-disabled])` to selector Co-authored-by: zak warsame <42528878+zakwarsame@users.noreply.github.com> --- 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}) =>