Good day! Accessibility time for the Search Field, Mobile Menu, Carousel Header, News & Stories Pages and the Cookies Notices. Planet 4 also upgraded to PHP 8.3, there are a couple of bug fixes and much more in this new Sprint Release. Let’s explore!
Features 🛠️
PLANET-8014 News & Stories page accessibility: move Featured News block and H1 heading into
[From v26.4] On the News & Stories page, the Featured News block and the page H1 were not inside the primary content landmark. Both are now contained within a single <main>, so landmark navigation works and skip links target the correct region.
PLANET-8128 Add Permissions-Policy header and a hook to override them
The header is set on the nginx configuration. However, this made it hard for NROs to override it, when needed. So, the Permissions-Policy header has been added to the theme, as part of the HttpHeaders class. A hook to override the header has been added as well (and is documented on Gitbook).
PLANET-8114 Upgrade to PHP 8.3
Upgrade time for PHP! Planet 4 now runs on PHP 8.3.
PLANET-8030 Search field accessibilty: make the text input the first focusable element (before the icon)
When navigating by keyboard, focus jumped to the search icon before the text input, making it not very accessible. This has changed, so that the search imput is now the first focusable element in the search control.
<input type="search">has been placed before any icon/button in the DOM.- The icon button has been moved to the other side of the search field.
PLANET-8026 Main navigation menu accessibility: move focus into the expanded menu on mobile and trap it until closed
On mobile, the toggle correctly announces that the navigation has expanded, but focus did not move into the opened menu. The user remained on the page behind the overlay and could not interact with the navigation.
This has been solved! Now, when the mobile menu opens, focus moves into it, and focus trap is applied.
PLANET-8001 Carousel header accessibility: wrap entire carousel in a labeled landmark
The Carousel header was not wrapped in a labeled landmark. Now, the entire carousel header has been wrapped in a landmark with a clear, unique accessible name: aria-label=“Greenpeace highlights“
PLANET-7978 Cookie notice accessibility: ensure focus is moved correctly for keyboard and screen reader users
The cookie notice did not receive focus when it appeared. Forcing users to navigate through all other focusable elements on the page before reaching it. Not ideal, so that has been changed! Now, the cookie notice is discoverable without tabbing the whole page.
Bug Fixes 🐞
PLANET-8123 Unable to remove certain blocks in the editor
- And now you can again!
PLANET-8142 Hydration errors in the Gallery block
- And that’s been fixed!
🤕 Don’t let bugs run free! Make sure to report them here.
