mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-21 16:10:15 +01:00
Code Issues Projects Releases Wiki Activity

MDL-71603 editor_atto: Focus on the toggled row

Browse Source 
quoted from
https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/expanded/

As a general rule, the toggled element should be right below the toggle
button, so screen readers will find it easily. If that is not the case,
then the focus should be placed inside the element upon toggling it
visible, and back to the initial element upon toggling it invisible.
This commit is contained in:
Shamim Rezaie 2021-06-26 23:43:30 +10:00
parent 90b3d575e3
commit 7029fa056c
12 changed files with 57 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/editor/atto/plugins/collapse/yui/build/moodle-atto_collapse-button/moodle-atto_collapse-button-debug.js vendored
View File

@ -97,12 +97,12 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
if (button.getData(COLLAPSED)) {
this.highlightButtons(COLLAPSE);
this._setVisibility(button, true);
this.toolbar.all(ROWS).item(1).focus();
} else {
this.unHighlightButtons(COLLAPSE);
this._setVisibility(button);
this.buttons[this.name].focus();
}
this.buttons[this.name].focus();
},
/**

2
lib/editor/atto/plugins/collapse/yui/build/moodle-atto_collapse-button/moodle-atto_collapse-button-min.js vendored
View File

@ -1 +1 @@
YUI.add("moodle-atto_collapse-button",function(s,t){var e="atto_collapse",a="showgroups",o="collapse",l="collapsed",n=".atto_group";s.namespace("M.atto_collapse").Button=s.Base.create("button",s.M.editor_atto.EditorPlugin,[],{initializer:function(){var t,i=s.Object.size(this.get("host").get("plugins"));i<=1+parseInt(this.get(a),10)||this.toolbar.all(n).size()>this.get(a)||(t=this.addButton({icon:"icon",iconComponent:e,callback:this._toggle}),this.get("host").on("pluginsloaded",function(t,i){var o,e=[s.Node.create('<div class="atto_toolbar_row"></div>'),s.Node.create('<div class="atto_toolbar_row" tabindex="-1"></div>')];this.toolbar.appendChild(e[0]).insert(e[1],"after"),(o=this.toolbar.all(n)).slice(0,this.get(a)).each(function(t){e[0].appendChild(t)}),o.slice(this.get(a)).each(function(t){e[1].appendChild(t)}),this._setVisibility(i)},this,t))},_toggle:function(t){t.preventDefault();var i=this.buttons[o];i.getData(l)?(this.highlightButtons(o),this._setVisibility(i,!0)):(this.unHighlightButtons(o),this._setVisibility(i)),this.buttons[this.name].focus()},_setVisibility:function(t,i){var o=this.toolbar.all(".atto_toolbar_row").item(1);i?(t.set("title",M.util.get_string("showfewer",e)),o.show(),t.setData(l,!1)):(t.set("title",M.util.get_string("showmore",e)),o.hide(),t.setData(l,!0))}},{ATTRS:{showgroups:{value:3}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
YUI.add("moodle-atto_collapse-button",function(s,t){var e="atto_collapse",a="showgroups",o="collapse",l="collapsed",n=".atto_group",h=".atto_toolbar_row";s.namespace("M.atto_collapse").Button=s.Base.create("button",s.M.editor_atto.EditorPlugin,[],{initializer:function(){var t,i=s.Object.size(this.get("host").get("plugins"));i<=1+parseInt(this.get(a),10)||this.toolbar.all(n).size()>this.get(a)||(t=this.addButton({icon:"icon",iconComponent:e,callback:this._toggle}),this.get("host").on("pluginsloaded",function(t,i){var o,e=[s.Node.create('<div class="atto_toolbar_row"></div>'),s.Node.create('<div class="atto_toolbar_row" tabindex="-1"></div>')];this.toolbar.appendChild(e[0]).insert(e[1],"after"),(o=this.toolbar.all(n)).slice(0,this.get(a)).each(function(t){e[0].appendChild(t)}),o.slice(this.get(a)).each(function(t){e[1].appendChild(t)}),this._setVisibility(i)},this,t))},_toggle:function(t){t.preventDefault();var i=this.buttons[o];i.getData(l)?(this.highlightButtons(o),this._setVisibility(i,!0),this.toolbar.all(h).item(1).focus()):(this.unHighlightButtons(o),this._setVisibility(i),this.buttons[this.name].focus())},_setVisibility:function(t,i){var o=this.toolbar.all(h).item(1);i?(t.set("title",M.util.get_string("showfewer",e)),o.show(),t.setData(l,!1)):(t.set("title",M.util.get_string("showmore",e)),o.hide(),t.setData(l,!0))}},{ATTRS:{showgroups:{value:3}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});

4
lib/editor/atto/plugins/collapse/yui/build/moodle-atto_collapse-button/moodle-atto_collapse-button.js vendored
View File

@ -93,12 +93,12 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
if (button.getData(COLLAPSED)) {
this.highlightButtons(COLLAPSE);
this._setVisibility(button, true);
this.toolbar.all(ROWS).item(1).focus();
} else {
this.unHighlightButtons(COLLAPSE);
this._setVisibility(button);
this.buttons[this.name].focus();
}
this.buttons[this.name].focus();
},
/**

4
lib/editor/atto/plugins/collapse/yui/src/button/js/button.js vendored
View File

@ -95,12 +95,12 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
if (button.getData(COLLAPSED)) {
this.highlightButtons(COLLAPSE);
this._setVisibility(button, true);
this.toolbar.all(ROWS).item(1).focus();
} else {
this.unHighlightButtons(COLLAPSE);
this._setVisibility(button);
this.buttons[this.name].focus();
}
this.buttons[this.name].focus();
},
/**

8
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js vendored
View File

@ -2282,7 +2282,13 @@ EditorToolbarNav.prototype = {
var buttons = this.toolbar.all('button'),
direction = 1,
button,
current = e.target.ancestor('button', true);
current = e.target.ancestor('button', true),
innerButtons = e.target.all('button');
// If we are not on a button and the element we are on contains some buttons, then move between the inner buttons.
if (!current && innerButtons) {
buttons = innerButtons;
}
if (e.keyCode === 37) {
// Moving left so reverse the direction.

4
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js vendored
View File

File diff suppressed because one or more lines are too long

8
lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js vendored
View File

@ -2259,7 +2259,13 @@ EditorToolbarNav.prototype = {
var buttons = this.toolbar.all('button'),
direction = 1,
button,
current = e.target.ancestor('button', true);
current = e.target.ancestor('button', true),
innerButtons = e.target.all('button');
// If we are not on a button and the element we are on contains some buttons, then move between the inner buttons.
if (!current && innerButtons) {
buttons = innerButtons;
}
if (e.keyCode === 37) {
// Moving left so reverse the direction.

8
lib/editor/atto/yui/src/editor/js/toolbar-keyboardnav.js vendored
View File

@ -78,7 +78,13 @@ EditorToolbarNav.prototype = {
var buttons = this.toolbar.all('button'),
direction = 1,
button,
current = e.target.ancestor('button', true);
current = e.target.ancestor('button', true),
innerButtons = e.target.all('button');
// If we are not on a button and the element we are on contains some buttons, then move between the inner buttons.
if (!current && innerButtons) {
buttons = innerButtons;
}
if (e.keyCode === 37) {
// Moving left so reverse the direction.

8
theme/boost/scss/moodle/atto.scss
View File

@ -80,6 +80,14 @@ div.editor_atto_toolbar div.atto_group {
background: #fff;
}
div.editor_atto_toolbar .atto_toolbar_row {
margin: 6px 0 -3px 5px;
display: table;
div.atto_group {
margin: 3px 5px 3px 4px;
}
}
.editor_atto_content img {
resize: both;
overflow: auto;

1
theme/boost/scss/moodle/core.scss
View File

@ -159,6 +159,7 @@ a:not([class]),
.btn-link,
.nav-link,
.editor_atto_toolbar button,
.editor_atto_toolbar .atto_toolbar_row,
[role="button"],
.list-group-item-action,
input[type="checkbox"],

9
theme/boost/style/moodle.css
View File

@ -9786,6 +9786,8 @@ a:not([class]):focus:hover,
.nav-link:focus,
.editor_atto_toolbar button.focus,
.editor_atto_toolbar button:focus,
.editor_atto_toolbar .atto_toolbar_row.focus,
.editor_atto_toolbar .atto_toolbar_row:focus,
[role="button"].focus,
[role="button"]:focus,
.list-group-item-action.focus,
@ -9817,6 +9819,7 @@ button.close:focus,
.btn-link:focus:hover,
.nav-link:focus:hover,
.editor_atto_toolbar button:focus:hover,
.editor_atto_toolbar .atto_toolbar_row:focus:hover,
[role="button"]:focus:hover,
.list-group-item-action:focus:hover,
input[type="checkbox"]:focus:hover,
@ -19687,6 +19690,12 @@ div.editor_atto_toolbar div.atto_group {
margin: 9px 0 0 9px;
background: #fff; }
div.editor_atto_toolbar .atto_toolbar_row {
margin: 6px 0 -3px 5px;
display: table; }
div.editor_atto_toolbar .atto_toolbar_row div.atto_group {
margin: 3px 5px 3px 4px; }
.editor_atto_content img {
resize: both;
overflow: auto; }

9
theme/classic/style/moodle.css
View File

@ -9998,6 +9998,8 @@ a:not([class]):focus:hover,
.nav-link:focus,
.editor_atto_toolbar button.focus,
.editor_atto_toolbar button:focus,
.editor_atto_toolbar .atto_toolbar_row.focus,
.editor_atto_toolbar .atto_toolbar_row:focus,
[role="button"].focus,
[role="button"]:focus,
.list-group-item-action.focus,
@ -10029,6 +10031,7 @@ button.close:focus,
.btn-link:focus:hover,
.nav-link:focus:hover,
.editor_atto_toolbar button:focus:hover,
.editor_atto_toolbar .atto_toolbar_row:focus:hover,
[role="button"]:focus:hover,
.list-group-item-action:focus:hover,
input[type="checkbox"]:focus:hover,
@ -19877,6 +19880,12 @@ div.editor_atto_toolbar div.atto_group {
margin: 9px 0 0 9px;
background: #fff; }
div.editor_atto_toolbar .atto_toolbar_row {
margin: 6px 0 -3px 5px;
display: table; }
div.editor_atto_toolbar .atto_toolbar_row div.atto_group {
margin: 3px 5px 3px 4px; }
.editor_atto_content img {
resize: both;
overflow: auto; }