forked from matrix/element-web
Merge pull request #365 from vector-im/avatar_initial_a11y
Mark up the avatar initials so they're not read out by screen readers
This commit is contained in:
commit
ca07c8f429
|
@ -23,6 +23,7 @@ limitations under the License.
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
speak: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_MemberAvatar_image {
|
.mx_MemberAvatar_image {
|
||||||
|
|
|
@ -22,4 +22,5 @@ limitations under the License.
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: normal ! important;
|
font-weight: normal ! important;
|
||||||
|
speak: none;
|
||||||
}
|
}
|
|
@ -50,7 +50,7 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span className="mx_MemberAvatar">
|
<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",
|
style={{ fontSize: (this.props.width * 0.75) + "px",
|
||||||
width: this.props.width + "px",
|
width: this.props.width + "px",
|
||||||
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
|
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
|
||||||
|
|
|
@ -57,7 +57,7 @@ module.exports = React.createClass({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span>
|
<span>
|
||||||
<span className="mx_RoomAvatar_initial"
|
<span className="mx_RoomAvatar_initial" aria-hidden="true"
|
||||||
style={{ fontSize: (this.props.width * 0.75) + "px",
|
style={{ fontSize: (this.props.width * 0.75) + "px",
|
||||||
width: this.props.width + "px",
|
width: this.props.width + "px",
|
||||||
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
|
lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
|
||||||
|
|
Loading…
Reference in New Issue