From e33f6683b3fe81df03b60e1dd5e3fd99f5c88c54 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 22 Jun 2022 20:24:24 -0400 Subject: [PATCH] chore: fix various a11y violations in examples --- .../react-core/src/components/Alert/Alert.tsx | 2 - .../__snapshots__/Alert.test.tsx.snap | 35 -- .../components/Masthead/examples/Masthead.md | 6 +- .../src/components/Menu/MenuGroup.tsx | 7 +- .../src/components/Menu/examples/Menu.md | 50 +-- .../Menu/examples/MenuDrilldown.tsx | 18 +- .../examples/MenuDrilldownInitialState.tsx | 27 +- .../MenuDrilldownSubmenuFunctions.tsx | 18 +- .../react-core/src/components/Nav/Nav.tsx | 2 +- .../src/components/Nav/examples/Nav.md | 114 +++--- .../components/Nav/examples/NavDrilldown.tsx | 2 +- .../OptionsMenu/OptionsMenuItemGroup.tsx | 4 +- .../OptionsMenu/OptionsMenuToggleWithText.tsx | 53 +-- .../OptionsMenuItemGroup.test.tsx.snap | 2 + .../__snapshots__/OptionsMenu.test.tsx.snap | 6 +- .../OptionsMenu/examples/OptionsMenu.md | 22 +- .../src/components/Page/PageHeader.tsx | 5 +- .../src/components/Page/PageSidebar.tsx | 7 +- .../src/components/Page/PageToggleButton.tsx | 5 +- .../src/components/Page/examples/Page.md | 40 ++- .../src/components/Page/examples/page.css | 3 + .../src/components/Select/examples/Select.md | 20 +- .../src/components/Tabs/TabContent.tsx | 3 +- .../src/components/Tabs/examples/Tabs.md | 282 ++++++++------- .../components/Tabs/examples/TabsDynamic.tsx | 1 + .../ToggleGroup/examples/ToggleGroup.md | 32 +- .../components/TreeView/examples/TreeView.md | 330 +++++++++--------- 27 files changed, 546 insertions(+), 550 deletions(-) create mode 100644 packages/react-core/src/components/Page/examples/page.css diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index c35b3da0e49..a8add24f910 100644 --- a/packages/react-core/src/components/Alert/Alert.tsx +++ b/packages/react-core/src/components/Alert/Alert.tsx @@ -81,7 +81,6 @@ export const Alert: React.FunctionComponent = ({ isPlain = false, isLiveRegion = false, variantLabel = `${capitalize(variant)} alert:`, - 'aria-label': ariaLabel = `${capitalize(variant)} Alert`, actionClose, actionLinks, title, @@ -203,7 +202,6 @@ export const Alert: React.FunctionComponent = ({ styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'], className )} - aria-label={ariaLabel} {...ouiaProps} {...(isLiveRegion && { 'aria-live': 'polite', diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap index 6d3f59a100e..c1f46c81cdc 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap @@ -3,7 +3,6 @@ exports[`Alert Alert - danger Action Link 1`] = `
+ +
)} - {...props} - > - {toggleText} - -
+ ); }; OptionsMenuToggleWithText.displayName = 'OptionsMenuToggleWithText'; diff --git a/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap b/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap index e0e3628b84d..dcdc048947a 100644 --- a/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap +++ b/packages/react-core/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap @@ -4,10 +4,12 @@ exports[`OptionsMenuItemGroup should match snapshot (auto-generated) 1`] = `
    ReactNode
diff --git a/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap b/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap index b6b9a0deada..8db56ebf7f9 100644 --- a/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap +++ b/packages/react-core/src/components/OptionsMenu/__tests__/__snapshots__/OptionsMenu.test.tsx.snap @@ -49,6 +49,7 @@ exports[`optionsMenu expanded 1`] = `

  • @@ -85,7 +85,7 @@ class DisabledOptionsMenu extends React.Component { return ( @@ -149,7 +149,7 @@ class MultipleOptions extends React.Component { return ( - - { topNav?: React.ReactNode; /** True to show the nav toggle button (toggles side nav) */ showNavToggle?: boolean; + /** Id for the nav toggle button */ + navToggleId?: string; /** True if the side nav is shown */ isNavOpen?: boolean; /** This prop is no longer managed through PageHeader but in the Page component. */ @@ -44,6 +46,7 @@ export const PageHeader: React.FunctionComponent = ({ isManagedSidebar: deprecatedIsManagedSidebar = undefined, role = undefined as string, showNavToggle = false, + navToggleId = 'nav-toggle', onNavToggle = () => undefined as any, 'aria-label': ariaLabel = 'Global navigation', 'aria-controls': ariaControls = null, @@ -68,7 +71,7 @@ export const PageHeader: React.FunctionComponent = ({ {showNavToggle && (
    ), children: [ - { name: 'Settings', id: 'App2Settings' }, + { name: 'Settings', id: 'example7-App2Settings' }, { name: 'Loader', - id: 'App2Loader', + id: 'example7-App2Loader', children: [ - { name: 'Loading App 1', id: 'LoadApp1' }, - { name: 'Loading App 2', id: 'LoadApp2' }, - { name: 'Loading App 3', id: 'LoadApp3' } + { name: 'Loading App 1', id: 'example7-LoadApp1' }, + { name: 'Loading App 2', id: 'example7-LoadApp2' }, + { name: 'Loading App 3', id: 'example7-LoadApp3' } ] } ] @@ -827,27 +827,27 @@ class IconTreeView extends React.Component { }, { name: 'Cost management', - id: 'Cost', + id: 'example7-Cost', children: [ { name: 'Application 3', - id: 'App3', + id: 'example7-App3', children: [ - { name: 'Settings', id: 'App3Settings' }, - { name: 'Current', id: 'App3Current' } + { name: 'Settings', id: 'example7-App3Settings' }, + { name: 'Current', id: 'example7-App3Current' } ] } ] }, { name: 'Sources', - id: 'Sources', - children: [{ name: 'Application 4', id: 'App4', children: [{ name: 'Settings', id: 'App4Settings' }] }] + id: 'example7-Sources', + children: [{ name: 'Application 4', id: 'example7-App4', children: [{ name: 'Settings', id: 'example7-App4Settings' }] }] }, { name: 'Really really really long folder name that overflows the container it is in', - id: 'Long', - children: [{ name: 'Application 5', id: 'App5' }] + id: 'example7-Long', + children: [{ name: 'Application 5', id: 'example7-App5' }] } ]; return ; @@ -865,28 +865,28 @@ const GuidesTreeView: React.FunctionComponent = () => { const options: TreeViewDataItem[] = [ { name: 'Application launcher', - id: 'AppLaunch', + id: 'example8-AppLaunch', children: [ { name: 'Application 1', - id: 'App1', + id: 'example8-App1', children: [ - { name: 'Settings', id: 'App1Settings' }, - { name: 'Current', id: 'App1Current' } + { name: 'Settings', id: 'example8-App1Settings' }, + { name: 'Current', id: 'example8-App1Current' } ] }, { name: 'Application 2', - id: 'App2', + id: 'example8-App2', children: [ - { name: 'Settings', id: 'App2Settings' }, + { name: 'Settings', id: 'example8-App2Settings' }, { name: 'Loader', - id: 'App2Loader', + id: 'example8-App2Loader', children: [ - { name: 'Loading App 1', id: 'LoadApp1' }, - { name: 'Loading App 2', id: 'LoadApp2' }, - { name: 'Loading App 3', id: 'LoadApp3' } + { name: 'Loading App 1', id: 'example8-LoadApp1' }, + { name: 'Loading App 2', id: 'example8-LoadApp2' }, + { name: 'Loading App 3', id: 'example8-LoadApp3' } ] } ] @@ -896,27 +896,27 @@ const GuidesTreeView: React.FunctionComponent = () => { }, { name: 'Cost management', - id: 'Cost', + id: 'example8-Cost', children: [ { name: 'Application 3', - id: 'App3', + id: 'example8-App3', children: [ - { name: 'Settings', id: 'App3Settings' }, - { name: 'Current', id: 'App3Current' } + { name: 'Settings', id: 'example8-App3Settings' }, + { name: 'Current', id: 'example8-App3Current' } ] } ] }, { name: 'Sources', - id: 'Sources', - children: [{ name: 'Application 4', id: 'App4', children: [{ name: 'Settings', id: 'App4Settings' }] }] + id: 'example8-Sources', + children: [{ name: 'Application 4', id: 'example8-App4', children: [{ name: 'Settings', id: 'example8-App4Settings' }] }] }, { name: 'Really really really long folder name that overflows the container it is in', - id: 'Long', - children: [{ name: 'Application 5', id: 'App5' }] + id: 'example8-Long', + children: [{ name: 'Application 5', id: 'example8-App5' }] } ]; return ; @@ -935,52 +935,52 @@ const CompactTreeView: React.FunctionComponent = () => { name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.', title: 'apiVersion', - id: 'apiVersion' + id: 'example9-apiVersion' }, { name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:', title: 'kind', - id: 'kind' + id: 'example9-kind' }, { name: 'Standard metadata object', title: 'metadata', - id: 'metadata' + id: 'example9-metadata' }, { name: 'Standard metadata object', title: 'spec', - id: 'spec', + id: 'example9-spec', children: [ { name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).', title: 'minReadySeconds', - id: 'minReadySeconds' + id: 'example9-minReadySeconds' }, { name: 'Indicates that the deployment is paused', title: 'paused', - id: 'paused' + id: 'example9-paused' }, { name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.', title: 'progressDeadlineSeconds', - id: 'progressDeadlineSeconds', + id: 'example9-progressDeadlineSeconds', children: [ { name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.', title: 'revisionHistoryLimit', - id: 'revisionHistoryLimit', + id: 'example9-revisionHistoryLimit', children: [ { name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.', title: 'matchLabels', - id: 'matchLabels' + id: 'example9-matchLabels' } ] } @@ -1005,52 +1005,52 @@ const CompactNoBackgroundTreeView: React.FunctionComponent = () => { name: 'APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.', title: 'apiVersion', - id: 'apiVersion' + id: 'example10-apiVersion' }, { name: 'Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:', title: 'kind', - id: 'kind' + id: 'example10-kind' }, { name: 'Standard metadata object', title: 'metadata', - id: 'metadata' + id: 'example10-metadata' }, { name: 'Standard metadata object', title: 'spec', - id: 'spec', + id: 'example10-spec', children: [ { name: 'Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).', title: 'minReadySeconds', - id: 'minReadySeconds' + id: 'example10-minReadySeconds' }, { name: 'Indicates that the deployment is paused', title: 'paused', - id: 'paused' + id: 'example10-paused' }, { name: 'The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.', title: 'progressDeadlineSeconds', - id: 'progressDeadlineSeconds', + id: 'example10-progressDeadlineSeconds', children: [ { name: 'The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.', title: 'revisionHistoryLimit', - id: 'revisionHistoryLimit', + id: 'example10-revisionHistoryLimit', children: [ { name: 'Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.', title: 'matchLabels', - id: 'matchLabels' + id: 'example10-matchLabels' } ] }