Flynt v1.3 – Accessibility, Dynamic Resize & Customizer Support

The biggest release since v1.0 is packed with loads of accessibility improvements, and comes with optimizations that make the Flynt developer experience more seamless.

Posted by Steffen in Releases 3 min read

Accessibility

We put a huge focus on accessibility, researching a11y best practices and analyzing the BaseStyle and all components. Our efforts resulted in the following initiatives:

Added additional text labels for screen readers, and extended the BaseStyle with a .visuallyHidden class to hide those labels.
Added aria labels and attributes.
Ensured all inputs have labels.
Added title attributes to links.
Updated heading tags for better document hierarchies.
Added a “Jump to main content” link to skip the main menu when using keyboard navigation.

We also identified the following issues which are not resolved yet:

Some default color combinations should have a higher contrast.
Focus states are inconsistent and might not be recognizable.

We’re currently working on solutions and will bundle them in a release that advances the Flynt color variable system.

Flynt v1.3 Lighthouse Accessibility Test Result — Flynt v1.3 is optimized for accessibility. Color contrast optimizations will follow.

Timber Dynamic Resize

While the Timber Dynamic Resize functionality is wildly appreciated, it’s also the one that caused most issues in various development setups, resulting in 404 errors. We addressed these issues in 3 ways (40e2f64):

We revisited the troubleshooting section in the readme, to support debugging any issues.
We managed to fix issues, thanks to multiple reports, also in accordance with WPML.
We disabled Dynamic Image Generation and WebP Support by default, but added options to enable them in the backend at Global Options -> Timber Dynamic Resize. WebP can only be enabled if it’s supported by the server.

Global Options: Timber Dynamic Resize — Enable Dynamic Image Generation and WebP Support in Global Options.

Customizer Support

The navigation logo is defined and saved as an image asset in the NavigationMain and NavigationBurger components. This gives developers perfect control over the size and placement. But sometimes, you want to change the logo without having to adjust the code base. This might be true for multiple theme setups of related brands.

That’s why we decided to allow updating the navigation logo via the WordPress Customizer (4e84112). By default, the logo asset defined in the NavigationMain and NavigationBurger components will serve as a fallback. This makes the change a progressive improvement to your custom built themes.

We’re also currently working on implementing CSS custom properties for colors. Our goal is to make color theming easier, by having to write less code and being able to change colors in the WordPress Customizer (#258).

Replace a hard coded header logo within the WordPress Customizer.

Other Optimizations

BlockVideoOembed supports the same size options as BlockImage: Small, Medium, Large, Huge, and Full (a26a933).
All components defined in the pageComponents field group are added to custom post types by default (f218164).
Gutenberg styles are removed from the frontend (#261).
Component labels are translatable (4524cab), to support a custom language backend experience.
Several code cleanups, unified styles, bug fixes, image optimizations, IE11 fixes and dependency updates.

Deprecations

The ExternalScriptLoader is a relict of past times without being used in components. We removed it (#283), but then reverted the commit and decided to deprecate it instead. Please don’t rely on it’s existence anymore, but do let us know if you’re using it and we’ll be happy to evaluate future options for external script loading.

Premium Components v1.1

While working on the Flynt open source starter theme, we did not forget about the purchasable add-on. The Premium Components received their first official update, which is available to purchasers via the license center.

The Premium Components update to v1.1 includes the following: