Properly handle buttons with aria-disabled in focus helpers

[acmertz]

WHY are these changes introduced?

Fixes #7728

WHAT is this pull request doing?

Earlier this year, #6461 changed disabled buttons to use a combination of aria-disabled="disabled" and tabindex="-1" instead of the disabled attribute to make them more accessible for keyboard and screen reader users. This caused the focus-related helper functions in focus.ts to incorrectly identify disabled Polaris <Button> components as focusable, which in turn broke focus trapping (see #7728).

This PR updates a CSS query defined in focus.ts to exclude buttons with tabindex="-1" when querying focusable elements so that disabled Polaris buttons are no longer selected.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React, {useState} from 'react';

import {Button, Modal, Page, Stack, TextField} from '../src';

export function Playground() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  function handleClose() {
    setIsModalOpen(false);
  }

  function noop() {}

  return (
    <Page title="Playground">
      <Button onClick={() => setIsModalOpen(true)}>Open modal</Button>
      <Button disabled>Disabled button</Button>

      <Modal
        open={isModalOpen}
        onClose={handleClose}
        title="Example modal"
        primaryAction={{
          content: 'Primary action',
          onAction: handleClose,
          disabled: true,
        }}
      >
        <Modal.Section>
          <Stack vertical>
            <p>Some content</p>
            <TextField
              onChange={noop}
              autoComplete=""
              label="Text field 1"
              value=""
            />
            <TextField
              onChange={noop}
              autoComplete=""
              label="Text field 2"
              value=""
            />
          </Stack>
        </Modal.Section>
      </Modal>
    </Page>
  );
}

1. Copy the above code into Playground.tsx and run yarn dev
2. Confirm that the changes in this PR fix [Modal] Focus isn't trapped in the modal when the primary action is disabled #7728:
   1. Click "Open modal"
   2. Use the Tab key to cycle through focusable elements within the modal
   3. Confirm that focus wraps around to the beginning of the modal despite the primary action button being disabled

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	210.87 KB (+0.01% 🔺)
polaris-react-esm	136.21 KB (+0.01% 🔺)
polaris-react-esnext	191.89 KB (+0.01% 🔺)
polaris-react-css	41.95 KB (0%)

[kyledurand]

LGTM but I pinged a couple other folks who have more context

[AndrewMusgrave]

LGTM! ✅

[zakwarsame]

Thanks for the update here @acmertz 👍🏾

I remember the shopify-web team (or a different team) updating this throughout the web before releasing that polaris version.