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

a11y - wrap notification level radios in fieldsets (#7471)

Browse source 
* notification settings radios table -> fieldset

Signed-off-by: Kerry Archibald <kerrya@element.io>

* aria-label for inputs

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update tests for fielset

Signed-off-by: Kerry Archibald <kerrya@element.io>

* remove unneccessary wrapping div

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix stylelint

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-01-06 18:52:06 +01:00 • committed by GitHub
parent b1066a5699
commit dc2d52c1f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

85
res/css/views/settings/_Notifications.scss
View file

@ -14,53 +14,56 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_UserNotifSettings {
color: $primary-content; // override from default settings page styles
.mx_UserNotifSettings_grid {
width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
display: grid;
grid-template-columns: auto repeat(3, 62px);
place-items: center center;
grid-gap: 8px;
margin-top: $spacing-40;
.mx_UserNotifSettings_pushRulesTable {
width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
margin-top: 40px;
// Override StyledRadioButton default styles
.mx_StyledRadioButton {
justify-content: center;
tr > th {
font-weight: $font-semi-bold;
.mx_StyledRadioButton_content {
display: none;
}
tr > th:first-child {
text-align: left;
font-size: $font-18px;
}
tr > th:nth-child(n + 2) {
color: $secondary-content;
font-size: $font-12px;
vertical-align: middle;
width: 66px;
}
tr > td:nth-child(n + 2) {
text-align: center;
}
tr > td {
padding-top: 8px;
}
// Override StyledRadioButton default styles
.mx_StyledRadioButton {
justify-content: center;
.mx_StyledRadioButton_content {
display: none;
}
.mx_StyledRadioButton_spacer {
display: none;
}
.mx_StyledRadioButton_spacer {
display: none;
}
}
}
.mx_UserNotifSettings_gridRowContainer {
display: contents;
}
.mx_UserNotifSettings_gridRow {
display: contents;
}
.mx_UserNotifSettings_gridRowLabel {
justify-self: start;
// <legend> does not accept
// display: inline | inline-block
// force it inline using float
float: left;
}
.mx_UserNotifSettings_gridRowHeading {
font-size: $font-18px;
font-weight: $font-semi-bold;
}
.mx_UserNotifSettings_gridColumnLabel {
color: $secondary-content;
font-size: $font-12px;
font-weight: $font-semi-bold;
}
.mx_UserNotifSettings {
color: $primary-content; // override from default settings page styles
.mx_UserNotifSettings_floatingSection {
margin-top: 40px;