MDL-57831 theme_boost: accessibility update for message preferences.

The preferences table did not meet accessibility guidelines regarding
colour contrast between hovered rows and the disabled switch
elements.

Ensure white background is used for all table cells, and replace the
highlighted columns used to differentiate processors with borders.
This commit is contained in:
Paul Holden
2021-04-21 21:50:51 +01:00
parent 234ca0699c
commit a760a65c5e
4 changed files with 11 additions and 11 deletions
@@ -84,7 +84,7 @@
{{> core/loading }}
</div>
<div class="preferences-container {{#disableall}}disabled{{/disableall}}" data-user-id="{{userid}}">
<table class="table table-hover preference-table">
<table class="table preference-table">
<thead>
<tr>
<th>{{displayname}}</th>
+4 -4
View File
@@ -48,18 +48,18 @@
}
}
tr {
th {
border-left: 1px solid $border-color;
}
td {
&:not(:first-child) {
width: 150px;
text-align: center;
}
&:nth-child(even) {
background-color: #f7f7f7;
border: 1px solid $border-color;
}
}
th:nth-child(even) {
background-color: #f7f7f7;
}
}
.preference-row {
.hover-tooltip-container {
+3 -3
View File
@@ -15095,13 +15095,13 @@ a.ygtvspacer:hover {
display: none; }
.preferences-container .preference-table thead th.unconfigured .config-warning {
display: inline-block; }
.preferences-container .preference-table tr th {
border-left: 1px solid #dee2e6; }
.preferences-container .preference-table tr td:not(:first-child) {
width: 150px;
text-align: center; }
.preferences-container .preference-table tr td:nth-child(even) {
background-color: #f7f7f7; }
.preferences-container .preference-table tr th:nth-child(even) {
background-color: #f7f7f7; }
border: 1px solid #dee2e6; }
.preferences-container .preference-table .preference-row .hover-tooltip-container {
display: inline-block; }
.preferences-container .preference-table .preference-row .preference-name {
+3 -3
View File
@@ -15319,13 +15319,13 @@ a.ygtvspacer:hover {
display: none; }
.preferences-container .preference-table thead th.unconfigured .config-warning {
display: inline-block; }
.preferences-container .preference-table tr th {
border-left: 1px solid #dee2e6; }
.preferences-container .preference-table tr td:not(:first-child) {
width: 150px;
text-align: center; }
.preferences-container .preference-table tr td:nth-child(even) {
background-color: #f7f7f7; }
.preferences-container .preference-table tr th:nth-child(even) {
background-color: #f7f7f7; }
border: 1px solid #dee2e6; }
.preferences-container .preference-table .preference-row .hover-tooltip-container {
display: inline-block; }
.preferences-container .preference-table .preference-row .preference-name {