Skip to content

Commit a8fb042

Browse files
Make default progress indicator more prominent
** Why are these changes being introduced: * Our application may already be showing a progress indicator that comes with Rails, but the default rendering is very subtle (only three px high). We want to make this more prominent. ** Relevant ticket(s): * https://mitlibraries.atlassian.net/browse/gdt-143 ** How does this address that need: This makes two changes: * Sets the threshold for showing the progress to bar to 200 milliseconds instead of the default 500. This will result in users seeing the progress bar more quickly while waiting for a slightly slow page load, which should give them greater assurance that the application is working on a response. * Once shown, the progress bar is now 75 pixels tall, rather than 3. This is the height of the black navbar at the top of the page, which should make the progress bar much harder to miss when it appears. ** Document any side effects to this change: This isn't a side effect, but an issue I've become aware of which I can't change at the moment: the default progress bar which Turbo uses is not particularly accessible to screen readers, which means that the "visual indicator of progress happening" is exactly that - purely visual. The screen reader experience while the indicator moves is completely silent. This is not a new behavior with this change, so it isn't a regression - but it is an example an improvement for one audience not being extended to other audiences. I'm not sure whether this should be enough to block this PR from merging. The level of effort to make this solution accessible for all audiences would be something like these options: * Write some javascript to augment the default markup with more accessible markup (aria roles, etc) * Contribute upstream to turbo-rails to replace the div being used by Turbo with more accessible markup * Look for an existing gem that has already augmented the default markup (I've done some brief searching for such a gem, but nothing immediately jumped out at me)
1 parent 0d4a8c4 commit a8fb042

File tree

3 files changed

+8
-0
lines changed

3 files changed

+8
-0
lines changed

app/assets/stylesheets/application.css.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import "partials/_local_nav";
1212
@import "partials/_pagination";
1313
@import "partials/_panels";
14+
@import "partials/_progress_bar";
1415
@import "partials/_search";
1516
@import "partials/_results";
1617
@import "partials/_typography";
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.turbo-progress-bar {
2+
background: linear-gradient(to right, #000, #fff);
3+
height: 75px;
4+
}

app/javascript/application.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
22
import "@hotwired/turbo-rails"
33
import "controllers"
4+
5+
// Show the progress bar after 200 milliseconds, not the default 500
6+
Turbolinks.setProgressBarDelay(200)

0 commit comments

Comments
 (0)