Fluent v8 Button docs: add splitbutton error warning to docs, remove button ariaDescription example

packages/react-examples/src/react/Button/Button.doc.tsx

@@ -8,7 +8,6 @@ import { ButtonCommandExample } from './Button.Command.Example';
 import { ButtonIconExample } from './Button.Icon.Example';
 import { ButtonIconWithTooltipExample } from './Button.IconWithTooltip.Example';
 import { ButtonAnchorExample } from './Button.Anchor.Example';
-import { ButtonScreenReaderExample } from './Button.ScreenReader.Example';
 import { ButtonSplitExample } from './Button.Split.Example';
 import { ButtonSplitCustomExample } from './Button.CustomSplit.Example';
 import { ButtonToggleExample } from './Button.Toggle.Example';
@@ -23,7 +22,6 @@ const ButtonCustomSplitExampleCode = require('!raw-loader?esModule=false!@fluent
 const ButtonDefaultExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/Button/Button.Default.Example.tsx') as string;
 const ButtonIconExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/Button/Button.Icon.Example.tsx') as string;
 const ButtonIconWithTooltipExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/Button/Button.IconWithTooltip.Example.tsx') as string;
-const ButtonScreenReaderExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/Button/Button.ScreenReader.Example.tsx') as string;
 const ButtonSplitExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/Button/Button.Split.Example.tsx') as string;
 const ButtonToggleExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/Button/Button.Toggle.Example.tsx') as string;
 const ButtonCommandExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react/Button/Button.Command.Example.tsx') as string;
@@ -93,11 +91,6 @@ export const ButtonPageProps = (props: IButtonDocPageProps): IDocPageProps => ({
       code: ButtonAnchorExampleCode,
       view: <ButtonAnchorExample disabled={props.areButtonsDisabled} checked={props.areButtonsChecked} />,
     },
-    {
-      title: 'Button with Aria Description for Screen Reader',
-      code: ButtonScreenReaderExampleCode,
-      view: <ButtonScreenReaderExample disabled={props.areButtonsDisabled} checked={props.areButtonsChecked} />,
-    },
     {
       title: 'Custom Split Button',
       code: ButtonCustomSplitExampleCode,

packages/react-examples/src/react/Button/docs/ButtonBestPractices.md

@@ -11,3 +11,7 @@
 
 - Use sentence-style capitalization—only capitalize the first word. For more info, see [Capitalization](https://docs.microsoft.com/style-guide/capitalization) in the Microsoft Writing Style Guide.
 - Make sure it's clear what will happen when people interact with the button. Be concise; usually a single verb is best. Include a noun if there is any room for interpretation about what the verb means. For example, "Delete folder" or "Create account".
+
+### Accessibility
+
+- SplitButton automated test error: because the SplitButton variant is a single tab stop with two actions (the primary action and the menu), we have a parent button that gets keyboard focus and two individual buttons nested within it. This covers the widest range of practical accessibility scenarios, but causes an automated error that should be ignored. The v9 SplitButton does not have this issue because it is treated as two separate tab stops.