pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-25 11:47:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

[common] Adjust radio box component for screen readers

Browse Source
This commit is contained in:
Julia.Svinareva
2024-02-12 18:55:04 +03:00
parent 1a2937f586
commit 25c96df1ae
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/common/main/lib/component/RadioBox.js
View File

@ -70,7 +70,7 @@ define([
disabled : false,
rendered : false,
template : _.template('<div class="radiobox" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
template : _.template('<div class="radiobox" role="radio" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
'<input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
'<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<circle class="rb-circle" cx="8" cy="8" r="6.5" />' +
@ -99,6 +99,9 @@ define([
this.setCaption(this.options.labelText);
if (this.options.ariaLabel)
this.$label.attr('aria-label', this.options.ariaLabel);
// handle events
},
@ -159,6 +162,8 @@ define([
value && $('input[type=radio][name=' + this.name + ']').removeClass('checked');
this.$radio.toggleClass('checked', value);
this.$radio.prop('checked', value);
this.$label.attr('aria-checked', value);
},
setValue: function(value, suspendchange) {

12
apps/documenteditor/main/app/view/FileMenuPanels.js
View File

@ -331,7 +331,7 @@ define([
'<td colspan="2" class="subgroup-name"><label><%= scope.strCoAuthMode %></label></td>',
'</tr>',
'<tr class="coauth changes-mode">',
'<td colspan="2"><div style="display: flex;"><div id="fms-rb-coauth-mode-fast"></div>',
'<td colspan="2"><div style="display: flex;" role="radiogroup" aria-owns="fms-rb-coauth-mode-strict"><div id="fms-rb-coauth-mode-fast"></div>',
'<span style ="display: flex; flex-direction: column;"><label><%= scope.strFast %></label>',
'<label class="comment-text"><%= scope.txtFastTip %></label></span></div>',
'</td>',
@ -347,7 +347,7 @@ define([
'<td colspan="2" class="subgroup-name"><label><%= scope.txtShowTrackChanges %></label></td>',
'</tr>',
'<tr class="view-review">',
'<td colspan="2"><div id="fms-rb-show-track-ballons"></div></td>',
'<td colspan="2" role="radiogroup" aria-owns="fms-rb-show-track-tooltips"><div id="fms-rb-show-track-ballons"></div></td>',
'</tr>',
'<tr class="view-review">',
'<td colspan="2"><div id="fms-rb-show-track-tooltips"></div></td>',
@ -357,7 +357,7 @@ define([
'<td colspan="2" class="subgroup-name"><label><%= scope.strShowChanges %></label></td>',
'</tr>',
'<tr class="coauth changes-show">',
'<td colspan="2"><div id="fms-rb-show-changes-none"></div></td>',
'<td colspan="2" role="radiogroup" aria-owns="fms-rb-show-changes-all"><div id="fms-rb-show-changes-none"></div></td>',
'</tr>',
'<tr class="coauth changes-show">',
'<td colspan="2"><div id="fms-rb-show-changes-all"></div></td>',
@ -609,7 +609,8 @@ define([
name : 'coauth-mode',
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
dataHintOffset: 'small',
ariaLabel: this.strFast + ' ' + this.txtFastTip
});
this.rbCoAuthModeFast.on('change', function(){
me.chAutosave.setValue(1);
@ -622,7 +623,8 @@ define([
name : 'coauth-mode',
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
dataHintOffset: 'small',
ariaLabel: this.strStrict + ' ' + this.txtStrictTip
});
this.rbCoAuthModeStrict.on('change', _.bind(this.onChangeCoAuthMode, this,0));
this.rbCoAuthModeStrict.$el.parent().on('click', function (){me.rbCoAuthModeStrict.setValue(true);});