From 90aebec631361ccf5ecb64414b104b07b302d4fc Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 13 Mar 2026 14:52:15 -0400 Subject: [PATCH] docs(components): Standardize approach to accessibility docs via design guidelines. --- .../content/components/about-modal/about-modal.md | 3 +++ .../content/components/backdrop/backdrop.md | 7 ------- .../components/background-image/background-image.md | 7 ------- .../patternfly-docs/content/components/brand/brand.md | 7 ------- .../content/components/checkbox/checkbox.md | 3 +++ .../content/components/clipboard-copy/clipboard-copy.md | 5 ++++- .../content/components/components-data.json | 4 ++-- .../components/context-selector/context-selector.md | 5 ++++- .../components/expandable-section/expandable-section.md | 2 ++ .../content/components/menu-toggle/menu-toggle.md | 9 --------- .../patternfly-docs/content/components/menu/menu.md | 3 +++ .../patternfly-docs/content/components/modal/modal.md | 3 +++ .../content/components/navigation/navigation.md | 5 ++++- .../patternfly-docs/content/components/page/page.md | 2 ++ .../content/components/progress/progress.md | 5 ++++- .../patternfly-docs/content/components/radio/radio.md | 3 +++ .../content/components/sidebar/sidebar.md | 5 ++++- .../components/skip-to-content/skip-to-content.md | 7 ------- .../patternfly-docs/content/components/switch/switch.md | 5 ++++- .../patternfly-docs/content/components/tabs/tabs.md | 3 ++- .../content/components/text-area/text-area.md | 7 ------- .../patternfly-docs/content/components/title/title.md | 5 ----- .../content/components/tree-view/tree-view.md | 5 ++++- 23 files changed, 51 insertions(+), 59 deletions(-) delete mode 100644 packages/documentation-site/patternfly-docs/content/components/backdrop/backdrop.md delete mode 100644 packages/documentation-site/patternfly-docs/content/components/background-image/background-image.md delete mode 100644 packages/documentation-site/patternfly-docs/content/components/brand/brand.md delete mode 100644 packages/documentation-site/patternfly-docs/content/components/menu-toggle/menu-toggle.md delete mode 100644 packages/documentation-site/patternfly-docs/content/components/skip-to-content/skip-to-content.md delete mode 100644 packages/documentation-site/patternfly-docs/content/components/text-area/text-area.md delete mode 100644 packages/documentation-site/patternfly-docs/content/components/title/title.md diff --git a/packages/documentation-site/patternfly-docs/content/components/about-modal/about-modal.md b/packages/documentation-site/patternfly-docs/content/components/about-modal/about-modal.md index 964eed7afe..b201d7c1e7 100644 --- a/packages/documentation-site/patternfly-docs/content/components/about-modal/about-modal.md +++ b/packages/documentation-site/patternfly-docs/content/components/about-modal/about-modal.md @@ -31,3 +31,6 @@ About modals are clicked into through a users interaction with a button, link, o Provide access to an about modal using a help icon in the application masthead. Clicking the help icon will launch a dropdown menu. The help menu should always include an option labeled "About" that launches the about modal. About modal dropdown + +## Accessibility +For information regarding accessibility, visit the [about modal accessibility](/components/about-modal/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/backdrop/backdrop.md b/packages/documentation-site/patternfly-docs/content/components/backdrop/backdrop.md deleted file mode 100644 index d5895f222d..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/backdrop/backdrop.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: Backdrop -section: components ---- - -## Accessibility -For information regarding accessibility, visit the [backdrop accessibility](/components/backdrop/accessibility) tab. diff --git a/packages/documentation-site/patternfly-docs/content/components/background-image/background-image.md b/packages/documentation-site/patternfly-docs/content/components/background-image/background-image.md deleted file mode 100644 index 42f765772a..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/background-image/background-image.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: Background image -section: components ---- - -## Accessibility -For information regarding accessibility, visit the [background image accessibility](/components/background-image/accessibility) tab. diff --git a/packages/documentation-site/patternfly-docs/content/components/brand/brand.md b/packages/documentation-site/patternfly-docs/content/components/brand/brand.md deleted file mode 100644 index dde5b09310..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/brand/brand.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: Brand -section: components ---- - -## Accessibility -For information regarding accessibility, visit the [brand accessibility](/components/brand/accessibility) tab. diff --git a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md index 861c20cc33..6a77aa0dfa 100644 --- a/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md +++ b/packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md @@ -62,3 +62,6 @@ The main difference between a switch and a checkbox is that a switch changes an
![Example 3 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-3.svg)
+ +## Accessibility +For information regarding accessibility, visit the [checkbox accessibility](/components/checkbox/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/clipboard-copy/clipboard-copy.md b/packages/documentation-site/patternfly-docs/content/components/clipboard-copy/clipboard-copy.md index cf4a672fcd..4b233ebddb 100644 --- a/packages/documentation-site/patternfly-docs/content/components/clipboard-copy/clipboard-copy.md +++ b/packages/documentation-site/patternfly-docs/content/components/clipboard-copy/clipboard-copy.md @@ -81,4 +81,7 @@ An inline compact clipboard copy can include 1 or 2 action buttons next to it. T
![Example of an inline clipboard copy component with two actions.](./img/clipboard-copy-inline-compact-2.svg) -
\ No newline at end of file + + +## Accessibility +For information regarding accessibility, visit the [clipboard copy accessibility](/components/clipboard-copy/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/components-data.json b/packages/documentation-site/patternfly-docs/content/components/components-data.json index bbd5eee0d0..6a0f889c17 100644 --- a/packages/documentation-site/patternfly-docs/content/components/components-data.json +++ b/packages/documentation-site/patternfly-docs/content/components/components-data.json @@ -201,7 +201,7 @@ }, "menu-toggle": { "illustration": "./img/component-illustrations/menu-toggle.png", - "summary": "A menu toggle is a selectable control that opens and closes a menu." + "summary": "A menu toggle is a selectable control that opens and closes a dropdown, select, or menu component." }, "menu": { "illustration": "./img/component-illustrations/menu.png", @@ -321,7 +321,7 @@ }, "text-area": { "illustration": "./img/component-illustrations/text-area.png", - "summary": "A text area allows users to enter a longer paragraph of text." + "summary": "Most commonly used in forms, a text area allows users to enter a longer paragraph of text." }, "text-input-group": { "illustration": "./img/component-illustrations/text-input-group.png", diff --git a/packages/documentation-site/patternfly-docs/content/components/context-selector/context-selector.md b/packages/documentation-site/patternfly-docs/content/components/context-selector/context-selector.md index 2f049356f1..2ecc24aa55 100644 --- a/packages/documentation-site/patternfly-docs/content/components/context-selector/context-selector.md +++ b/packages/documentation-site/patternfly-docs/content/components/context-selector/context-selector.md @@ -83,4 +83,7 @@ It is recommended that a page-level context selector be placed at the top of the
![Context selector placed within the page content, above breadcrumbs.](./img/page-context-selector.svg) -
\ No newline at end of file + + +## Accessibility +For information regarding accessibility, visit the [context selector accessibility](/components/menus/context-selector/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md b/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md index 663c0efca4..75bce4551d 100644 --- a/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md +++ b/packages/documentation-site/patternfly-docs/content/components/expandable-section/expandable-section.md @@ -58,4 +58,6 @@ We recommend using dynamic toggle text for an expandable section, which will upd ![Example of an expandable section in a documentation page.](./img/exp-sect-docs-page.svg) +## Accessibility + For more information regarding accessibility, visit the [expandable section accessibility tab](/components/expandable-section/accessibility). diff --git a/packages/documentation-site/patternfly-docs/content/components/menu-toggle/menu-toggle.md b/packages/documentation-site/patternfly-docs/content/components/menu-toggle/menu-toggle.md deleted file mode 100644 index fa25d34269..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/menu-toggle/menu-toggle.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -id: Menu toggle -section: components -subsection: menus ---- - -From a design perspective, the dropdown, select, and menu toggle components are all visually the same. - -For more information about this component's usage, see the [dropdown](/components/menus/dropdown/design-guidelines), [select](/components/menus/select/design-guidelines), and [menu](/components/menus/menu/design-guidelines) component guidelines. diff --git a/packages/documentation-site/patternfly-docs/content/components/menu/menu.md b/packages/documentation-site/patternfly-docs/content/components/menu/menu.md index b9aced4e07..5f28cca892 100644 --- a/packages/documentation-site/patternfly-docs/content/components/menu/menu.md +++ b/packages/documentation-site/patternfly-docs/content/components/menu/menu.md @@ -174,3 +174,6 @@ When creating menu item labels, keep in mind the following guidelines: * Options should reflect the result a user should expect. For example, a list or sorting options might include the items: *Alphabetical*, *Oldest first*, *Newest first*, and *Numeric*. * Descriptive text added to a menu item should be short. Two lines or less is recommended. + +## Accessibility +For information regarding accessibility, visit the [menu accessibility](/components/menus/menu/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/modal/modal.md b/packages/documentation-site/patternfly-docs/content/components/modal/modal.md index dab74b4611..ddc361e160 100644 --- a/packages/documentation-site/patternfly-docs/content/components/modal/modal.md +++ b/packages/documentation-site/patternfly-docs/content/components/modal/modal.md @@ -194,3 +194,6 @@ Icons are optional in modal dialogs. Use or omit them as your use case requires. | | **Warning:** Cautions or warns the user of a permanent action, or that information will be deleted upon action completion | Add to confirmation dialogs or passive dialogs to indicate a higher level of urgency and importance.| | | **Critical Warning:** Indicates that an error has occured | Add to error dialogs. | | | **Acknowledgement:** Informs the user of an action or result | Add to confirmation or passive dialogs to indicate a lower level of urgency. | + +## Accessibility +For information regarding accessibility, visit the [modal accessibility](/components/modal/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/navigation/navigation.md b/packages/documentation-site/patternfly-docs/content/components/navigation/navigation.md index 53d229d69d..0776ae8bc5 100644 --- a/packages/documentation-site/patternfly-docs/content/components/navigation/navigation.md +++ b/packages/documentation-site/patternfly-docs/content/components/navigation/navigation.md @@ -171,4 +171,7 @@ Secondary horizontal navigation can also be used with primary horizontal navigat
![Example of horizontal primary and secondary navigation.](./img/nav-secondary-horizontal.svg) -
\ No newline at end of file + + +## Accessibility +For information regarding accessibility, visit the [navigation accessibility](/components/navigation/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/page/page.md b/packages/documentation-site/patternfly-docs/content/components/page/page.md index df545932c4..f21534bd73 100644 --- a/packages/documentation-site/patternfly-docs/content/components/page/page.md +++ b/packages/documentation-site/patternfly-docs/content/components/page/page.md @@ -40,3 +40,5 @@ PatternFly includes a flexible layout system for defining pages. Page layouts ar ### Page sections Page sections allow you to define areas on a page to group content. The header, body, and footer on a page are examples of page sections. Page sections have 24px padding on left and right edges or no padding to allow the contents to extend to the edge of a page. At screen sizes smaller than 1200px, the left/right padding is reduced to 16px to create a tighter layout. Page sections can also be made sticky such that they will remain visible at the top or bottom of the viewport when the page scrolls. This is useful for creating sticky headers, footers, or other elements. +## Accessibility +For information regarding accessibility, visit the [page accessibility](/components/page/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/progress/progress.md b/packages/documentation-site/patternfly-docs/content/components/progress/progress.md index 72ac184292..bde053421f 100644 --- a/packages/documentation-site/patternfly-docs/content/components/progress/progress.md +++ b/packages/documentation-site/patternfly-docs/content/components/progress/progress.md @@ -225,4 +225,7 @@ For **complete** statuses, write your progress bar title in past tense. Use this -Progress bars should only use content in their title and progress value. Never write additional content inside the progress track. \ No newline at end of file +Progress bars should only use content in their title and progress value. Never write additional content inside the progress track. + +## Accessibility +For information regarding accessibility, visit the [progress accessibility](/components/progress/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/radio/radio.md b/packages/documentation-site/patternfly-docs/content/components/radio/radio.md index 6d39eb259a..4de32a07b2 100644 --- a/packages/documentation-site/patternfly-docs/content/components/radio/radio.md +++ b/packages/documentation-site/patternfly-docs/content/components/radio/radio.md @@ -30,3 +30,6 @@ Radio buttons allow users to select **1 item** from a list of options. ### Labeling and alignment Radio button labels fall to the right of the radio button control. You can use headings to label a group of radio buttons. The placement of headings will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange radio buttons, see the [forms design guidelines](/components/forms/form/design-guidelines#data-input-arrangement). + +## Accessibility +For information regarding accessibility, visit the [radio accessibility](/components/forms/radio/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/sidebar/sidebar.md b/packages/documentation-site/patternfly-docs/content/components/sidebar/sidebar.md index 0c08180521..55cf30ddad 100644 --- a/packages/documentation-site/patternfly-docs/content/components/sidebar/sidebar.md +++ b/packages/documentation-site/patternfly-docs/content/components/sidebar/sidebar.md @@ -8,4 +8,7 @@ Sidebars orient a panel box and a content box on a page. The panel and content c Sidebars can contain jumplinks and vertical tabs that provide easy access to different sections within a panel. However, they are also frequently used for context-sensitive content, frequently changed properties, and information regarding functionality. -Sidebars can be sticky, so that they are constantly visible as a user scrolls through a page. They are also responsive, so the panel will display on top of content in mobile view, and beside the content in desktop view. \ No newline at end of file +Sidebars can be sticky, so that they are constantly visible as a user scrolls through a page. They are also responsive, so the panel will display on top of content in mobile view, and beside the content in desktop view. + +## Accessibility +For information regarding accessibility, visit the [sidebar accessibility](/components/sidebar/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/skip-to-content/skip-to-content.md b/packages/documentation-site/patternfly-docs/content/components/skip-to-content/skip-to-content.md deleted file mode 100644 index 73e950f684..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/skip-to-content/skip-to-content.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: Skip to content -section: components ---- - -## Accessibility -For information regarding accessibility, visit the [skip to content accessibility](/components/skip-to-content/accessibility) tab. diff --git a/packages/documentation-site/patternfly-docs/content/components/switch/switch.md b/packages/documentation-site/patternfly-docs/content/components/switch/switch.md index a8c7d0edd0..1fc9d30027 100644 --- a/packages/documentation-site/patternfly-docs/content/components/switch/switch.md +++ b/packages/documentation-site/patternfly-docs/content/components/switch/switch.md @@ -86,4 +86,7 @@ Do not use end-of-sentence punctuation, like question marks or exclamation point |Notifications| Turn off notifications.| ### Form field labels -For form-based switches, make sure that you follow our [form field guidelines](/components/forms/form/design-guidelines#content-considerations) to effectively pair a form field label with its related switch. \ No newline at end of file +For form-based switches, make sure that you follow our [form field guidelines](/components/forms/form/design-guidelines#content-considerations) to effectively pair a form field label with its related switch. + +## Accessibility +For information regarding accessibility, visit the [switch accessibility](/components/switch/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/tabs/tabs.md b/packages/documentation-site/patternfly-docs/content/components/tabs/tabs.md index bce97f811e..470d6610fd 100644 --- a/packages/documentation-site/patternfly-docs/content/components/tabs/tabs.md +++ b/packages/documentation-site/patternfly-docs/content/components/tabs/tabs.md @@ -89,4 +89,5 @@ Secondary tabs should also be used when tabs live within a component, or are in ![Example of secondary tabs used in a modal.](./img/tabs-modal.svg) - +## Accessibility +For information regarding accessibility, visit the [tabs accessibility](/components/tabs/accessibility) tab. \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/components/text-area/text-area.md b/packages/documentation-site/patternfly-docs/content/components/text-area/text-area.md deleted file mode 100644 index 22d3ec8c88..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/text-area/text-area.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -id: Text area -section: components -subsection: forms ---- - -Text areas are commonly used in [forms](/components/forms/form). diff --git a/packages/documentation-site/patternfly-docs/content/components/title/title.md b/packages/documentation-site/patternfly-docs/content/components/title/title.md deleted file mode 100644 index 1c7c805615..0000000000 --- a/packages/documentation-site/patternfly-docs/content/components/title/title.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -id: Title -section: components ---- - diff --git a/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md b/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md index 5bec0165cc..9adb0f9eb4 100644 --- a/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md +++ b/packages/documentation-site/patternfly-docs/content/components/tree-view/tree-view.md @@ -114,4 +114,7 @@ Compact tree view is useful when the nodes of a tree view contain more than one 1. **Guide:** Connected lines between nodes in a tree view. 2. **Row:** Content with one or multiple lines that can be formatted. -3. **Container:** Area that holds the content and visually distinguishes individual rows with a filled or transparent background. \ No newline at end of file +3. **Container:** Area that holds the content and visually distinguishes individual rows with a filled or transparent background. + +## Accessibility +For information regarding accessibility, visit the [tree view accessibility](/components/tree-view/accessibility) tab. \ No newline at end of file