bloom-housing / ui-seeds

Bloom's affordable housing design system
Apache License 2.0
1 stars 1 forks source link

UISeeds - FieldValue Component #6

Closed emilyjablonski closed 1 year ago

emilyjablonski commented 1 year ago

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:

jaredcwhite commented 1 year ago

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 commented 1 year ago

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

slowbot commented 1 year ago

@jaredcwhite

Otherwise looks good.

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

jaredcwhite commented 1 year ago

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

sarahlazarich commented 1 year ago

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