by Lee Moody.
Tagged with Newsletter.
TL;DR: A belated happy new year to you! The Origami team are off to a flying start. This feature includes many accessibility improvements; app team collaboration; Storybook Stories and JSX templates for components; and ongoing bower to npm migration support.
Some of the bigger Origami news from the last month:
Back in July 2021 we announced Origami components had moved from the Bower to npm package manager. That means there is 6 months remaining until we turn off the Origami Bower Registry and Origami Build Service V2.
Teams using Bower need to migrate to npm, and teams using V2 of the Origami Build Service need to migrate to V3. Your team has scheduled migration work right? Right? If not fear not. We’re continuing to reach out to teams and offer support, please let us know in the #origami-support Slack channel if you have any questions. 😊
To learn more about the changes see the original announcement and guides on how to migrate products. We also have a migration tracker you may use to identify whether any of your systems are affected.
Accessibility audits for ft.com help Origami identify issues in components and distribute fixes to other projects which use Origami, from 3rd party maintained products to internal tools. But Origami components have never been audited proactively and in isolation, until now!
We received our first accessibility audit by DAC (Digital Accessibility Center) and it’s a whopping 237 pages. This month the team have triaged the issues and begun releasing fixes. I’m pleased to report we’ve resolved 25% so far.
One great example is o-tabs v8 which now implements the wai-aria tabs design pattern. Improvements include keyboard support for moving between tabs using arrow keys, relationships between tabs and their associated tab-panel, and more (o-tabs@8 pull request).
In case you missed Guy Powell’s email last week, you might like to know “DAC are now engaged 10 hours per week, every week to provide audits, reviewing new products and services, provide suggestions for improvements and answer any accessibility related questions”. It has been incredibly helpful to get quick and iterative feedback on our improvements. 🙏 If you are thinking about organising an accessibility audit for your project, contact Rich Lewis or Guy Powell in the #accessibility-improvements Slack channel.
This month the Origami team collaborated with the Apps team to investigate ways the article page font resizing setting in the app could be improved using a little known relative typography and spacing feature in Origami. Our aims were to:
By the end of the week we had 5 possible approaches to recommend, ranging in scope from “delete the feature” to “modernise all the things”, in-between a very clever and pragmatic solution – if we do say so ourselves.
See the ft-app font size feature spike document to learn more.
The spike was a lot of fun and a great way to share knowledge between our teams. Massive shout out to Charlotte Payne from the apps team for her excellent work on this!
We mentioned in our previous blog post that we are working on an Origami Storybook which we see as an eventual replacement to our very custom Origami component registry. We’re making progress and adding new components each week.
This is very exciting because it will allow us to make the most of a large ecosystem of tools to help speed up design and development at the FT (see details and screenshots in previous blog post). It’s also exciting because we’re writing JSX templates for our components for the first time, which we may make public in the near future. For teams who also use JSX templates, this could hugely reduce the complexity of implementing Origami components in a project and make our most tricky kind of migration (markup changes) simple when upgrading from one major version of a component to another.
You can get a sneak peak at origami.ft.com/storybook and track our progress on our component demos / storybook issue.
Special thanks this month goes to Guy and Rich, and the Digital Accessibility Center, for their support in the #accessibility-improvements Slack channel 🙇♂️