From db3b378be0a1c61de61d80eb0d365a108c307f84 Mon Sep 17 00:00:00 2001 From: Nicole Thoen Date: Mon, 23 Oct 2023 13:41:32 -0400 Subject: [PATCH 01/33] Update broken links on menu accessibility docs --- .../patternfly-docs/content/accessibility/menu/menu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/menu/menu.md b/packages/documentation-site/patternfly-docs/content/accessibility/menu/menu.md index 55172cdde6..f58282683f 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/menu/menu.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/menu/menu.md @@ -10,7 +10,7 @@ import { Checkbox, List, ListItem } from '@patternfly/react-core'; ## Accessibility To implement an accessible PatternFly **menu** component: -- Due to the composable nature of the menu component, keyboard interaction will need to be added manually between the menu toggle and the menu. See the [composable menu demos](https://www.patternfly.org/v4/demos/composable-menu) to see how this is done. +- Due to the composable nature of the menu component, keyboard interaction will need to be added manually between the menu toggle and the menu. See the [custom menu demos](https://www.patternfly.org/components/menus/custom-menus) to see how this is done. - Any actions placed within a menu item will need an `aria-label` on the `MenuItemAction` to communicate to users what the action is. From 028ac09fd90e25eeec10fda23856f51f32bf5f7e Mon Sep 17 00:00:00 2001 From: Nicole Thoen Date: Mon, 23 Oct 2023 13:43:30 -0400 Subject: [PATCH 02/33] Update broken links on menu design guidelines --- .../content/design-guidelines/components/menu/menu.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/menu/menu.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/menu/menu.md index 68f5e94dd0..1a60b55fb9 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/menu/menu.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/menu/menu.md @@ -33,7 +33,7 @@ An action menu presents a list of actions or links. 4. **Descriptions (optional):** Descriptive text may be added below each menu item, but only when the menu item label itself may not be clear to all users. Keep descriptive text to two lines or less. ### Option select menus -Use an option select menu when you want to persist selected items. This is typically the case for select menus or settings menus that allow users to select between multiple options. See the [select](/components/select) and [options menu](/components/options-menu) components for more details. You may present single or multiple [groups of options](#grouped-menus) within the same menu. +Use an option select menu when you want to persist selected items. This is typically the case for select menus or settings menus that allow users to select between multiple options. See the [select](/components/menus/select) and [options menu](/components/menus/options-menu) components for more details. You may present single or multiple [groups of options](#grouped-menus) within the same menu. option select menus From 644cfaacb5959a5fc5ea6e3cac0ece843b6bd888 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Mon, 23 Oct 2023 17:56:01 +0000 Subject: [PATCH 03/33] chore(release): releasing packages [ci skip] - @patternfly/ast-helpers@1.2.22 - @patternfly/documentation-framework@5.2.22 --- packages/ast-helpers/CHANGELOG.md | 8 ++++++++ packages/ast-helpers/package.json | 2 +- packages/documentation-framework/CHANGELOG.md | 8 ++++++++ packages/documentation-framework/package.json | 4 ++-- 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/ast-helpers/CHANGELOG.md b/packages/ast-helpers/CHANGELOG.md index 0708062a6b..053c532f35 100644 --- a/packages/ast-helpers/CHANGELOG.md +++ b/packages/ast-helpers/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 1.2.22 (2023-10-23) + +**Note:** Version bump only for package @patternfly/ast-helpers + + + + + ## 1.2.21 (2023-10-23) **Note:** Version bump only for package @patternfly/ast-helpers diff --git a/packages/ast-helpers/package.json b/packages/ast-helpers/package.json index 2390573ad4..e423ae4517 100644 --- a/packages/ast-helpers/package.json +++ b/packages/ast-helpers/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/ast-helpers", "description": "Acorn AST helpers for working with live code", - "version": "1.2.21", + "version": "1.2.22", "author": "Red Hat", "license": "MIT", "publishConfig": { diff --git a/packages/documentation-framework/CHANGELOG.md b/packages/documentation-framework/CHANGELOG.md index d888b4d220..cb46a0cff8 100644 --- a/packages/documentation-framework/CHANGELOG.md +++ b/packages/documentation-framework/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.2.22 (2023-10-23) + +**Note:** Version bump only for package @patternfly/documentation-framework + + + + + ## 5.2.21 (2023-10-23) **Note:** Version bump only for package @patternfly/documentation-framework diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 3cf2e12aa9..dba761cad7 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/documentation-framework", "description": "A framework to build documentation for PatternFly.", - "version": "5.2.21", + "version": "5.2.22", "author": "Red Hat", "license": "MIT", "private": false, @@ -17,7 +17,7 @@ "@babel/plugin-transform-react-jsx": "7.17.12", "@babel/preset-env": "7.18.2", "@mdx-js/util": "1.6.16", - "@patternfly/ast-helpers": "^1.2.21", + "@patternfly/ast-helpers": "^1.2.22", "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9", "autoprefixer": "9.8.6", "babel-loader": "9.1.2", From 1d962fd4d5584098a83f8fa58598b8daa20abbf7 Mon Sep 17 00:00:00 2001 From: kuklas <78739379+kuklas@users.noreply.github.com> Date: Fri, 27 Oct 2023 14:57:43 +0200 Subject: [PATCH 04/33] Removing the redudancy in the file. Use is described above the text. (#3790) --- .../design-guidelines/components/select/select.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/select/select.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/select/select.md index d8aef119f1..d74951e689 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/select/select.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/select/select.md @@ -53,15 +53,6 @@ Multiple select lists allow users to select one or more options from a list, wit Example of multiple select list -### When to use checkbox select versus multiple select -Both the checkbox select and multiple select lists allow users to select multiple options from a list. However, there are some points to take into consideration when deciding which one to use. - - -Example for using a checkbox select - - -Example for using a multiple select inside a form - ## Variations ### Select list with typeahead From 7974a9897cf4e4cdd9264d2a0416015869e6b1ff Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Fri, 27 Oct 2023 13:11:01 +0000 Subject: [PATCH 05/33] chore(release): releasing packages [ci skip] - @patternfly/ast-helpers@1.2.23 - @patternfly/documentation-framework@5.2.23 --- packages/ast-helpers/CHANGELOG.md | 8 ++++++++ packages/ast-helpers/package.json | 2 +- packages/documentation-framework/CHANGELOG.md | 8 ++++++++ packages/documentation-framework/package.json | 4 ++-- 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/ast-helpers/CHANGELOG.md b/packages/ast-helpers/CHANGELOG.md index 053c532f35..c47e54da38 100644 --- a/packages/ast-helpers/CHANGELOG.md +++ b/packages/ast-helpers/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 1.2.23 (2023-10-27) + +**Note:** Version bump only for package @patternfly/ast-helpers + + + + + ## 1.2.22 (2023-10-23) **Note:** Version bump only for package @patternfly/ast-helpers diff --git a/packages/ast-helpers/package.json b/packages/ast-helpers/package.json index e423ae4517..faef70300d 100644 --- a/packages/ast-helpers/package.json +++ b/packages/ast-helpers/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/ast-helpers", "description": "Acorn AST helpers for working with live code", - "version": "1.2.22", + "version": "1.2.23", "author": "Red Hat", "license": "MIT", "publishConfig": { diff --git a/packages/documentation-framework/CHANGELOG.md b/packages/documentation-framework/CHANGELOG.md index cb46a0cff8..8dade3b364 100644 --- a/packages/documentation-framework/CHANGELOG.md +++ b/packages/documentation-framework/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.2.23 (2023-10-27) + +**Note:** Version bump only for package @patternfly/documentation-framework + + + + + ## 5.2.22 (2023-10-23) **Note:** Version bump only for package @patternfly/documentation-framework diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index dba761cad7..9631d46cd5 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/documentation-framework", "description": "A framework to build documentation for PatternFly.", - "version": "5.2.22", + "version": "5.2.23", "author": "Red Hat", "license": "MIT", "private": false, @@ -17,7 +17,7 @@ "@babel/plugin-transform-react-jsx": "7.17.12", "@babel/preset-env": "7.18.2", "@mdx-js/util": "1.6.16", - "@patternfly/ast-helpers": "^1.2.22", + "@patternfly/ast-helpers": "^1.2.23", "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9", "autoprefixer": "9.8.6", "babel-loader": "9.1.2", From 41854779830331045c075a80dd7a17d81c726537 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 27 Oct 2023 10:49:09 -0400 Subject: [PATCH 06/33] docs(design-guidelines) Updates content for consistency. (#3782) * docs(design-guidelines) Updates content for consistency. * Updates from review. --- .../components/data-list/data-list.md | 2 +- .../components/divider/divider.md | 12 ++-- .../file-upload-multiple.md | 4 +- .../components/form/forms.md | 72 +++++++++---------- .../components/overflow-menu/overflow-menu.md | 2 +- .../components/popover/popover.md | 16 ++--- .../components/truncate/truncate.md | 10 ++- 7 files changed, 62 insertions(+), 56 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/data-list.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/data-list.md index f850cab5fc..5fdfc26c84 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/data-list.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/data-list/data-list.md @@ -82,7 +82,7 @@ The clickable data list can be used when data lists need to provide additional i 1. **Row:** Enables the user to click on the row to trigger the action of opening a primary-detail drawer 2. **Primary-detail:** Additional drawer of information that allows the user to still see the data list -### When to use +#### When to use * **Use a clickable data list** when you need to allow the user to trigger an action of opening a primary-detail drawer to view more information * **Don't use a clickable data list** when users don't need to see more information in addition to the data list information diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/divider/divider.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/divider/divider.md index 976617f597..f642fde78b 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/divider/divider.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/divider/divider.md @@ -6,14 +6,16 @@ section: components ## Usage Use a divider as a visual cue to help to convey content separations and groupings. +A divider can be used to visually separate content sections, potentially spanning the entire width of the content area. + +Example of divider used to seperate a content area into different parts + +## Variations + A **vertical divider** can be used to separate items within a horizontal list, such as a menu or toolbar. Example of vertical divider in use to seperate actions A **horizontal divider** can be used to separate items within a vertical list, such as a dropdown menu. -Example of horizontal divider in use to options in dropdown menu - -A divider can also be used to visually separate content sections, potentially spanning the entire width of the content area. - -Example of divider used to seperate a content area into different parts +Example of horizontal divider in use to options in dropdown menu \ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md index 5b5ba2a250..a5aad56216 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md @@ -27,9 +27,9 @@ Most multiple file upload components contain 5 basic elements: 5. **Progress upload:** The name of the uploaded file, along with file size, progress bar, and percentage. -## Usage/Best practices +## Usage -**When to use:** +### When to use * Uploading 1 or more files. * Uploading files by dragging and dropping. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md index 91d3c78349..b243393b74 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/form/forms.md @@ -113,42 +113,6 @@ Form submit buttons should be disabled until a user starts filling out the form * For a processing form, use feedback messages and progress indicators like spinners or progress bars if the processing time might exceed user expectations. -## Variations - -### Form sections - -Form sections sort form fields into non-hierarchical groups based on common information type, step, or visual preference. Form sections are ideal for breaking long forms into simple, evenly spaced segments with all information exposed. - -Default to grouping data with form sections, especially if all form fields are required. If you need to visualize complex or nested information, use [field groups](#field-groups) instead. - -To distinguish between form sections, title them based on the reason you grouped their inputs together. You may forego form section titles and solely rely on the added spacing between sections, but don't leave section titles blank if that empty space will confuse your users. If you do decide to forego the form section titles, add an `aria-label` to indicate why you're sectioning each set of form fields together. - -Example of form sections used to separate out a form. - -To view an interactive example of form sections, see our [form sections demo](/components/forms/form). - -### Field groups - -Field groups sort form fields into hierarchical, collapsible groups based on theme. All field groups are nested and indented by default, so they create a clearer information architecture between groups. Since all elements won't be visible at all times, always title field groups based on their purpose. Field groups are ideal for building a more dimensional form structure or condensing lengthy forms into digestible, expandable segments. - -PatternFly field groups support a required title, description, and actions. - -Use field groups to: - -- Group form fields in a more complex way. -- Reduce information overload. -- Hide unrequired fields. -- Use multiple instances of the same element without causing visual confusion. -- Designate an area to configure advanced options. - -Because field groups call for more clicks, tabs, and interactions to reach form fields, they require additional accessibility considerations. Clearly label field group content so that it's clear to all users. For more field group accessibility guidance, see the [Accessibility guidelines](#accessibility). - -**Example:** For a form with multiple field groups, distinguish between each one by adding titles that convey each group's unique theme such as *Routing*, *Build configuration*, *Deployment*, or *Scaling*. - -Example of nested, expandable field groups in a form. - -To view an interactive example of field groups, see our [field groups demo](/components/form#field-groups). - ## Usage Due to their interactive nature, forms often include features that help communicate field importance and guidance as users complete them. @@ -278,6 +242,42 @@ For validation on submission, supplement field level errors with an [inline aler Learn more about writing error messages in the [content](#content-considerations) section. +## Variations + +### Form sections + +Form sections sort form fields into non-hierarchical groups based on common information type, step, or visual preference. Form sections are ideal for breaking long forms into simple, evenly spaced segments with all information exposed. + +Default to grouping data with form sections, especially if all form fields are required. If you need to visualize complex or nested information, use [field groups](#field-groups) instead. + +To distinguish between form sections, title them based on the reason you grouped their inputs together. You may forego form section titles and solely rely on the added spacing between sections, but don't leave section titles blank if that empty space will confuse your users. If you do decide to forego the form section titles, add an `aria-label` to indicate why you're sectioning each set of form fields together. + +Example of form sections used to separate out a form. + +To view an interactive example of form sections, see our [form sections demo](/components/forms/form). + +### Field groups + +Field groups sort form fields into hierarchical, collapsible groups based on theme. All field groups are nested and indented by default, so they create a clearer information architecture between groups. Since all elements won't be visible at all times, always title field groups based on their purpose. Field groups are ideal for building a more dimensional form structure or condensing lengthy forms into digestible, expandable segments. + +PatternFly field groups support a required title, description, and actions. + +Use field groups to: + +- Group form fields in a more complex way. +- Reduce information overload. +- Hide unrequired fields. +- Use multiple instances of the same element without causing visual confusion. +- Designate an area to configure advanced options. + +Because field groups call for more clicks, tabs, and interactions to reach form fields, they require additional accessibility considerations. Clearly label field group content so that it's clear to all users. For more field group accessibility guidance, see the [Accessibility guidelines](#accessibility). + +**Example:** For a form with multiple field groups, distinguish between each one by adding titles that convey each group's unique theme such as *Routing*, *Build configuration*, *Deployment*, or *Scaling*. + +Example of nested, expandable field groups in a form. + +To view an interactive example of field groups, see our [field groups demo](/components/form#field-groups). + ## Spacing Forms may be placed in several contexts including on a page, in a wizard, or in a modal. Your chosen form placement may impact specific spacing considerations, but general form spacing requirements apply across these contexts. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md index 9dc640bd1f..1da241d7a5 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/overflow-menu/overflow-menu.md @@ -27,7 +27,7 @@ Use an overflow menu when additional options are available to the user but there ## Behavior Overflow menus are represented by a kebab button, as the user clicks on the kebab, a horizontal list will appear with additional options to click. -## Content Guidelines +## Content considerations * Text should be short and direct so users can quickly scan and decide on an action. * Text should be written in sentence case. * Overflow menus should be placed on the right side of the container. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md index 1eace408bc..f1f4688846 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/popover/popover.md @@ -39,6 +39,14 @@ Both [tooltips](/components/tooltip/design-guidelines) and popovers provide more For information on other forms of on-screen help, see [Tooltip](/components/tooltip/design-guidelines) and [Hint](/components/hint/design-guidelines). +## Behavior +Popovers are triggered when a user clicks on the popover icon and are dismissed in one of the following ways: +- The user clicks the exit icon. +- The user clicks anywhere on the screen outside the popover. +- The user clicks an action button inside the popover. (Note: This won't always close the popover; it depends on the action button.) + +popover example with placeholder text for the title and informational text + ## Variations ### Default popovers @@ -49,14 +57,6 @@ These popover are similar to default popovers, the key difference being the incl alert popover examples with placeholder text for the title and informational text - ## Behavior -Popovers are triggered when a user clicks on the popover icon and are dismissed in one of the following ways: -- The user clicks the exit icon. -- The user clicks anywhere on the screen outside the popover. -- The user clicks an action button inside the popover. (Note: This won't always close the popover; it depends on the action button.) - -popover example with placeholder text for the title and informational text - ## Content considerations - Popover copy is longer than tooltip copy, but it should still be concise. Aim for 1–3 sentences. - Write in full sentences with punctuation. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/truncate.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/truncate.md index 5e3b3b1233..b5b2d1329d 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/truncate.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/truncate/truncate.md @@ -31,15 +31,19 @@ Truncated items are indicated by an ellipsis (...) and are used when trying to a A truncate indicates that the text string has been shortened, when the user hovers a mouse over the ellipsis, the full text will be displayed as a tooltip. ## Variations -* **Front-line**: Used at the beginning of a text string to indicate the text is being continued from a previous location. + +### Front-line +A front-line truncate is used at the beginning of a text string to indicate the text is being continued from a previous location. image showing table truncate -* **Mid-line**: Used to shorten a text string when the end of it can’t be truncated by an ellipsis. Also used when several text strings have the exact same middle characters, but the beginning and endings vary. +### Mid-line +A mid-line truncate is used to shorten a text string when the end of it can’t be truncated by an ellipsis. Also used when several text strings have the exact same middle characters, but the beginning and endings vary. image showing table truncate -* **End-line**: Used at the end of a text string to shorten the sequence and indicate that there is more content located elsewhere. +### End-line +An end-line truncate is used at the end of a text string to shorten the sequence and indicate that there is more content located elsewhere. image showing table truncate From 51b54c7d5904c5b03f4155ddbcfe3192364f0774 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Fri, 27 Oct 2023 15:04:30 +0000 Subject: [PATCH 07/33] chore(release): releasing packages [ci skip] - @patternfly/ast-helpers@1.2.24 - @patternfly/documentation-framework@5.2.24 --- packages/ast-helpers/CHANGELOG.md | 8 ++++++++ packages/ast-helpers/package.json | 2 +- packages/documentation-framework/CHANGELOG.md | 8 ++++++++ packages/documentation-framework/package.json | 4 ++-- 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/ast-helpers/CHANGELOG.md b/packages/ast-helpers/CHANGELOG.md index c47e54da38..38a4933779 100644 --- a/packages/ast-helpers/CHANGELOG.md +++ b/packages/ast-helpers/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 1.2.24 (2023-10-27) + +**Note:** Version bump only for package @patternfly/ast-helpers + + + + + ## 1.2.23 (2023-10-27) **Note:** Version bump only for package @patternfly/ast-helpers diff --git a/packages/ast-helpers/package.json b/packages/ast-helpers/package.json index faef70300d..0049b38e39 100644 --- a/packages/ast-helpers/package.json +++ b/packages/ast-helpers/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/ast-helpers", "description": "Acorn AST helpers for working with live code", - "version": "1.2.23", + "version": "1.2.24", "author": "Red Hat", "license": "MIT", "publishConfig": { diff --git a/packages/documentation-framework/CHANGELOG.md b/packages/documentation-framework/CHANGELOG.md index 8dade3b364..dd5e9855ef 100644 --- a/packages/documentation-framework/CHANGELOG.md +++ b/packages/documentation-framework/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.2.24 (2023-10-27) + +**Note:** Version bump only for package @patternfly/documentation-framework + + + + + ## 5.2.23 (2023-10-27) **Note:** Version bump only for package @patternfly/documentation-framework diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 9631d46cd5..35651c5c17 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/documentation-framework", "description": "A framework to build documentation for PatternFly.", - "version": "5.2.23", + "version": "5.2.24", "author": "Red Hat", "license": "MIT", "private": false, @@ -17,7 +17,7 @@ "@babel/plugin-transform-react-jsx": "7.17.12", "@babel/preset-env": "7.18.2", "@mdx-js/util": "1.6.16", - "@patternfly/ast-helpers": "^1.2.23", + "@patternfly/ast-helpers": "^1.2.24", "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9", "autoprefixer": "9.8.6", "babel-loader": "9.1.2", From 3ae4a01e59b84c3dd2420c77b3fde2f7e6eab638 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Fri, 27 Oct 2023 14:16:33 -0400 Subject: [PATCH 08/33] chore(docs-framework): add class on example load (#3789) * chore(docs-framework): add class on example load * chore(example): remove dev mode check from page loaded class addition * chore(example): refactor to add class on page load event --- .../documentation-framework/components/example/example.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index d8cd358f35..7ca98d7ada 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -98,6 +98,10 @@ export const Example = ({ }) => { if (isFullscreenPreview) { isFullscreen = false; + window.addEventListener('load', () => { + //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded + document.body.classList.add('page-loaded'); + }); } if (!lang) { // Inline code From f0043320748955b10d3afe04afacae0988c77d9b Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Fri, 27 Oct 2023 18:31:39 +0000 Subject: [PATCH 09/33] chore(release): releasing packages [ci skip] - @patternfly/ast-helpers@1.2.25 - @patternfly/documentation-framework@5.2.25 --- packages/ast-helpers/CHANGELOG.md | 8 ++++++++ packages/ast-helpers/package.json | 2 +- packages/documentation-framework/CHANGELOG.md | 8 ++++++++ packages/documentation-framework/package.json | 4 ++-- 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/ast-helpers/CHANGELOG.md b/packages/ast-helpers/CHANGELOG.md index 38a4933779..48b1521ca6 100644 --- a/packages/ast-helpers/CHANGELOG.md +++ b/packages/ast-helpers/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 1.2.25 (2023-10-27) + +**Note:** Version bump only for package @patternfly/ast-helpers + + + + + ## 1.2.24 (2023-10-27) **Note:** Version bump only for package @patternfly/ast-helpers diff --git a/packages/ast-helpers/package.json b/packages/ast-helpers/package.json index 0049b38e39..e607118970 100644 --- a/packages/ast-helpers/package.json +++ b/packages/ast-helpers/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/ast-helpers", "description": "Acorn AST helpers for working with live code", - "version": "1.2.24", + "version": "1.2.25", "author": "Red Hat", "license": "MIT", "publishConfig": { diff --git a/packages/documentation-framework/CHANGELOG.md b/packages/documentation-framework/CHANGELOG.md index dd5e9855ef..329f0edac2 100644 --- a/packages/documentation-framework/CHANGELOG.md +++ b/packages/documentation-framework/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.2.25 (2023-10-27) + +**Note:** Version bump only for package @patternfly/documentation-framework + + + + + ## 5.2.24 (2023-10-27) **Note:** Version bump only for package @patternfly/documentation-framework diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 35651c5c17..771f5a5e5d 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/documentation-framework", "description": "A framework to build documentation for PatternFly.", - "version": "5.2.24", + "version": "5.2.25", "author": "Red Hat", "license": "MIT", "private": false, @@ -17,7 +17,7 @@ "@babel/plugin-transform-react-jsx": "7.17.12", "@babel/preset-env": "7.18.2", "@mdx-js/util": "1.6.16", - "@patternfly/ast-helpers": "^1.2.24", + "@patternfly/ast-helpers": "^1.2.25", "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9", "autoprefixer": "9.8.6", "babel-loader": "9.1.2", From 7fb4e9522c4c43e27f6effd05ce0198191ea0180 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 30 Oct 2023 12:10:05 -0400 Subject: [PATCH 10/33] docs(terminology): Updates n/a and -- descriptions for clarity. (#3783) * docs(terminology): Updates n/a and -- descriptions for clarity. * Update packages/documentation-site/patternfly-docs/content/design-guidelines/content/terminology.md * Update packages/documentation-site/patternfly-docs/content/design-guidelines/content/terminology.md --- .../content/design-guidelines/content/terminology.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/terminology.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/terminology.md index de1e8d13ba..b10413306b 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/terminology.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/terminology.md @@ -76,7 +76,7 @@ Use abbreviations that users are familiar with, and write out uncommon abbreviat | **U.S.** | As a noun, use *United States* unless there are space constraints. As an adjective, use *U.S.* (for example, *U.S. soldier*). As part of an organization, use *U.S.*

Taken from Red Hat Corporate Style Guide. | | **URL** | Stands for *Uniform Resource Locator*. Write *URL* in all caps. | | **VM** | Refers to a virtual machine. OK to abbreviate as long as you've spelled it out once in the first occurrence and as long as *VM* won't be confused with other terms that share that acronym.

Taken from Red Hat Corporate Style Guide. | -| **N/A** | Refers to *data not applicable*, meaning data does not currently apply to the object and will not populate.

This includes scenarios where there is no matching data in the object's data source. For example, when nothing matches a filter, when the data source is empty, or when the object is not connected to any data source.| -| **--** | Refers to *data not available*, meaning data could apply to the object, but is currently not populating.

This includes scenarios where the object is connected to a data source, but is not able to fetch data. For example, when there are permission restrictions or errors.| +| **N/A** | Refers to *data not applicable*, meaning there is no relevant, matching, or applicable data.

For example, when a filter returns no results, when a data source is empty, or when no data source is connected.| +| **--** | Refers to *data unavailable*, meaning the data exists and fits the criteria, but is not currently available to display.

For example, when a data source is connected, but data can't be fetched due to permission restrictions or errors.| \ No newline at end of file From 7eb15ac41be70c983a914eaed7805d9b2dd08870 Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Mon, 30 Oct 2023 16:23:59 +0000 Subject: [PATCH 11/33] chore(release): releasing packages [ci skip] - @patternfly/ast-helpers@1.2.26 - @patternfly/documentation-framework@5.2.26 --- packages/ast-helpers/CHANGELOG.md | 8 ++++++++ packages/ast-helpers/package.json | 2 +- packages/documentation-framework/CHANGELOG.md | 8 ++++++++ packages/documentation-framework/package.json | 4 ++-- 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/ast-helpers/CHANGELOG.md b/packages/ast-helpers/CHANGELOG.md index 48b1521ca6..cf0f940323 100644 --- a/packages/ast-helpers/CHANGELOG.md +++ b/packages/ast-helpers/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 1.2.26 (2023-10-30) + +**Note:** Version bump only for package @patternfly/ast-helpers + + + + + ## 1.2.25 (2023-10-27) **Note:** Version bump only for package @patternfly/ast-helpers diff --git a/packages/ast-helpers/package.json b/packages/ast-helpers/package.json index e607118970..967d49abaa 100644 --- a/packages/ast-helpers/package.json +++ b/packages/ast-helpers/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/ast-helpers", "description": "Acorn AST helpers for working with live code", - "version": "1.2.25", + "version": "1.2.26", "author": "Red Hat", "license": "MIT", "publishConfig": { diff --git a/packages/documentation-framework/CHANGELOG.md b/packages/documentation-framework/CHANGELOG.md index 329f0edac2..172cf7e9ec 100644 --- a/packages/documentation-framework/CHANGELOG.md +++ b/packages/documentation-framework/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.2.26 (2023-10-30) + +**Note:** Version bump only for package @patternfly/documentation-framework + + + + + ## 5.2.25 (2023-10-27) **Note:** Version bump only for package @patternfly/documentation-framework diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 771f5a5e5d..173112797d 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/documentation-framework", "description": "A framework to build documentation for PatternFly.", - "version": "5.2.25", + "version": "5.2.26", "author": "Red Hat", "license": "MIT", "private": false, @@ -17,7 +17,7 @@ "@babel/plugin-transform-react-jsx": "7.17.12", "@babel/preset-env": "7.18.2", "@mdx-js/util": "1.6.16", - "@patternfly/ast-helpers": "^1.2.25", + "@patternfly/ast-helpers": "^1.2.26", "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9", "autoprefixer": "9.8.6", "babel-loader": "9.1.2", From 0bf3c62484bc288386a9620fcb89c38da5d260af Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Wed, 1 Nov 2023 10:42:38 -0400 Subject: [PATCH 12/33] feat(dark-theme): replace dark theme switcher with toggle group (#3788) --- .../layouts/sideNavLayout/sideNavLayout.css | 6 ++++++ .../layouts/sideNavLayout/sideNavLayout.js | 20 ++++++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css index cc05b08a7e..870b7e4e9a 100644 --- a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css +++ b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css @@ -42,3 +42,9 @@ --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100); --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--100); } + +.ws-masthead .pf-v5-c-toggle-group { + --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-400); + --pf-v5-c-toggle-group__button--focus--BackgroundColor: transparent; + --pf-v5-c-toggle-group__button--hover--BackgroundColor: transparent; +} diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js index 6e3ba5a26a..068c62ac52 100644 --- a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js +++ b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js @@ -10,6 +10,7 @@ import { DropdownGroup, DropdownList, Divider, + Icon, Masthead, MastheadToggle, MastheadMain, @@ -23,10 +24,14 @@ import { ToolbarItem, SkipToContent, Switch, - SearchInput + SearchInput, + ToggleGroup, + ToggleGroupItem } from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon'; +import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon'; +import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon'; import { SideNav, TopNav, GdprBanner } from '../../components'; import staticVersions from '../../versions.json'; import v5Logo from '../PF-HorizontalLogo-Reverse.svg'; @@ -50,6 +55,7 @@ const HeaderTools = ({ const [isDropdownOpen, setDropdownOpen] = useState(false); const [searchValue, setSearchValue] = React.useState(''); const [isSearchExpanded, setIsSearchExpanded] = React.useState(false); + const [isDarkTheme, setIsDarkTheme] = React.useState(false); const getDropdownItem = (version, isLatest = false) => ( @@ -65,6 +71,12 @@ const HeaderTools = ({ setIsSearchExpanded(!isSearchExpanded); }; + const toggleDarkTheme = (_evt, selected) => { + const darkThemeToggleClicked = !selected === isDarkTheme + document.querySelector('html').classList.toggle('pf-v5-theme-dark', darkThemeToggleClicked); + setIsDarkTheme(darkThemeToggleClicked); + }; + useEffect(() => { // reattach algolia to input each time search is expanded if (hasSearch && isSearchExpanded) { @@ -86,8 +98,10 @@ const HeaderTools = ({ > {hasDarkThemeSwitcher && ( - - document.querySelector('html').classList.toggle('pf-v5-theme-dark')} /> + + } isSelected={!isDarkTheme} onChange={toggleDarkTheme} /> + } isSelected={isDarkTheme} onChange={toggleDarkTheme} /> + )} {hasRTLSwitcher && ( From b89e3eb6bca62036baf7b888218206ee691ca4cc Mon Sep 17 00:00:00 2001 From: patternfly-build Date: Wed, 1 Nov 2023 14:55:09 +0000 Subject: [PATCH 13/33] chore(release): releasing packages [ci skip] - @patternfly/ast-helpers@1.3.0 - @patternfly/documentation-framework@5.3.0 --- packages/ast-helpers/CHANGELOG.md | 11 +++++++++++ packages/ast-helpers/package.json | 2 +- packages/documentation-framework/CHANGELOG.md | 11 +++++++++++ packages/documentation-framework/package.json | 4 ++-- 4 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/ast-helpers/CHANGELOG.md b/packages/ast-helpers/CHANGELOG.md index cf0f940323..cfe2ef1144 100644 --- a/packages/ast-helpers/CHANGELOG.md +++ b/packages/ast-helpers/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 1.3.0 (2023-11-01) + + +### Features + +* **dark-theme:** replace dark theme switcher with toggle group ([#3788](https://github.com/patternfly/patternfly-org/issues/3788)) ([0bf3c62](https://github.com/patternfly/patternfly-org/commit/0bf3c62484bc288386a9620fcb89c38da5d260af)) + + + + + ## 1.2.26 (2023-10-30) **Note:** Version bump only for package @patternfly/ast-helpers diff --git a/packages/ast-helpers/package.json b/packages/ast-helpers/package.json index 967d49abaa..3f06725de4 100644 --- a/packages/ast-helpers/package.json +++ b/packages/ast-helpers/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/ast-helpers", "description": "Acorn AST helpers for working with live code", - "version": "1.2.26", + "version": "1.3.0", "author": "Red Hat", "license": "MIT", "publishConfig": { diff --git a/packages/documentation-framework/CHANGELOG.md b/packages/documentation-framework/CHANGELOG.md index 172cf7e9ec..2204f39fac 100644 --- a/packages/documentation-framework/CHANGELOG.md +++ b/packages/documentation-framework/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# 5.3.0 (2023-11-01) + + +### Features + +* **dark-theme:** replace dark theme switcher with toggle group ([#3788](https://github.com/patternfly/patternfly-org/issues/3788)) ([0bf3c62](https://github.com/patternfly/patternfly-org/commit/0bf3c62484bc288386a9620fcb89c38da5d260af)) + + + + + ## 5.2.26 (2023-10-30) **Note:** Version bump only for package @patternfly/documentation-framework diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 173112797d..add81797e3 100644 --- a/packages/documentation-framework/package.json +++ b/packages/documentation-framework/package.json @@ -1,7 +1,7 @@ { "name": "@patternfly/documentation-framework", "description": "A framework to build documentation for PatternFly.", - "version": "5.2.26", + "version": "5.3.0", "author": "Red Hat", "license": "MIT", "private": false, @@ -17,7 +17,7 @@ "@babel/plugin-transform-react-jsx": "7.17.12", "@babel/preset-env": "7.18.2", "@mdx-js/util": "1.6.16", - "@patternfly/ast-helpers": "^1.2.26", + "@patternfly/ast-helpers": "^1.3.0", "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9", "autoprefixer": "9.8.6", "babel-loader": "9.1.2", From f343c7cf56e9864067511145ea35ada02473d207 Mon Sep 17 00:00:00 2001 From: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com> Date: Tue, 7 Nov 2023 15:46:54 -0500 Subject: [PATCH 14/33] chore(JumpLinks): updated a11y docs to match template (#3808) --- .../accessibility/jump-links/jump-links.md | 94 ++++++++++++++----- 1 file changed, 72 insertions(+), 22 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/jump-links/jump-links.md b/packages/documentation-site/patternfly-docs/content/accessibility/jump-links/jump-links.md index cd8a09577a..31a0581ac0 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/jump-links/jump-links.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/jump-links/jump-links.md @@ -3,32 +3,82 @@ id: Jump links section: components --- -**Jump links** provide a way to navigate through section headings on a page without scrolling. +import { Checkbox, List, ListItem } from '@patternfly/react-core'; -For **Keyboard users** there are a number of considerations which must be made concerning tab order and focus management. -- Keyboard users should be able to navigate to and through the jump links using **Tab** and **Shift + Tab**. -- Keyboard users should also be able to select a jump link using **Enter**. -- The jump links should be before the associated sections in the DOM order so that the user can use the jump links to jump to the desired section. -- When a user selects a jump link, the browser focus should move into the associated section so that the navigable elements in that associated section -can be navigated to next without having to move focus through all the rest of the jump links and page. +## Accessibility -Additionally, it should be noted that jump links are often used on pages with so much content that the page scrolls. It should be true that -**Up** and **Down** arrow keys should be able to scroll the content. +To implement accessible PatternFly **jump links**: -**Screen reader users** should be made aware that the jump links are interactable when focused, and which jump link is currently active using -`aria-current="location"` on the active jump link. +- Provide a unique and descriptive `aria-label` to the jump links component. +- Ensure a jump link item has the `aria-current="location"` attribute when it is selected. +- Ensure that the jump links toggle has an `aria-expanded` attribute that matches its expanded state. For example, a collapsed jump links toggle should have `aria-expanded="false"`. +- Provide a unique and descriptive `aria-label` to the jump links toggle if the jump links component is expandable. +- Ensure each jump link item has descriptive text content that conveys what the user will be jumping to upon selecting it, such as a section heading. -The following props/attributes have been added for you or are customizable in PatternFly: +## Testing -| React component | React prop | Which HTML element it appears on in markup | Explanation | -|-----------------|-----------------|----------------------------------------------|---------------------------------------------------------------| -| JumpLinks | aria-label | nav.pf-v5-c-jump-links aria-label | Labels the nav to reflect the current nav description. | -| JumpLinks | toggleAriaLabel | .pf-v5-c-jump-links__toggle > button aria-label | Accessible label for the expandable jump links toggle button. | +At a minimum, jump links should meet the following criteria: -**Note:** Whenever multiple navigation elements are present on a page, an aria-label is highly recommended. Screen reader users -navigating a page via an elements list or rotor menu will be unable to distinguish between the various navigation elements. Using an aria-label -in these cases allows the user to differentiate between the navigation elements without navigating to and interacting with each one individually -to determine its contents. The following image demonstrates the lack of information when aria-labels are not present: + + + The jump links component has a unique and descriptive aria-label.} description="This helps users differentiate the jump links from other navigation elements on the page." /> + + + Once a jump link item has been selected, it has the aria-current="location" attribute.} description="This will announce to users navigating via assistive technologies such as a screen reader that a jump link item has already been jumped to when navigating through the list of jump link items." /> + + + If the jump links component is expandable, the jump links toggle can be collapsed or expanded via keyboard by pressing Space or Enter.} /> + + + If the jump links component is expandable, it has an aria-expanded attribute that matches its current expanded state.} /> + + + If the jump links component is expandable, the jump links toggle has a unique and descriptive aria-label.} /> + + + + + + Tab navigates to the next jump link item or focusable element, and Shift + Tab navigates to the previous jump link item or focusable element.} /> + + + Only Enter should select a jump link item since it is an anchor element.} /> + + -An example of a rotor menu interface which demonstrates that each navigation element is -indistinguishable from the others without aria-labels. \ No newline at end of file +## React customization + +The following React props have been provided for more fine-tuned control over accessibility. + +| Prop | Applied to | Reason | +|---|---|---| +| `aria-label="[text that labels the jump links navigation]"` | `JumpLinks` | Adds an accessible name to the jump links' `nav` element for assistive technologies. This should generally be descriptive and unique, especially if there are multiple `nav` elements on the page. | +| `isExpanded` | `JumpLinks` | Sets the default `aria-expanded` attribute. **Required** if the jump links component should be expanded by default. | +| `toggleAriaLabel="[text that labels the expandable toggle]"` | `JumpLinks` | Adds an accessible name to the expandable toggle for assistive technologies. **Required** when the jump links component is expandable. | +| `children` | `JumpLinksItem` | The content of the jump links item. This content should be descriptive in order to convey what a user will be jumping to upon selecting it. | +| `isActive` | `JumpLinksItem` | Sets the `aria-current="location"` attribute on the jump links item. **Required** when the jump links item has been selected. | + +## HTML/CSS customization + +The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility. + +| Attribute or class | Applied to | Reason | +|---|---|---| +| `aria-label="[text that labels the jump links navigation]"` | `.pf-v5-c-jump-links` | Adds an accessible name to the jump links' `nav` element for assistive technologies. This should generally be descriptive and unique, especially if there are multiple `nav` elements on the page. | +| `aria-expanded="[true or false]"` | `.pf-v5-c-jump-links__toggle > button` | Indicates whether the jump links toggle is expanded (true) or collapsed (false) to assistive technologies. **Required** when the jump links component is expandable. | +| `aria-label="[text that labels the expandable toggle]"` | `.pf-v5-c-jump-links__toggle > button` | Adds an accessible name to the expandable toggle for assistive technologies. **Required** when the jump links component is expandable. | +| `aria-hidden="true"` | `.pf-v5-c-jump-links__toggle-icon > i` | Removes the expandable toggle icon from the accessibility tree, preventing assistive technologies from potentially announcing duplicate or unnecessary information without visually hiding it. **Required**. | +| `role="list"` | `.pf-v5-c-jump-links__list` | Indicates that the jump links list is a list element. **Required**.

This role is redundant since `.pf-v5-c-jump-links__list` is a `