Merge pull request #365 from vector-im/avatar_initial_a11y

Mark up the avatar initials so they're not read out by screen readers

src/skins/vector/css/atoms/MemberAvatar.css

@@ -23,8 +23,9 @@ limitations under the License.
     position: absolute;
     color: #fff;
     text-align: center;
+    speak: none;
 }
 
 .mx_MemberAvatar_image {
     border-radius: 20px;    
-}
+}

src/skins/vector/css/atoms/RoomAvatar.css

@@ -22,4 +22,5 @@ limitations under the License.
     color: #fff;
     text-align: center;
     font-weight: normal ! important;
+    speak: none;
 }

src/skins/vector/views/atoms/MemberAvatar.js

@@ -50,7 +50,7 @@ module.exports = React.createClass({
          
             return (
                 <span className="mx_MemberAvatar">
-                    <span className="mx_MemberAvatar_initial"
+                    <span className="mx_MemberAvatar_initial" aria-hidden="true"
                           style={{ fontSize: (this.props.width * 0.75) + "px",
                                    width: this.props.width + "px",
                                    lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>

src/skins/vector/views/atoms/RoomAvatar.js

@@ -57,7 +57,7 @@ module.exports = React.createClass({
          
             return (
                 <span>
-                    <span className="mx_RoomAvatar_initial"
+                    <span className="mx_RoomAvatar_initial" aria-hidden="true"
                           style={{ fontSize: (this.props.width * 0.75) + "px",
                                    width: this.props.width + "px",
                                    lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>