From 25c96df1aebe74e42261692bb72881ec4eef64e4 Mon Sep 17 00:00:00 2001
From: "Julia.Svinareva" <julia.svinaryova@onlyoffice.com>
Date: Mon, 12 Feb 2024 18:55:04 +0300
Subject: [PATCH] [common] Adjust radio box component for screen readers

---
 apps/common/main/lib/component/RadioBox.js          |  7 ++++++-
 apps/documenteditor/main/app/view/FileMenuPanels.js | 12 +++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/common/main/lib/component/RadioBox.js b/apps/common/main/lib/component/RadioBox.js
index 9bfa80f593..38cd828f21 100644
--- a/apps/common/main/lib/component/RadioBox.js
+++ b/apps/common/main/lib/component/RadioBox.js
@@ -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) {
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index c244742443..ae5f956eb5 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -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);});