Improve the presentation/accessibility of file attachments while loading.

Review Request #11340 — Created Dec. 18, 2020 and submitted

Information

Review Board
release-4.0.x

Reviewers

When loading a review request with file attachments, we'd show a spinner
with a little status message, and eventually replace it with loaded file
attachment data as soon as the JavaScript had finished executing. We
have it this way in order to avoid duplicating a lot of file attachment
setup logic in the template.

This ultimately led to a fairly annoying page jump on load, and wasn't
particularly pleasant from a user's point of view.

This change implements a sort of half-way version of this. We now
display placeholders for each thumbnail, just the box for the attachment
without any thumbnail or identifying information. This is displayed
faded out, and a new-style spinner is displayed next to the "Files"
header, making it clear that we're still loading.

Accessibility hints were added so that screen readers can be aware when
the attachments area is still in the process of loading and when it has
finished.

Loaded a page with file attachments. Saw that there was a placeholder
thumbnail for each of the attachments, which were then replaced with the
real ones.

Checked the accessibility states before/after load.

Summary ID
Improve the presentation/accessibility of file attachments while loading.
When loading a review request with file attachments, we'd show a spinner with a little status message, and eventually replace it with loaded file attachment data as soon as the JavaScript had finished executing. We have it this way in order to avoid duplicating a lot of file attachment setup logic in the template. This ultimately led to a fairly annoying page jump on load, and wasn't particularly pleasant from a user's point of view. This change implements a sort of half-way version of this. We now display placeholders for each thumbnail, just the box for the attachment without any thumbnail or identifying information. This is displayed faded out, and a new-style spinner is displayed next to the "Files" header, making it clear that we're still loading. Accessibility hints were added so that screen readers can be aware when the attachments area is still in the process of loading and when it has finished.
8bd0cecab80537807ff4f9434b193a272873d78a

chipx86
chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-4.0.x (35c4b27)