Fylo-Data-Storage-Component

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted about 3 years ago

  I'll see if I can answer a couple of these.

  For the semantic HTML:

  • for the meter, try using a <meter> element with a label telling you how much you've used
  • It's good that you've got a main element, but you need an h1. As the logo contains the company name, you could probably wrap that in an h1, and put the company name in plain text inside a visually hidden span. As this is just a single component, the h1 may sometimes feel a bit artificial. In a full page there would normally be a better choice for the page heading.
  • You've got a lot of nested section elements. A section is semantic only if it's labelled with a heading, otherwise it has no meaning. If you don't have a meaningful section, and you just need to break things up for layout/styling purposes, then a regular div is fine.
  • You could maybe tie the remaining space element to the meter by using aria-describedby on the meter

  For the thumb on the meter not being centered, I'm pretty sure that's because the width of the track is working out at 14px, but the thumb has a diameter of 11px. That leaves 3px left over, so you'll have 1px on one side and 2px on the other side.

  A way to get around this would be to make the width of the track a CSS Custom Property. Then you could make your thumb diameter = calc(var(--track-width) -2px) or whatever value you want for the gap, just making sure it's an even number.

  Marked as helpful

  0