diff --git a/packages/react-examples/src/react/Button/Button.ScreenReader.Example.tsx b/packages/react-examples/src/react/Button/Button.ScreenReader.Example.tsx deleted file mode 100644 index e75cf135dafcab..00000000000000 --- a/packages/react-examples/src/react/Button/Button.ScreenReader.Example.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import { PrimaryButton } from '@fluentui/react/lib/Button'; - -export interface IButtonExampleProps { - // These are set based on the toggles shown above the examples (not needed in real code) - disabled?: boolean; - checked?: boolean; -} - -export const ButtonScreenReaderExample: React.FunctionComponent = props => { - const { disabled, checked } = props; - - return ( - - Button with Aria Description - - ); -}; diff --git a/packages/react-examples/src/react/Button/Button.doc.tsx b/packages/react-examples/src/react/Button/Button.doc.tsx index a15f39e25cb067..6d832e63a11530 100644 --- a/packages/react-examples/src/react/Button/Button.doc.tsx +++ b/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: , }, - { - title: 'Button with Aria Description for Screen Reader', - code: ButtonScreenReaderExampleCode, - view: , - }, { title: 'Custom Split Button', code: ButtonCustomSplitExampleCode, diff --git a/packages/react-examples/src/react/Button/docs/ButtonBestPractices.md b/packages/react-examples/src/react/Button/docs/ButtonBestPractices.md index 8dbc9f43574df8..ff631fba464fbc 100644 --- a/packages/react-examples/src/react/Button/docs/ButtonBestPractices.md +++ b/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.