Merge pull request element-hq#365 from vector-im/avatar_initial_a11y

ara4n · ara4n · commit ca07c8f429b4 · 2015-11-13T18:37:10.000Z
Mark up the avatar initials so they're not read out by screen readers
diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/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;    
-}
+}
diff --git a/src/skins/vector/css/atoms/RoomAvatar.css b/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;
 }
diff --git a/src/skins/vector/views/atoms/MemberAvatar.js b/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>
diff --git a/src/skins/vector/views/atoms/RoomAvatar.js b/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>

Original file line number	Diff line number	Diff line change
`@@ -22,4 +22,5 @@ limitations under the License.`
`22`	`22`	`color: #fff;`
`23`	`23`	`text-align: center;`
`24`	`24`	`font-weight: normal ! important;`
	`25`	`+ speak: none;`
`25`	`26`	`}`