Improve new room header accessibility (#12725)

* Fix room header topic not showing on keyboard navigation whilst still using tabstops

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix keyboard activation of the room header FacePile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix label on room header facepile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update src/components/views/elements/FacePile.tsx

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Michael Telatynski 2024-07-08 12:52:26 +01:00 committed by GitHub
parent b2a89151e6
commit 466f37a83d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 25 additions and 24 deletions

View file

@ -74,14 +74,17 @@ limitations under the License.
}
}
.mx_RoomHeader:hover .mx_RoomHeader_topic {
/* height needed to compute the transition, it equals to the `line-height`
.mx_RoomHeader:hover,
.mx_RoomHeader:focus-within {
.mx_RoomHeader_topic {
/* height needed to compute the transition, it equals to the `line-height`
value in pixels */
height: calc($font-13px * 1.5);
opacity: 1;
height: calc($font-13px * 1.5);
opacity: 1;
a:hover {
text-decoration: underline;
a:hover {
text-decoration: underline;
}
}
}