diff --git a/.github/workflows/extensions.yml b/.github/workflows/extensions.yml index 3a436d5cf2..5406caceb4 100644 --- a/.github/workflows/extensions.yml +++ b/.github/workflows/extensions.yml @@ -1,13 +1,12 @@ -name: Add relevant issues to extensions project board +name: Add new issues to project board on: issues: types: - - labeled + - opened jobs: add-to-extensions: - if: github.event.label.name == 'extension' name: Add issue to extensions board runs-on: ubuntu-latest steps: diff --git a/packages/ast-helpers/CHANGELOG.md b/packages/ast-helpers/CHANGELOG.md index 0708062a6b..528f89c0a9 100644 --- a/packages/ast-helpers/CHANGELOG.md +++ b/packages/ast-helpers/CHANGELOG.md @@ -3,6 +3,147 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 1.3.9 (2023-11-30) + +**Note:** Version bump only for package @patternfly/ast-helpers + + + + + +## 1.3.8 (2023-11-21) + + +### Bug Fixes + +* prepare org for component groups release ([#3822](https://github.com/patternfly/patternfly-org/issues/3822)) ([fe7af55](https://github.com/patternfly/patternfly-org/commit/fe7af55205f6df709afa0c499743ca7a1d2946a1)) + + + + + +## 1.3.7 (2023-11-17) + +**Note:** Version bump only for package @patternfly/ast-helpers + + + + + +## 1.3.6 (2023-11-14) + + +### Bug Fixes + +* add virtualized table to extensions staging ([#3819](https://github.com/patternfly/patternfly-org/issues/3819)) ([06e3fbc](https://github.com/patternfly/patternfly-org/commit/06e3fbcbf433969d5ac880d82597f1fb04e4bbf1)) + + + + + +## 1.3.5 (2023-11-13) + + +### Bug Fixes + +* **drag drop:** add drag drop to 5.1 versions.json ([#3817](https://github.com/patternfly/patternfly-org/issues/3817)) ([d2dec78](https://github.com/patternfly/patternfly-org/commit/d2dec78730dae818c4a2f5d6bab89d98de14e80d)) + + + + + +## 1.3.4 (2023-11-13) + + +### Bug Fixes + +* add charts dark theme stylesheet ([#3802](https://github.com/patternfly/patternfly-org/issues/3802)) ([03954ed](https://github.com/patternfly/patternfly-org/commit/03954edbf429d6e3a8e9d460c61b5ea9f6d441a6)) + + + + + +## 1.3.3 (2023-11-10) + +**Note:** Version bump only for package @patternfly/ast-helpers + + + + + +## 1.3.2 (2023-11-10) + + +### Bug Fixes + +* clean up versions and showdown deps ([#3816](https://github.com/patternfly/patternfly-org/issues/3816)) ([aae74d0](https://github.com/patternfly/patternfly-org/commit/aae74d0196d2205c2828ad831773c379a62e8bd8)) + + + + + +## 1.3.1 (2023-11-07) + + +### Bug Fixes + +* **react-drag-drop:** add react-drag-drop to latest version ([#3801](https://github.com/patternfly/patternfly-org/issues/3801)) ([bbf20d4](https://github.com/patternfly/patternfly-org/commit/bbf20d4406303441a534c5fc9bd4667f72e55850)) + + + + + +# 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 + + + + + +## 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 + + + + + +## 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 + + + + + ## 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..a45b9ed951 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.3.9", "author": "Red Hat", "license": "MIT", "publishConfig": { diff --git a/packages/documentation-framework/CHANGELOG.md b/packages/documentation-framework/CHANGELOG.md index d888b4d220..dd21481976 100644 --- a/packages/documentation-framework/CHANGELOG.md +++ b/packages/documentation-framework/CHANGELOG.md @@ -3,6 +3,147 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.3.9 (2023-11-30) + +**Note:** Version bump only for package @patternfly/documentation-framework + + + + + +## 5.3.8 (2023-11-21) + + +### Bug Fixes + +* prepare org for component groups release ([#3822](https://github.com/patternfly/patternfly-org/issues/3822)) ([fe7af55](https://github.com/patternfly/patternfly-org/commit/fe7af55205f6df709afa0c499743ca7a1d2946a1)) + + + + + +## 5.3.7 (2023-11-17) + +**Note:** Version bump only for package @patternfly/documentation-framework + + + + + +## 5.3.6 (2023-11-14) + + +### Bug Fixes + +* add virtualized table to extensions staging ([#3819](https://github.com/patternfly/patternfly-org/issues/3819)) ([06e3fbc](https://github.com/patternfly/patternfly-org/commit/06e3fbcbf433969d5ac880d82597f1fb04e4bbf1)) + + + + + +## 5.3.5 (2023-11-13) + + +### Bug Fixes + +* **drag drop:** add drag drop to 5.1 versions.json ([#3817](https://github.com/patternfly/patternfly-org/issues/3817)) ([d2dec78](https://github.com/patternfly/patternfly-org/commit/d2dec78730dae818c4a2f5d6bab89d98de14e80d)) + + + + + +## 5.3.4 (2023-11-13) + + +### Bug Fixes + +* add charts dark theme stylesheet ([#3802](https://github.com/patternfly/patternfly-org/issues/3802)) ([03954ed](https://github.com/patternfly/patternfly-org/commit/03954edbf429d6e3a8e9d460c61b5ea9f6d441a6)) + + + + + +## 5.3.3 (2023-11-10) + +**Note:** Version bump only for package @patternfly/documentation-framework + + + + + +## 5.3.2 (2023-11-10) + + +### Bug Fixes + +* clean up versions and showdown deps ([#3816](https://github.com/patternfly/patternfly-org/issues/3816)) ([aae74d0](https://github.com/patternfly/patternfly-org/commit/aae74d0196d2205c2828ad831773c379a62e8bd8)) + + + + + +## 5.3.1 (2023-11-07) + + +### Bug Fixes + +* **react-drag-drop:** add react-drag-drop to latest version ([#3801](https://github.com/patternfly/patternfly-org/issues/3801)) ([bbf20d4](https://github.com/patternfly/patternfly-org/commit/bbf20d4406303441a534c5fc9bd4667f72e55850)) + + + + + +# 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 + + + + + +## 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 + + + + + +## 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 + + + + + ## 5.2.21 (2023-10-23) **Note:** Version bump only for package @patternfly/documentation-framework 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 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 && ( diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json index 3cf2e12aa9..9433ed9c7c 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.3.9", "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.3.9", "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9", "autoprefixer": "9.8.6", "babel-loader": "9.1.2", diff --git a/packages/documentation-framework/versions.json b/packages/documentation-framework/versions.json index 87c9d3ae76..55c3dbb662 100644 --- a/packages/documentation-framework/versions.json +++ b/packages/documentation-framework/versions.json @@ -12,8 +12,10 @@ "@patternfly/react-icons": "5.1.1", "@patternfly/react-styles": "5.1.1", "@patternfly/react-table": "5.1.1", + "@patternfly/react-drag-drop": "5.0.0-alpha.0", "@patternfly/react-tokens": "5.1.1", "@patternfly/react-catalog-view-extension": "5.0.0", + "@patternfly/react-component-groups": "5.0.0", "@patternfly/react-console": "5.0.0", "@patternfly/react-log-viewer": "5.0.0", "@patternfly/react-topology": "5.1.0", @@ -33,6 +35,7 @@ "@patternfly/react-icons": "5.0.0", "@patternfly/react-styles": "5.0.0", "@patternfly/react-table": "5.0.0", + "@patternfly/react-drag-drop": "5.0.0-alpha.0", "@patternfly/react-tokens": "5.0.0", "@patternfly/react-catalog-view-extension": "5.0.0", "@patternfly/react-console": "5.0.0", diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index 5519aaec84..e7427fde35 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -18,16 +18,18 @@ }, "dependencies": { "@patternfly/documentation-framework": "^5.2.15", - "@patternfly/quickstarts": "^5.0.0", + "@patternfly/quickstarts": "^5.1.0", "@patternfly/react-catalog-view-extension": "5.0.0", "@patternfly/react-console": "5.0.0", "@patternfly/react-docs": "6.1.1", - "@patternfly/react-log-viewer": "5.0.0", - "@patternfly/react-topology": "5.1.0", + "@patternfly/react-log-viewer": "5.1.0-prerelease.1", + "@patternfly/react-topology": "5.2.0-prerelease.1", "@patternfly/react-user-feedback": "5.0.0", - "@patternfly/react-component-groups": "1.0.15", + "@patternfly/react-component-groups": "5.0.0", + "@patternfly/react-virtualized-extension": "5.0.0", "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "react-dom": "^17.0.0 || ^18.0.0", + "showdown": "^2.1.0" }, "devDependencies": { "@patternfly/patternfly-a11y": "4.3.1", diff --git a/packages/documentation-site/patternfly-docs/content/accessibility/about-modal/about-modal.md b/packages/documentation-site/patternfly-docs/content/accessibility/about-modal/about-modal.md index 76b85a325e..adb8b2d1c1 100644 --- a/packages/documentation-site/patternfly-docs/content/accessibility/about-modal/about-modal.md +++ b/packages/documentation-site/patternfly-docs/content/accessibility/about-modal/about-modal.md @@ -3,26 +3,82 @@ id: About modal section: components --- -An **about modal** displays information about an application like product version number(s), as well as any appropriate legal text. Like modal, this component is a secondary window that displays over the primary window to allow the user to maintain the context of a particular task. When the modal is displayed and active, the primary window is inert, so users cannot interact with content outside it. -**Keyboard and mouse users** shouldn’t be able to interact with the rest of the page outside of an open modal. Set the initial focus on the first focusable element in the modal. The user should be able to **Tab** to any interactive elements within the modal and use **Tab + Shift** to move backwards through interactive elements. Keyboard users should be able to leave the modal by pressing **Esc** and focus should return to the element that invoked the modal. +import { Checkbox, List, ListItem } from '@patternfly/react-core'; -**Screen reader users** shouldn’t be able to interact with the rest of the page outside an open modal. Add alternative text for any images or non-textual buttons (like icon buttons) . Images should use the alt attribute whereas `aria-label` is most common to label icon buttons. Write a clear headline that describes the modal, organize contents in logical DOM order, and be sure to follow [our modal content guidelines](https://www.patternfly.org/v4/components/modal/design-guidelines/) to clearly communicate information contained within it. +## Accessibility -
+To implement an accessible PatternFly **about modal**: -**To make About Modal accessible:** -- **If you use a brand image**, use the React prop `brandImageAlt` on the AboutModal component to give the brand image alternative text for assistive technology and low bandwidth users. This will look like `alt=”[title of image]”` in the HTML markup on the image with class .pf-v5-c-brand. -- **If you don’t use a title in your modal**, add an `aria-label` to give the modal an accessible name. It will look like `aria-label=”[title of modal]” on the AboutModal and will appear directly on the class .pf-v5-c-about-modal-box. +- Provide an `aria-label` to the about modal if there is no product name heading. +- Ensure any brand image has a valid `alt` attribute, either a string or an empty string `''`. +- Ensure the first focusable element or the about modal itself receives focus when it is opened. +- Ensure content behind the about modal cannot be interacted with or navigated to via mouse, keybaord, or other assistive technologies such as screen readers. +- Ensure the element that previously had focus before the about modal was opened receives focus upon closing the about modal. -
+## Testing -The following props can be added or are customizable in PatternFly: +At a minimum, an about modal should meet the following criteria: -| React component| React prop | Which HTML element it appears on in markup | Explanation | -|---|---|---|---| -| AboutModal | brandImageAlt | .pf-v5-c-about-modal-box__brand-image | The alternate text of the brand image | -| AboutModal | closeButtonAriaLabel | .pf-v5-c-modal-box__close .pf-v5-c-button | Provides an accessible name for the close button as it uses an icon instead of text. Default is “Close dialog”. Only used if you are customizing. | + + + An aria-label is passed if the about modal does not have a product name heading.} description="This gives the about modal an accessible name, providing context of its purpose or content to users." /> + + + If there is a brand image, it has a valid alt attribute.} description="If the image is purely decorative then an empty string should be passed as a value so that the image is not exposed to assistive technologies." /> + + + + + + + + + + + +## React customization +The following React props have been provided for more fine-tuned control over accessibility. +| Prop | Applied to | Reason | +|---|---|---| +| `brandImageAlt="[alt text of the brand image]"` | `AboutModal` | Adds alternative text for the brand image passed to `brandImageSrc`. Typically this should either be an empty string `''` if the brand image is purely decorative, or the product name. | +| `aria-label="[text that labels the about modal]"` | `AboutModal` | Adds an accessible name to the about modal. **Required** when the `productName` prop is not passed in, and typically will be the same as the product name. | +| `closeButtonAriaLabel="[text that labels the close button]"` | `AboutModal` | Adds an accessible name to the close button of the about modal. By default the value is "Close Dialog". | +| `disableFocusTrap` | `AboutModal` | Disables the focus trap of the about modal. **Read our [additional considerations](#additional-considerations) before passing this prop in.** | + +## 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 about modal]"` | `.pf-v5-c-modal-box` | Adds an accessible name to the about modal. **Required** when there is not visible product name heading. Typically the value passed in will be the product name itself. | +| `aria-labelledby="[id of the element that labels the about modal]"` | `.pf-v5-c-modal-box` | Adds an accessible name to the about modal. **Required** when there is a visible product name heading. | +| `role="dialog"` | `.pf-v5-c-modal-box` | Adds an accessibile role to the about modal. **Required**. | +| `aria-modal="true"` | `.pf-v5-c-modal-box` | Marks the dialog as a modal. **Required**. | +| `alt="[alt text of the brand image]"` | `.pf-v5-c-about-modal-box__brand-image` | Adds alternative text for the brand image. Typically this should either be an empty string `''` if the brand image is purely decorative, or the product name. | +| `aria-label="[text that labels the close button]"` | `.pf-v5-c-about-modal-box__close > .pf-v5-c-button` | Adds an accessible name to the close button of the about modal. | + +## Additional considerations + +Consumers must ensure they take any additional considerations when customizing an about modal, using it in a way not described or recommended by PatternFly, or in various other specific use-cases not outlined elsewhere on this page. + +### Focus trap and focus management + +When using the HTML implementation of the about modal, or when passing the `disableFocusTrap` prop in the React implementation, it is up to the consumer to ensure proper focus trapping and focus management is implemented, as outlined in the [accessibility](#accessibility) section. + +Without taking these considerations, it may make it more difficult for users to navigate or interact with the about modal, especially if it is appended towards the end of the document body. Issues can include, but aren't limited to: + +- Needing to navigate through large sections of the rest of the page before focus is finally placed within the about modal +- Being able to navigate outside of the about modal once reaching the end of its contents, which may be confusing for users +- Not having any visual indication what element is focused when the about modal is closed +- Needing to repeatedly navigate through the same content after closing the about modal just to get back to where focus was before it was opened + +## Further reading + +To read more about accessibility with about modals, refer to the following resources: + +- [ARIA Authoring Practices Guide - Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) 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 `