Fix screenreader skipping blue unread dot on discussions

fixes COMMS-1331

test plan
* Navigate to a discussions page with blue dots on the left
showing
* Navigate through thepage using screenreader safari
* Notice that the unread symbol is read to the SO users

Change-Id: I3fe94eaa3f0454ac5dbbff0f39c86a17468de67b
Reviewed-on: https://gerrit.instructure.com/158012
Reviewed-by: Steven Burnett <sburnett@instructure.com>
Tested-by: Jenkins
QA-Review: Sara Chadwick <schadwick@instructure.com>
Product-Review: Aaron Kc Hsu <ahsu@instructure.com>

app/jsx/discussions/components/DiscussionRow.js

@@ -684,6 +684,25 @@ export class DiscussionRow extends Component {
     )
   }
 
+  renderBlueUnreadBadge() {
+    if(this.props.discussion.read_state !== "read") {
+      return (
+        <Badge
+          margin="0 small x-small 0"
+          standalone
+          type="notification"
+          formatOutput={() => <ScreenReaderContent>{I18n.t('Unread')}</ScreenReaderContent>}
+        />
+      )
+    } else {
+      return (
+        <View display="block" margin="0 small x-small 0">
+          <View display="block" margin="0 small x-small 0" />
+        </View>
+      )
+    }
+  }
+
   render () {
     // necessary because discussions return html from RCE
     const contentWrapper = document.createElement('span')
@@ -695,11 +714,7 @@ export class DiscussionRow extends Component {
           <GridRow>
           {/* discussion topics is different for badges so we use our own read indicator instead of passing to isRead */}
             <GridCol width="auto">
-            {!(this.props.discussion.read_state === "read")
-              ? <Badge margin="0 small x-small 0" standalone type="notification" />
-              : <View display="block" margin="0 small x-small 0">
-            <View display="block" margin="0 small x-small 0" />
-            </View>}
+            {this.renderBlueUnreadBadge()}
             </GridCol>
             <GridCol>
               {this.renderDiscussion()}