imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #3556 from matrix-org/t3chguy/a11y4

Browse source 
Use Navigation Treeview pattern for RoomList Accessibility
This commit is contained in:
Michael Telatynski 2019-10-22 13:42:08 +01:00 • committed by GitHub
commit e7f292794c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 145 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

13
res/css/structures/_RoomSubList.scss
View file

@ -20,7 +20,7 @@ limitations under the License.
so they ideally wouldn't affect each other.
lowest category: .mx_RoomSubList
flex-shrink: 10000000
distribute size of items within the same categery by their size
distribute size of items within the same category by their size
middle category: .mx_RoomSubList.resized-sized
flex-shrink: 1000
applied when using the resizer, will have a max-height set to it,
@ -46,10 +46,15 @@ limitations under the License.
flex-direction: row;
align-items: center;
flex: 0 0 auto;
margin: 0 16px;
margin: 0 8px;
padding: 0 8px;
height: 36px;
}
.mx_RoomSubList_labelContainer:focus-within {
background-color: $roomtile-focused-bg-color;
}
.mx_RoomSubList_label {
flex: 1;
cursor: pointer;
@ -67,7 +72,7 @@ limitations under the License.
margin-left: 8px;
}
.mx_RoomSubList_badge {
.mx_RoomSubList_badge > div {
flex: 0 0 auto;
border-radius: 8px;
font-weight: 600;
@ -103,7 +108,7 @@ limitations under the License.
}
}
.mx_RoomSubList_badgeHighlight {
.mx_RoomSubList_badgeHighlight > div {
color: $accent-fg-color;
background-color: $warning-color;
}

2
res/css/views/rooms/_RoomTile.scss
View file

@ -143,6 +143,8 @@ limitations under the License.
// toggle menuButton and badge on hover/menu displayed
.mx_RoomTile_menuDisplayed,
// or on keyboard focus of room tile
.mx_RoomTile.focus-visible:focus-within,
.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
.mx_RoomTile_menuButton {
display: block;