Fix accessibility for field help texts

[verheyenkoen]

Enhancement

In some places we have some help text below a field. Users using screen readers are missing this context since they will already have filled out the field before they notice the help text. This can be fixed by applying aria labels.

Either we add an id attribute to the help text element and reference that using the ~aria-describedby~ aria-details attribute on the form field element (preferred solution). Or we duplicate the help text in the aria-description attribute on the form field, but then we'd also need to add the aria-hidden="true" attribute to the help text so this information is not duplicated for them.

Here's an exhaustive list of fields to address:

• Publications

  • Search
  • [x] Created since facet filter
  • [x] Updated since facet filter
  • Add publication(s)
  • [x] ~Add/Import ... options~ (already wrapped inside <label>)
  • [x] Import from WoS (label missing + "Web of Science import instructions" help text)
  • [x] Enter identifier of your publication (2 labels missing + "Identifier import instructions" help text)
  • [x] Import via BibTeX file (label missing + "BibTeX import instructions" help text)
  • Edit publication details
  • [x] Publication type
  • [x] DOI
  • [x] Publication year
  • [x] Number of pages
  • [x] Date of defense (dissertation)
  • [x] Web of Science ID
  • [x] ISSN
  • [x] E-ISSN
  • [x] ISBN
  • [x] E-ISBN
  • [x] PubMed ID
  • [x] Arxiv ID
  • [x] ESCI ID
  • Add project
  • [x] Search project
  • Edit conference details
  • [x] Conference start date
  • [x] Conference end date
  • Edit additional information
  • [x] Keywords
  • Files
  • [x] Upload file field (Which document format or version should I use?)
  • Add/edit file
  • [x] Publication version
  • [x] ~Access level~ (already wrapped inside <label>)
  • [x] Access level after embargo
  • [x] Embargo end
  • Edit Librarian tags
  • [x] Librarian tags

• Datasets

  • Search
  • [x] Created since facet filter
  • [x] Updated since facet filter
  • Add dataset
  • [x] ~Add/Import ... options~ (already wrapped inside <label>)
  • [x] DOI (label missing + help text)
  • Edit dataset details
  • [x] Persistent identifier type
  • [x] Identifier
  • [x] Publication year
  • [x] Keywords
  • [x] Other license
  • Add project
  • [x] Search project
  • Edit Librarian tags
  • [x] Librarian tags

• Batch

  • [x] Operations

• [x] Additionally, we need to make sure all help texts are translated so they are not duplicated (especially in case we need the alternative solution, using aria-description).

Screenshots

HTML currently generated for this field:

<div class="mb-6 row">
  <label class="col-lg-3 col-form-label mt-2" for="type"
    >Publication type</label
  >
  <div class="col-lg-3">
    <select
      class="form-select form-control"
      name="type"
      id="type"
      hx-get="/publication/01J1VXWR3D7DCJ1F544DCDJ9H1/type/confirm"
      hx-headers='{"If-Match": "01J1W9HBZ274660ZAJ02WMHTPR"}'
      hx-target="#modals"
    >
      <option value="journal_article">Journal article</option>
      <option value="book">Book</option>
      <option value="book_chapter">Book chapter</option>
      <option value="book_editor">Book editor</option>
      <option value="issue_editor">Issue editor</option>
      <option value="conference">Conference</option>
      <option value="dissertation">Dissertation</option>
      <option value="miscellaneous" selected="">Miscellaneous</option></select
    ><small class="form-text text-muted"
      >Changing the publication type might result in data loss</small
    >
  </div>
</div>

Additional context

https://getbootstrap.com/docs/5.0/forms/overview/#form-text

Automatic testing scenario

Ideally this is tested generically for forms. We'd need to query for .form-text instances and see if they are linked correctly to the previous field, either via ~aria-describedby~ aria-details or duplicated in aria-description but then the .form-text element should also have the aria-hidden="true" attribute.

[mietcls]

Tasty stuff!

Either we add an id attribute to the help text element and reference that using the aria-describedby attribute on the form field element (preferred solution). Or we duplicate the help text in the aria-description attribute on the form field, but then we'd also need to add the aria-hidden="true" attribute to the help text so this information is not duplicated for them.

I'd go for the preferred solution so we don't have redundant code nor extra maintenance (duplicate text is doomed to be forgotten).

[verheyenkoen]

I'd go for the preferred solution so we don't have redundant code nor extra maintenance (duplicate text is doomed to be forgotten).

I just added the alternative in case the preferred solution is not "feasible" somehow. In case it's not, it should be a translated text anyway (I'll fix it if not), so it's still a one-place-edit.