feat(): add progress-fab component

[devversion]

The feature is still under discussion. just decided to push it, so others can review and suggest improvements.

https://i.gyazo.com/4cb5fe4e70c4845e58d1c382d95f1eed.mp4

---

MdProgressFab

MdProgressFab is a normal FAB button surrounded with a progress-circle.

Screenshots

[md-progress-fab]

Bound Properties

Name	Type	Description
color	`"primary"	"accent"
value	number	Value for the progress-circle. Necessary when using the determinate mode.
mode	`"determinate"	"indeterminate"`
progressColor	`"primary"	"accent"

Examples

A basic progress-fab will have the markup:

<button md-progress-fab color="accent">
  <i class="material-icons md-24">favorite</i>
  </button>

It will use by default a indeterminate progress circle.

[jelbourn]

@devversion Now needs rebasing on my mega change #384; feel free to ping me if you run into any issues

[devversion]

@jelbourn Done.

[jelbourn]

You can use the new async function instead of the done callback now

[jelbourn]

@devversion sorry for the delay on this PR, I need to set some time aside to see what the a11y story for this component should be.

[devversion]

@jelbourn It's no problem :)
There are currently other things with higher priorities.

Just ping me on the PR, once you like to revisit it.

[marcysutton]

To be announced, this progress circle needs to be a sibling to the focusable button, and it needs role="progressbar" along with other related ARIA attributes: https://www.w3.org/TR/wai-aria/roles#progressbar

Specifically the progressbar needs to specify aria-valuenow, aria-valuemin and aria-valuemax for screen readers to follow along.

Lastly, what is the progress circle indicating (i.e. what is loading)? That binding should be indicated somehow...the ARIA roles spec recommends using aria-describedby on the progressbar and aria-busy on whatever is loading.

[devversion]

Thanks @marcysutton, I'll try making the process circle a sibling.

• The role is automatically applied from the Progress Circle Component
• Valuenow, ValueMin, ValueNow are also covered by the circle component.

Forwarding the aria-label / or creating a default one, makes definitely sense. thx

[marcysutton]

To answer @jelbourn's question from #305, this definitely does need some a11y treatment. While the button is the focusable element, the progressbar component (which needs ARIA) should be a sibling so it doesn't live inside of the button. That way the progressbar can be consumed effectively by assistive technologies, instead of trying to announce it in the context of a button (which has a different purpose and function).

If the progressbar component can't bind itself to whatever is actually loading on the page with aria-describedby, you'll have to make that step clear in the component documentation.

[devversion]

Going to close this for now, since this is a nice to have component

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}