Skip to content

Commit

Permalink
[common] Adjust combobox component for screen readers
Browse files Browse the repository at this point in the history
  • Loading branch information
@JuliaSvinareva
JuliaSvinareva committed Feb 22, 2024
1 parent f7df00d commit a76c0be
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 25 deletions.
34 changes: 17 additions & 17 deletions apps/common/main/lib/component/ComboBorderSize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,17 +76,17 @@ define([
Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<div class="form-control" style="<%= style %>" role="combobox" aria-expanded="false" aria-controls="<%= id %>-menu" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="img-line"><svg><use xlink:href="#half-pt"></use></svg></i>',
'<span class="text"></span>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<ul id="<%= id %>-menu" class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<li id="<%= item.id %>" data-value="<%= item.value %>" role="option"><a tabindex="-1" type="menuitem">',
'<span><%= item.displayValue %></span>',
'<% if(item.imgId!==undefined) { %>',
'<span class="border-line">',
Expand Down Expand Up @@ -188,13 +188,13 @@ define([
Common.UI.ComboBorderSizeEditable = Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control text" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<input type="text" class="form-control text" role="combobox" aria-expanded="false" aria-controls="<%= id %>-menu" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<ul id="<%= id %>-menu" class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<li id="<%= item.id %>" data-value="<%= item.value %>" role="option"><a tabindex="-1" type="menuitem">',
'<% if (!isRTL) { %>',
'<span><%= item.displayValue %>' + '</span>',
'<% if (item.imgId!==undefined) { %>',
Expand Down Expand Up @@ -255,16 +255,16 @@ define([
Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({
template: _.template([
'<div class="input-group combobox combo-border-size combo-border-type input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<div class="form-control" style="<%= style %>" role="combobox" aria-expanded="false" aria-controls="<%= id %>-menu" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="img-line"><svg><use xlink:href="#solid"></use></svg></i>',
'</div>',
'<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<ul id="<%= id %>-menu" class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
'<li id="<%= item.id %>" data-value="<%= item.value %>" role="option"><a tabindex="-1" type="menuitem">',
'<% if (item.imgId!==undefined) { %>',
'<span>',
'<svg><use xlink:href="#<%= item.imgId %>"></use></svg>',
Expand Down Expand Up @@ -329,18 +329,18 @@ define([
Common.UI.ComboBoxColor = Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<div class="input-group combobox combo-color combobox-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>">',
'<div class="form-control" style="<%= style %>" role="combobox" aria-expanded="false" aria-controls="<%= id %>-menu">',
'<div></div>',
'</div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<ul id="<%= id %>-menu" class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<% if (item.value==-1) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<li id="<%= item.id %>" data-value="<%= item.value %>" role="option"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% } else { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<li id="<%= item.id %>" data-value="<%= item.value %>" role="option">',
'<a tabindex="-1" type="menuitem"><div style="<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
'</li>',
'<% } %>',
Expand Down Expand Up @@ -471,18 +471,18 @@ define([
Common.UI.ComboBoxIcons= Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<div class="input-group combobox combobox-icons combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>">',
'<div class="form-control" style="<%= style %>" role="combobox" aria-expanded="false" aria-controls="<%= id %>-menu">',
'<div></div>',
'</div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<ul id="<%= id %>-menu" class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<% if (item.value==-1) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<li id="<%= item.id %>" data-value="<%= item.value %>" role="option"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% } else { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>">',
'<li id="<%= item.id %>" data-value="<%= item.value %>" role="option">',
'<a tabindex="-1" type="menuitem">',
'<% _.each(item.data.iconSet, function(icon) { %>',
'<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>">',
Expand Down
13 changes: 10 additions & 3 deletions apps/common/main/lib/component/ComboBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,13 @@ define([

template: _.template([
'<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" spellcheck="false" placeholder="<%= placeHolder %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" data-move-focus-only-tab="true">',
'<input type="text" class="form-control" spellcheck="false" placeholder="<%= placeHolder %>" role="combobox" aria-controls="<%= id %>-menu" aria-expanded="false" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>" data-move-focus-only-tab="true">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>',
'</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<ul id="<%= id %>-menu" class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%- item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<li id="<%= item.id %>" data-value="<%- item.value %>" role="option"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% }); %>',
'</ul>',
'</span>'
Expand Down Expand Up @@ -253,6 +253,9 @@ define([
this.setDefaultSelection();

this.listenTo(this.store, 'reset', this.onResetItems);

if (this.options.ariaLabel)
this.cmpEl.find('.form-control').attr('aria-label', this.options.ariaLabel);
}

me.rendered = true;
Expand Down Expand Up @@ -291,6 +294,7 @@ define([

closeMenu: function() {
this.cmpEl.removeClass('open');
this.cmpEl.find('.form-control').attr('aria-expanded', 'false');
},

isMenuOpen: function() {
Expand Down Expand Up @@ -356,6 +360,8 @@ define([
if (this.scroller)
this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible});

this.cmpEl.find('.form-control').attr('aria-expanded', 'true');

this.trigger('show:after', this, e, {fromKeyDown: e===undefined});
this._search = {};
},
Expand Down Expand Up @@ -397,6 +403,7 @@ define([

onAfterHideMenu: function(e, isFromInputControl) {
this.cmpEl.find('.dropdown-toggle').blur();
this.cmpEl.find('.form-control').attr('aria-expanded', 'false');
this.trigger('hide:after', this, e, isFromInputControl);
Common.NotificationCenter.trigger('menu:hide', this, isFromInputControl);
if (this.options.takeFocusOnClose) {
Expand Down
6 changes: 4 additions & 2 deletions apps/documenteditor/main/app/view/ParagraphSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,8 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintOffset: 'big',
ariaLabel: this.strLineHeight
});
this.cmbLineRule.setValue('');
this.lockedControls.push(this.cmbLineRule);
Expand Down Expand Up @@ -242,7 +243,8 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintOffset: 'big',
ariaLabel: this.strIndent + ' ' + this.strIndentsSpecial
});
this.cmbSpecial.setValue('');
this.lockedControls.push(this.cmbSpecial);
Expand Down
9 changes: 6 additions & 3 deletions apps/documenteditor/main/app/view/ShapeSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1331,7 +1331,8 @@ define([
data: this._arrFillSrc,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintOffset: 'big',
ariaLabel: this.strFill
});
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
Expand Down Expand Up @@ -1623,7 +1624,8 @@ define([
txtNoBorders: this.txtNoBorders,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintOffset: 'big',
ariaLabel: this.strStroke + ' ' + this.strSize
})
.on('selected', _.bind(this.onBorderSizeSelect, this))
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
Expand All @@ -1639,7 +1641,8 @@ define([
menuStyle: 'min-width: 93px;',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
dataHintOffset: 'big',
ariaLabel: this.strStroke + ' ' + this.strType
}).on('selected', _.bind(this.onBorderTypeSelect, this))
.on('combo:blur', _.bind(this.onComboBlur, this, false));
this.BorderType = Asc.c_oDashType.solid;
Expand Down

0 comments on commit a76c0be

Please sign in to comment.