Fylo data storage component

Hi Alex,

Wow, that's among the most pixel-perfect solutions I've seen on FEM!

1. I can't tell you anything about the meter element (since you just introduced me to it!) but this occurred to me:

You have a visually hidden meter and a content-less visual one - cool. But the 0GB and 1000GB nodes are dangling from the visual one without context and could be confusing for screenreader users - a shame since you've made a real a11y effort. Not sure what the best solution is - perhaps adding the visual meter labels as background-images on the empty meter class? My undestanding is that they would not be announced.

I'm really impressed with the thought you've put into this for accessiblity. It's almost like the visual meter is an affordance for people not using screenreaders!

1. Again, amazing thing to have considered. I actually don't think you have an issue here; I think "visual order" is a matter of interpretation, and the fact that the badge is "floating" outside the end of the status section signifies that it is a kind of suffix.

It's a really instructive solution, thank you!

Another brilliant solution, Alex! You're considering all the right things as well, which is great. The approach you've taken with a visually hidden meter element for screen reader users works well with the additional content then hidden using the aria-hidden attribute, as you've discussed.

For the visual order change, it's not necessarily a bad thing as long as the DOM order is correct for screen reader users. If the DOM order didn't make sense, but the visual order did, then you'd have a potential accessibility issue.

I hope that helps!

aria-hidden sounds more declarative than my suggestion. nice.