Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit dc2d52c

Browse files
author
Kerry
authored
a11y - wrap notification level radios in fieldsets (#7471)
* 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>
1 parent b1066a5 commit dc2d52c

File tree

3 files changed

+63
-64
lines changed

3 files changed

+63
-64
lines changed

‎res/css/views/settings/_Notifications.scss‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -14,53 +14,56 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
.mx_UserNotifSettings {
18-
color: $primary-content; // override from default settings page styles
19-
20-
.mx_UserNotifSettings_pushRulesTable {
21-
width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
22-
table-layout: fixed;
23-
border-collapse: collapse;
24-
border-spacing: 0;
25-
margin-top: 40px;
26-
27-
tr > th {
28-
font-weight: $font-semi-bold;
17+
.mx_UserNotifSettings_grid {
18+
width: calc(100% + 12px); // +12px to line up center of 'Noisy' column with toggle switches
19+
display: grid;
20+
grid-template-columns: auto repeat(3, 62px);
21+
place-items: center center;
22+
grid-gap: 8px;
23+
margin-top: $spacing-40;
24+
25+
// Override StyledRadioButton default styles
26+
.mx_StyledRadioButton {
27+
justify-content: center;
28+
29+
.mx_StyledRadioButton_content {
30+
display: none;
2931
}
3032

31-
tr > th:first-child {
32-
text-align: left;
33-
font-size: $font-18px;
34-
}
35-
36-
tr > th:nth-child(n + 2) {
37-
color: $secondary-content;
38-
font-size: $font-12px;
39-
vertical-align: middle;
40-
width: 66px;
33+
.mx_StyledRadioButton_spacer {
34+
display: none;
4135
}
36+
}
37+
}
4238

43-
tr > td:nth-child(n + 2) {
44-
text-align: center;
45-
}
39+
.mx_UserNotifSettings_gridRowContainer {
40+
display: contents;
41+
}
4642

47-
tr > td {
48-
padding-top: 8px;
49-
}
43+
.mx_UserNotifSettings_gridRow {
44+
display: contents;
45+
}
5046

51-
// Override StyledRadioButton default styles
52-
.mx_StyledRadioButton {
53-
justify-content: center;
47+
.mx_UserNotifSettings_gridRowLabel {
48+
justify-self: start;
49+
// <legend> does not accept
50+
// display: inline | inline-block
51+
// force it inline using float
52+
float: left;
53+
}
54+
.mx_UserNotifSettings_gridRowHeading {
55+
font-size: $font-18px;
56+
font-weight: $font-semi-bold;
57+
}
5458

55-
.mx_StyledRadioButton_content {
56-
display: none;
57-
}
59+
.mx_UserNotifSettings_gridColumnLabel {
60+
color: $secondary-content;
61+
font-size: $font-12px;
62+
font-weight: $font-semi-bold;
63+
}
5864

59-
.mx_StyledRadioButton_spacer {
60-
display: none;
61-
}
62-
}
63-
}
65+
.mx_UserNotifSettings {
66+
color: $primary-content; // override from default settings page styles
6467

6568
.mx_UserNotifSettings_floatingSection {
6669
margin-top: 40px;

‎src/components/views/settings/Notifications.tsx‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -572,7 +572,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
572572

573573
const makeRadio = (r: IVectorPushRule, s: VectorState) => (
574574
<StyledRadioButton
575-
key={r.ruleId}
575+
key={r.ruleId + s}
576576
name={r.ruleId}
577577
checked={r.vectorState === s}
578578
onChange={this.onRadioChecked.bind(this, r, s)}
@@ -581,15 +581,17 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
581581
/>
582582
);
583583

584-
const rows = this.state.vectorPushRules[category].map(r => <tr
585-
data-test-id={category + r.ruleId}
586-
key={category + r.ruleId}
587-
>
588-
<td>{ r.description }</td>
589-
<td>{ makeRadio(r, VectorState.Off) }</td>
590-
<td>{ makeRadio(r, VectorState.On) }</td>
591-
<td>{ makeRadio(r, VectorState.Loud) }</td>
592-
</tr>);
584+
const fieldsetRows = this.state.vectorPushRules[category].map(r =>
585+
<fieldset
586+
key={category + r.ruleId}
587+
data-test-id={category + r.ruleId}
588+
className='mx_UserNotifSettings_gridRowContainer'
589+
>
590+
<legend className='mx_UserNotifSettings_gridRowLabel'>{ r.description }</legend>
591+
{ makeRadio(r, VectorState.Off) }
592+
{ makeRadio(r, VectorState.On) }
593+
{ makeRadio(r, VectorState.Loud) }
594+
</fieldset>);
593595

594596
let sectionName: TranslatedString;
595597
switch (category) {
@@ -607,19 +609,13 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
607609
}
608610

609611
return <>
610-
<table data-test-id={`notif-section-${category}`} className='mx_UserNotifSettings_pushRulesTable'>
611-
<thead>
612-
<tr>
613-
<th>{ sectionName }</th>
614-
<th>{ VectorStateToLabel[VectorState.Off] }</th>
615-
<th>{ VectorStateToLabel[VectorState.On] }</th>
616-
<th>{ VectorStateToLabel[VectorState.Loud] }</th>
617-
</tr>
618-
</thead>
619-
<tbody>
620-
{ rows }
621-
</tbody>
622-
</table>
612+
<div data-test-id={`notif-section-${category}`} className='mx_UserNotifSettings_grid'>
613+
<span className='mx_UserNotifSettings_gridRowLabel mx_UserNotifSettings_gridRowHeading'>{ sectionName }</span>
614+
<span className='mx_UserNotifSettings_gridColumnLabel'>{ VectorStateToLabel[VectorState.Off] }</span>
615+
<span className='mx_UserNotifSettings_gridColumnLabel'>{ VectorStateToLabel[VectorState.On] }</span>
616+
<span className='mx_UserNotifSettings_gridColumnLabel'>{ VectorStateToLabel[VectorState.Loud] }</span>
617+
{ fieldsetRows }
618+
</div>
623619
{ clearNotifsButton }
624620
{ keywordComposer }
625621
</>;

‎test/components/views/settings/Notifications-test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -245,8 +245,8 @@ describe('<Notifications />', () => {
245245
const section = 'vector_global';
246246

247247
const globalSection = findByTestId(component, `notif-section-${section}`);
248-
// 16 notification rules with class 'global'
249-
expect(globalSection.find('td').length).toEqual(16);
248+
// 4 notification rules with class 'global'
249+
expect(globalSection.find('fieldset').length).toEqual(4);
250250
// oneToOneRule is set to 'on'
251251
const oneToOneRuleElement = findByTestId(component, section + oneToOneRule.rule_id);
252252
expect(getCheckedRadioForRule(oneToOneRuleElement)).toEqual('On');

0 commit comments

Comments
 (0)