LoadingSpinner: Improve a11y

Author: Turbo87

app/components/loading-spinner.hbs

@@ -1,6 +1,6 @@
 <div
-  title="Loading Spinner"
   local-class="spinner"
   ...attributes
 >
+  <span local-class="message">Loading…</span>
 </div>

app/components/loading-spinner.module.css

@@ -19,6 +19,10 @@
     }
 }
 
+.message {
+    composes: sr-only from '../styles/shared/a11y.module.css';
+}
+
 @keyframes spinner {
     0% {
         transform: rotate(0deg);

tests/acceptance/crate-following-test.js

@@ -37,7 +37,7 @@ module('Acceptance | Crate following', function (hooks) {
 
     visit('/crates/nanomsg');
     await waitFor('[data-test-follow-button] [data-test-spinner]');
-    assert.dom('[data-test-follow-button]').hasText('');
+    assert.dom('[data-test-follow-button]').hasText('Loading…');
     assert.dom('[data-test-follow-button] [data-test-spinner]').exists();
 
     followingDeferred.resolve({ following: false });
@@ -50,7 +50,7 @@ module('Acceptance | Crate following', function (hooks) {
 
     click('[data-test-follow-button]');
     await waitFor('[data-test-follow-button] [data-test-spinner]');
-    assert.dom('[data-test-follow-button]').hasText('');
+    assert.dom('[data-test-follow-button]').hasText('Loading…');
     assert.dom('[data-test-follow-button] [data-test-spinner]').exists();
 
     followDeferred.resolve({ ok: true });
@@ -63,7 +63,7 @@ module('Acceptance | Crate following', function (hooks) {
 
     click('[data-test-follow-button]');
     await waitFor('[data-test-follow-button] [data-test-spinner]');
-    assert.dom('[data-test-follow-button]').hasText('');
+    assert.dom('[data-test-follow-button]').hasText('Loading…');
     assert.dom('[data-test-follow-button] [data-test-spinner]').exists();
 
     unfollowDeferred.resolve({ ok: true });