Revert "Revert "Properly handle buttons with aria-disabled in focus helpers""

[acmertz]

Reverts #7819, restoring the original change made in #7760 to fix #7728 - with a small tweak* to avoid a downstream accessibility issue caused by the original fix.

Please see the original PR (#7819) for more details on the issue being fixed.

*Investigation notes:

The first version of this change simply added `:not([tabindex="-1"])` to the affected CSS selector string in JS. It was updated to include `:not([aria-disabled])` based on [this review comment](https://github.com//pull/7760#discussion_r1026916700), but this ultimately caused some Storybook accessibility failures in CI in web and prompted the original change to be reverted.

After creating a few snapshots with variations on this change, I narrowed down the issue to being caused by the addition of :not([aria-disabled]) to the FOCUSABLE_SELECTOR constant in focus.ts:

https://github.com/Shopify/polaris/blob/35ab232b5619b691fcfe4686d504b9b470836b2f/polaris-react/src/utilities/focus.ts#L8-L9

This caused failures like this to occur in web upon upgrading to the newest version of Polaris:

Error: Elements must only use allowed ARIA attributes (aria-allowed-attr)
Affected node(s):
    <div tabindex="0" aria-describedby="PolarisTooltipContent1" data-polaris-tooltip-activator="true" aria-controls="Polarispopover1" aria-owns="Polarispopover1" aria-expanded="false">
    <div tabindex="0" aria-describedby="PolarisTooltipContent5" data-polaris-tooltip-activator="true" aria-controls="Polarispopover2" aria-owns="Polarispopover2" aria-expanded="false">
    <div tabindex="0" aria-describedby="PolarisTooltipContent6" data-polaris-tooltip-activator="true" aria-controls="Polarispopover3" aria-owns="Polarispopover3" aria-expanded="false">
    <div tabindex="0" aria-describedby="PolarisTooltipContent9" data-polaris-tooltip-activator="true" aria-controls="Polarispopover4" aria-owns="Polarispopover4" aria-expanded="false">
  For help resolving this see: https://dequeuniversity.com/rules/axe/4.4/aria-allowed-attr?application=axe-puppeteer

It appears that the test wasn't happy with some of the ARIA attributes being added to the affected <div> elements. The aria-controls, aria-owns, and aria-expanded attributes are applied in set-activator-attributes.ts by the Popover component, which calls the focusNextFocusableNode() helper in focus.ts.

I wasn't able to find the exact reason why this caused the CI failures above, but my hypothesis right now is that the original change in #7819 caused a scenario where setActivatorAttributes() could be called for an element which lacks a role that allows it to use aria-controls, aria-owns, and aria-expanded - but the way in which the <Popover> manages its activator and wrapper elements with multiple refs, useEffect() calls, and state variables makes this tricky to confirm (coupled with the fact that the CI failure occurred in another repository, of course).

Update: The issue occurred because the selector in the original PR, :not([aria-disabled]), incorrectly excluded elements that had aria-disabled="false". Changing the selector to :not([aria-disabled="true"]) fixes the Storybook accessibility failure that prompted the initial revert.

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	211.11 KB (+0.01% 🔺)
polaris-react-esm	136.33 KB (+0.01% 🔺)
polaris-react-esnext	192.18 KB (+0.01% 🔺)
polaris-react-css	42.12 KB (0%)

[acmertz]

/snapit

[github-actions]

🫰✨ Thanks @acmertz! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221201223726

yarn add @shopify/polaris@0.0.0-snapshot-release-20221201223726

[acmertz]

/snapit

[github-actions]

🫰✨ Thanks @acmertz! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221205180056

yarn add @shopify/polaris@0.0.0-snapshot-release-20221205180056

[acmertz]

/snapit

[github-actions]

🫰✨ Thanks @acmertz! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221205194321

yarn add @shopify/polaris@0.0.0-snapshot-release-20221205194321

[acmertz]

/snapit

[github-actions]

🫰✨ Thanks @acmertz! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221205223818

yarn add @shopify/polaris@0.0.0-snapshot-release-20221205223818

[acmertz]

/snapit

[github-actions]

🫰✨ Thanks @acmertz! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221207154429

yarn add @shopify/polaris@0.0.0-snapshot-release-20221207154429

[chloerice]

🙌🏽