[SettingToggle]: Implement accessibility role and attributes

[joelzwarrington]

WHY are these changes introduced?

Fixes #5462

WHAT is this pull request doing?

• Allow aria-checked attribute to be passed to <Button />
• Set role on SettingAction button to switch
• Set aria-checked attributes on Setting Action based on enabled value
• Labelling the switch with the content passed in as children
• Reflected changes in the SettingToggle accessibility documentation

Screenshot showing which sub-component becomes the label & switch

There should be no visual change in this PR to the SettingToggle component.

SettingToggle.-.Confirming.aria.checked.interaction.mov

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React, {useState, useCallback} from "react";
import {Page} from "../src";

export function Playground() {
  const [active, setActive] = useState(false);

  const handleToggle = useCallback(() => setActive((active) => !active), []);

  const contentStatus = active ? 'Deactivate' : 'Activate';
  const textStatus = active ? 'activated' : 'deactivated';

  return (
    <Page title="Playground">
      <SettingToggle
        action={{
          content: contentStatus,
          onAction: handleToggle,
        }}
        enabled={active}
      >
        This setting is <TextStyle variation="strong">{textStatus}</TextStyle>.
      </SettingToggle>
    </Page>
  );
}

🎩 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
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[github-actions]

size-limit report 📦

Path	Size
cjs	150.79 KB (+0.06% 🔺)
esm	86.92 KB (+0.08% 🔺)
esnext	136.79 KB (+0.06% 🔺)
css	37.22 KB (0%)

[joelzwarrington]

@chloerice / @alex-page do you know who I should ping to get this reviewed?

[kyledurand]

Code looks good. Thanks @joelzwarrington

[changeset-bot]

⚠️ No Changeset found

Latest commit: 48bc383

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[ghost]

🎉 Thanks for your contribution to Polaris!