Add accessibility attributes to loading spinner (#2799)

js/src/common/components/LoadingIndicator.tsx

@@ -53,8 +53,14 @@ export default class LoadingIndicator extends Component<LoadingIndicatorAttrs> {
     attrs.containerClassName = classList({ 'LoadingIndicator-container': true, [attrs.containerClassName || '']: true });
 
     return (
-      <div {...attrs.containerAttrs} data-size={size} className={attrs.containerClassName}>
-        <div {...attrs}></div>
+      <div
+        aria-label={app.translator.trans('core.lib.loading_indicator.accessible_label')}
+        role="status"
+        {...attrs.containerAttrs}
+        data-size={size}
+        className={attrs.containerClassName}
+      >
+        <div aria-hidden {...attrs} />
       </div>
     );
   }

locale/core.yml

@@ -483,6 +483,10 @@ core:
       permission_denied_message: You do not have permission to do that.
       rate_limit_exceeded_message: You're going a little too quickly. Please try again in a few seconds.
 
+    # These translations are used in the loading indicator component.
+    loading_indicator:
+      accessible_label: => core.ref.loading
+
     # These translations are used as suffixes when abbreviating numbers.
     number_suffix:
       kilo_text: K
@@ -505,7 +509,7 @@ core:
     content:
       javascript_disabled_message: This site is best viewed in a modern browser with JavaScript enabled.
       load_error_message: Something went wrong while trying to load the full version of this site. Try hard-refreshing this page to fix the error.
-      loading_text: Loading...
+      loading_text: => core.ref.loading
 
     # Translations in this namespace are displayed in the basic HTML discussion view.
     discussion:
@@ -624,6 +628,7 @@ core:
     icon: Icon
     icon_text: "Enter the name of any <a>FontAwesome</a> icon class, <em>including</em> the <code>fas fa-</code> prefix."
     load_more: Load More
+    loading: Loading...
     log_in: Log In
     log_out: Log Out
     mark_all_as_read: Mark All as Read