UISeeds - FieldValue Component

[emilyjablonski]

Transfer the FieldValue component from UIC to UISeeds (currently named ViewItem). (Audit Link) (Notion Docs Link)

We should make a few changes to the component on transfer:

• FieldValue needs V2 styling
• A11y considerations from the design docs - ensure we are using best practice relating the label to the value (label might not be the best case if it's not an interactable form but not sure) - might have to do some minimal research - consider labelled-by / described-by, consider list item

[jaredcwhite]

Accessibility notes:

I spent some time researching patterns for this and trying some different markup approaches in CodePen while using VoiceOver (macOS). It seems like the least confusing as well as fairly logical option is to use a grid and make FieldValue a grid cell. The markup could look something like this:

<section role="grid">
  <div role="row">
    <div class="field-value" role="gridcell"> <!-- FieldValue component -->
      <p>First Name</p>
      <p>Jared</p>
    </div>
    <div class="field-value" role="gridcell"> <!-- FieldValue component -->
      <p>Last Name</p>
      <p>White</p>
    </div>
  </div>
</section>

(The <p> tags can be anything, <div>s even.)

I tried various combinations of aria labels and labelled-by and all that sort of thing, and it just didn't seem to click or provide any additional clarity. I think "labels" generally are either for associating with actual form inputs, or for presenting textual description of a visual element (images, etc.). Of course there could be some additional nuance to this that VoiceOver doesn't work with but is helpful in a different screen reader.

But I think generally the grid concept is sound, and VoiceOver helpfully announced the first line of text (label) as a description of the row/column, with the next element to announce being the value. So that's pretty cool.

[slowbot]

@jaredcwhite Figma design specs https://www.figma.com/file/SsYt5YsgbmOPbwr5Qk2RKB/bloom-core-library?node-id=3305%3A12106&t=d6uLkrNId5ffKmcN-1

[slowbot]

@jaredcwhite

• Right now there is a top margin on "value" when a label is present and there does not need to be.

Otherwise looks good.

I can create a bug ticket for mobile-type sizing in zeroheight.

[jaredcwhite]

@slowbot I'm not seeing a deviation from the Figma specs. Is this a design change?

[sarahlazarich]

based on convo in stand today, we can close QA on this and deal with the bug ticket separately.