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

[common] Add aria attrs for states of button for screen readers

Browse Source
This commit is contained in:
Julia.Svinareva
2024-01-30 21:36:04 +03:00
parent c0bafcbfb7
commit ff4adc1955
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/common/main/lib/component/Button.js
View File

@ -658,6 +658,14 @@ define([
}
});
}
if (me.enableToggle && !me.menu) {
$('button', el).attr('aria-pressed', !!me.pressed)
}
if (me.menu) {
$('[data-toggle^=dropdown]', el).attr('aria-haspopup', 'menu');
}
}
me.rendered = true;
@ -691,8 +699,10 @@ define([
this.pressed = state;
if (this.cmpEl)
if (this.cmpEl) {
this.cmpEl.attr('aria-pressed', state);
this.cmpEl.trigger('button.internal.active', [state]);
}
if (!suppressEvent)
this.trigger('toggle', this, state);

6
apps/documenteditor/main/app/template/StatusBar.template
View File

@ -27,10 +27,10 @@
<button id="status-btn-select-tool" type="button" class="btn small btn-toolbar hide-select-tools margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-select-tool">&nbsp;</i></button>
<button id="status-btn-hand-tool" type="button" class="btn small btn-toolbar hide-select-tools margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-hand-tool">&nbsp;</i></button>
<div class="separator short hide-select-tools"></div>
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</i></button>
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar margin-top-small" aria-pressed="false" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</i></button>
<button id="btn-zoom-down" type="button" class="btn small btn-toolbar margin-top-small"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>
<div class="cnt-zoom">
<div class="cnt-zoom" role="button" aria-haspopup="menu">
<div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top">
<label id="label-zoom" class="status-label">Zoom 100%</label>
</div>