Skip to content

Commit f87f252

Browse files
edonehoothatblindgeyedlabaj
authored
docs(release-highlights): A11y content updates. (#4826)
* docs(release-highlights): A11y content updates. * link update * Update a11y guidelines list * Apply suggestions from code review Co-authored-by: Eric Olkowski <[email protected]> * More updates from review --------- Co-authored-by: Eric Olkowski <[email protected]> Co-authored-by: Donald Labaj <[email protected]>
1 parent 3395902 commit f87f252

File tree

1 file changed

+21
-12
lines changed

1 file changed

+21
-12
lines changed

packages/documentation-site/patternfly-docs/content/get-started/release-highlights.md

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,26 @@ To provide more guidance around theming, we've also published [new theming docum
4949

5050
### System-wide accessibility enhancements
5151

52-
As part of our commitment to inclusive design, we've implemented numerous improvements in this release. You'll benefit from the following component enhancements automatically when you update:
53-
- **Clearer focus states for buttons:** The focus indicator for buttons is now easier to perceive for keyboard navigators.
54-
- **More reliable tooltips:** We resolved an issue where tooltips were not correctly associated with their trigger elements, improving the experience for screen reader users. This also benefits components that use tooltips, such as menus and dropdowns.
55-
- **Smoother keyboard navigation in data lists:** Triggering a kebab toggle within a data list item no longer accidentally selects the entire item, creating a more predictable experience.
56-
- **More accessible menus:** We fixed an issue that could create empty headings in React `<MenuGroups>`, improving the experience for screen reader users.
57-
- Now, a heading will only render when the `label` prop is passed in. Note that, in order to fix this bug, your markup will be automatically updated when you consume this release. While this shouldn't be disruptive, it's possible this could affect any tests that were based on your previous markup, so you should review accordingly.
58-
59-
We’ve also updated some of our documentation and examples to help you build more accessible products:
60-
- [**Skeleton:**](/components/skeleton/accessibility) We now recommend including visually hidden text that provides crucial context for screen reader users while content is still loading.
61-
- [**Jump links:**](/components/jump-links) Examples now include the expected ARIA attributes and unique naming for semantic elements.
62-
- [**Data list:**](/components/data-list/react-demos/basic/) We’ve added visually hidden text to icon-only labels to provide more meaning for screen reader users.
52+
In our commitment to inclusive design, we've implemented numerous accessibility improvements, including automatic component enhancements and new accessibility guidelines.
53+
54+
#### Component updates
55+
You get these improvements "for free" just by updating to the latest version of PatternFly:
56+
57+
- **Buttons:** Responding to a community request, the keyboard focus indicator is now thicker and more prominent, making it easier for users to locate the active element.
58+
- **Data lists:** Clicking an action menu toggle with a keyboard no longer automatically selects the first data list item and instead opens the action menu as expected, creating a more consistent and predictable experience. This was a bug fix for clickable implementations of our data list.
59+
- **Menus:** We fixed a bug where an empty heading could be rendered in React `<MenuGroups>`, causing confusion when navigating via screen readers. A heading will now only render when the `label` prop is passed in. This also helps avoid a potentially incorrect heading level hierarchy.
60+
- **Note:** While this is an automatic update, the change in markup could affect your tests. Please review them accordingly.
61+
- **Tooltips:** We fixed an issue that prevented tooltips from being announced by screen readers in certain scenarios, such as when using React refs to link a tooltip to its trigger. This ensures assistive technologies can find and read tooltip content regardless of how the tooltip is linked to is trigger. This fix also benefits other components using tooltips, like menus and dropdowns.
62+
63+
#### New guidelines
64+
65+
We’ve updated our documentation and examples with the following recommendations to help you build more accessible products:
66+
- [**Data list:**](/components/data-list/react-demos/basic/) We added guidance on adding visually hidden text to icon-only labels to clarify what the accompanying numbers represent (for example, "5 alerts"). This ensures a clear, accessible name for screen reader users where the purpose of the number was previously ambiguous.
67+
- [**Jump links:**](/components/jump-links/accessibility) We updated our guidance to help you create a more predictable and less ambiguous experience for screen reader users. We also made updates to our examples and demos to align with this guidance. New guidance clarifies how to:
68+
- Correctly announce whether expandable sections are open or closed using `aria-expanded`, which must always be present on content that can trigger expansion.
69+
- Avoid using a redundant `aria-label` when an expandable jump links toggle contained visible text.
70+
- Provide unique, descriptive names to help users differentiate between multiple jump link components on the same page and make it easier to understand the context of each jump link when using keyboard/rotor menu shortcuts with assistive tech.
71+
- [**Skeleton:**](/components/skeleton/accessibility) Our guidelines now recommend including visually hidden text. This provides crucial context for screen reader users while content is loading and assures them that they haven't landed on a blank or broken page.
6372

6473
### Community-driven ChatBot enhancements
6574
Based on feedback from usability workshops and our community, we've made significant enhancements to the ChatBot extension to improve usability and address user needs:
@@ -745,4 +754,4 @@ In order to support PatternFly 6, and any future visual theming capabilities, we
745754
746755
Our tokens cover both dark and light themes, and make it easier to support both in your product. We also updated our [dark theme handbook](/design-foundations/theming/dark-theme-handbook) to align with our tokens.
747756
748-
**Note:*- The PatternFly 5 design library is not built with tokens. To take advantage of our token system, you must [upgrade your product to PatternFly 6](/get-started/upgrade).
757+
**Note:*- The PatternFly 5 design library is not built with tokens. To take advantage of our token system, you must [upgrade your product to PatternFly 6](/get-started/upgrade).

0 commit comments

Comments
 (0)