diff --git a/.changeset/gentle-cobras-punch.md b/.changeset/gentle-cobras-punch.md new file mode 100644 index 00000000000..af516b5a466 --- /dev/null +++ b/.changeset/gentle-cobras-punch.md @@ -0,0 +1,5 @@ +--- +'@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. diff --git a/polaris-react/src/utilities/focus.ts b/polaris-react/src/utilities/focus.ts index a2cb139b824..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),*[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),*[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}) =>