[Redesign] Improve visual design for “Add more of type“ functionality

[hidde]

Some parts of the WCAG EM Report Tool allow the user to add more of a certain time. for instance, “Add sample”, which adds a set of fields (URI, description) for a sample.

This issue is to improve the visual design for this component and potentially add it to the WAI Design Components.

cc @slhenry @nitedog

[nitedog]

I like how "Address" and "Short name" appear on the same line (on most configurations) in the current design. I think it makes it less daunting and contextually easier to understand.

[hidde]

@slhenry said in EOWG 16 April improve proximity and spacing to better group related info and separate the groups

[hidde]

Kevin said in EOWG 16 April:

long, thin, clutterred page and does not work well in Edge. It is difficult to visually parse. Wasn't there more of a tabular view - is there an option for that kind of view?

[hidde]

Have put Address and Short Name on the same line, made the delete function more subtle with an icon (and under the hood an accessible name), improved visual grouping so that each sampled page looks more like one. The background redundantly reinforces the grouping (low contrast, so only some users will benefit; could add border, but may be too much).

Also: tested in Edge!

[shawna-slh]

much better spacing and proximity!

(Although personally I would like the field name a little closer to the field -- but no biggie :-)

[hidde]

thanks! I've removed half of the spacing between field name and field (8px to 4px to be precise).

Closing for now, let's rivisit as needed.