Design and Build: Progress Component

[francisrupert]

Sub-tasks

• Research
• Prototype
• Design
• Build for Production
  • Screenreader implications
  • Variations / States (e.g. indeterminate)
• JavaScript Demo (non-production, prototype-quality)

Summary

If browser support and screenreader support for <progress> isn't enough to use as is, this task aims to mostly emulating the native <progress> element while developing opinion on appropriate level of support to design and build this component. For example, while not fully emulating accessibility support, it likely could be a good example of Progressive Enhancement.

Initial Prototype

https://codepen.io/francisrupert/pen/QWLyRZx?editors=1000

Background

Was initiated in SPA Reference App (ASC-186, ASC-222). Intended to outright replace the "Circular Loading" (#355, ASC-215) component and extend.

Related

Similar to the <meter> element (#361) in appearance, its role is distinct and thus its own component. Design System documentation shall aid to distinguish usage..

[francisrupert]

Re-opening to address screenreader compatibility. Current markup and aria usage is iffy on how its content gets announced consistently.