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

42
src/components/views/settings/Notifications.tsx
View file

@ -572,7 +572,7 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
const makeRadio = (r: IVectorPushRule, s: VectorState) => (
<StyledRadioButton
key={r.ruleId}
key={r.ruleId + s}
name={r.ruleId}
checked={r.vectorState === s}
onChange={this.onRadioChecked.bind(this, r, s)}
@ -581,15 +581,17 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
/>
);
const rows = this.state.vectorPushRules[category].map(r => <tr
data-test-id={category + r.ruleId}
key={category + r.ruleId}
>
<td>{ r.description }</td>
<td>{ makeRadio(r, VectorState.Off) }</td>
<td>{ makeRadio(r, VectorState.On) }</td>
<td>{ makeRadio(r, VectorState.Loud) }</td>
</tr>);
const fieldsetRows = this.state.vectorPushRules[category].map(r =>
<fieldset
key={category + r.ruleId}
data-test-id={category + r.ruleId}
className='mx_UserNotifSettings_gridRowContainer'
>
<legend className='mx_UserNotifSettings_gridRowLabel'>{ r.description }</legend>
{ makeRadio(r, VectorState.Off) }
{ makeRadio(r, VectorState.On) }
{ makeRadio(r, VectorState.Loud) }
</fieldset>);
let sectionName: TranslatedString;
switch (category) {
@ -607,19 +609,13 @@ export default class Notifications extends React.PureComponent<IProps, IState> {
}
return <>
<table data-test-id={`notif-section-${category}`} className='mx_UserNotifSettings_pushRulesTable'>
<thead>
<tr>
<th>{ sectionName }</th>
<th>{ VectorStateToLabel[VectorState.Off] }</th>
<th>{ VectorStateToLabel[VectorState.On] }</th>
<th>{ VectorStateToLabel[VectorState.Loud] }</th>
</tr>
</thead>
<tbody>
{ rows }
</tbody>
</table>
<div data-test-id={`notif-section-${category}`} className='mx_UserNotifSettings_grid'>
<span className='mx_UserNotifSettings_gridRowLabel mx_UserNotifSettings_gridRowHeading'>{ sectionName }</span>
<span className='mx_UserNotifSettings_gridColumnLabel'>{ VectorStateToLabel[VectorState.Off] }</span>
<span className='mx_UserNotifSettings_gridColumnLabel'>{ VectorStateToLabel[VectorState.On] }</span>
<span className='mx_UserNotifSettings_gridColumnLabel'>{ VectorStateToLabel[VectorState.Loud] }</span>
{ fieldsetRows }
</div>
{ clearNotifsButton }
{ keywordComposer }
</>;