Well hello there! The Accessibility Audit is once again proven to be a great source of inspiration to optimize and improve on Planet 4. Navigation fixes and enhancements were made, a lot of screen reader improvements, Bluesky is here, bug fixes and a lot more. Here we go:
Features 🛠️
PLANET-7782 Add standalone link styles to comments
A link style has been applied to links within the comments section, and also to the “Reply” link itself.
- See it in action, here on Figma.
PLANET-7756 Navigation Menu: fix accessibility issues on mobile
More opportunities have been found through the Accessibility Audit to enhance the experience of the main navigation menu:
- Keyboard
- When the hamburger menu is open, the close button should be reachable by tabbing. The order should be after the Donate Button.
- No Keyboard Trap
- In this case, we do need a keyboard trap, in the hamburger menu, to avoid the tab navigation to other page content that is not currently being displayed in the screen.
- Focus Visible
- The focused state outline in the hamburger menu gets cut off
- Add a focus ring to the reset button of the search field
PLANET-7702 Add Actions List Block CTA text for Screen Reader
When using the screen reader on the Action List Block, the Call To Actions are often vague and unclear. “Learn More” just doesn’t say enough. To make this more accessible, a new field has been added. This field is an additional line of text, specifically for the screen-reader to read. Like this:
PLANET-7603 Add an option to Take Action boxout block backend to change the heading size
A setting has been added in the backend to change the title size of the Take Action boxout block, in case you have a specific case to do so. By default, the title size will be set to Heading M. See the full sizes here:
- Desktop XXL, XL, & L
- Heading S (18px/1.125rem)
- Heading M (20px/1.25rem – default)
- Heading L (22px/1.1375rem)
- Heading XL (28px/1.75rem)
- Mobile M & S:
- Heading S (16px/1rem)
- Heading M (18px/1.25rem – default)
- Heading L (20px/1.125rem)
- Heading XL (22px/1.375rem)
PLANET-7752 Table of Contents Block: Make linkable by default
From now on, the “Link” checkmark of the Table of Contents Block will be on by default. This will not affect previously placed Blocks.
PLANET-7749 Add Bluesky share button
Bluesky has been added to the Social Sharing Options. These are located at Planet 4 > Social > Social sharing options. Do keep in mind this are not enabled by default, so make sure to get in there and activate it.
PLANET-7716 Listing pages: make the layout toggle button operable by screen readers and keyboard
The toggle button that gets used to switch between List view and Grid view is now fully accessible and functional for screen reader users. The button is now available to be used on a keyboard (tab to navigate and enter/space to activate).
Bug Fixes 🐞
PLANET-7769 Page Header Block Pattern: white line appears on colored background header
- And that line has been removed!
PLANET-7738 Small design issues with the comments form
- And those have been fixed!
🤕 Don’t let bugs run free! Make sure to report them here.
Documentation Update 📚
The Handbook received a bit of Digital Cleaning! In total, this got removed:
- 74 Posts
- Release updates from v1
- Outdated posts
- 916 unattached media files
- Includes videos, images, pdf’s and other
Why Is Digital Cleanup Important?
Every unnecessary file, email, or outdated document takes up digital space, consumes energy, costs donor contributions and contributes to our overall carbon footprint. By cleaning up our shared drives, email inboxes, and collaborative tools, we can:
- Reduce digital clutter for a more efficient workflow.
- Improve data security by removing outdated and redundant files.
- Lower Greenpeace’s digital footprint, aligning with our sustainability goals.
Heads-up 📡
PLANET-7579 Migrate Covers Take Action block to Actions List block
PLANET-7676 Change Anti-Flicker Snippet to VWO
