Demonstrate accessible trading experiences with Theme Builder and TraderX

[PaulaPaul]

The FINOS A11y Theme Builder project is exploring a 'bring your own design system' epic to show how Theme Builder can be brought into an existing project or product to assess accessibility opportunities and design solutions to improve accessibility. It is very likely that many traders have some aspect of low vision or color blindness, and we can focus on those target audiences for the sprint. This would result in a documented assessment process and tooling integration with Theme Builder to illustrate the benefits to both projects.

[PaulaPaul]

@karlmoll @maoo Can you give me permission to tag this as a use case? Thanks!

[PaulaPaul]

@lwnoble I am planning to join the event in NYC and can collaborate with you and the team virtually if we tackle this as one of the activities at the event - I think it will help us refine the "BYOD" (Bring Your Own Design system) epic for Theme Builder, and document ways of adopting Theme Builder in an existing app.

[PaulaPaul]

Since the web-front-end for traderX is simple, we can start with our Theme Builder 'BYOD' (Bring Your Own Design) system epic and start by introducing a simple wireframe using PenPot (open source design tool), then use Theme Builder to create a TraderX theme that would replace the simple CSS in the existing React and Angular apps. Those assets could live modularly in separate locations in the web-front-end folder in the app, along with a write up of how Theme Builder was used to ensure the experience enabled things like light/dark mode and color blind modes.

We can create a palette and components at the live Theme Builder demo site at FINOS: https://try.a11y-theme-builder.finos.org/

[PaulaPaul]

The first step is to understand the potential accessibility issues in the app - using some free online tools we can get a starting place for using Theme Builder to create replacement components. For example, using the link to the traderX demo site on FINOS we can scan for accessibility issues:
this is just one example - there are many tools online that have slightly different approaches

[PaulaPaul]

This is a great 'simple case' demonstration of how Theme Builder can be used to improve an existing app. Cross linking here to an issue in the Theme Builder repo that we can work on with the Theme Builder team.