Refactored grid field nested form link to be a button with aria-attributes,
for better accessibility.
This commit is contained in:
parent
46e5cccdb4
commit
1ad6acbb84
|
@ -517,7 +517,7 @@
|
||||||
/**
|
/**
|
||||||
* GridFieldNestedForm
|
* GridFieldNestedForm
|
||||||
*/
|
*/
|
||||||
$('.grid-field .col-listChildrenLink a').entwine({
|
$('.grid-field .col-listChildrenLink button').entwine({
|
||||||
onclick: function(e) {
|
onclick: function(e) {
|
||||||
let gridField = $(this).closest('.grid-field');
|
let gridField = $(this).closest('.grid-field');
|
||||||
let currState = gridField.getState();
|
let currState = gridField.getState();
|
||||||
|
@ -552,7 +552,7 @@
|
||||||
}
|
}
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
url: $(this).attr('href'),
|
url: $(this).attr('data-url'),
|
||||||
data: data,
|
data: data,
|
||||||
headers: {
|
headers: {
|
||||||
'X-Pjax': pjaxTarget
|
'X-Pjax': pjaxTarget
|
||||||
|
@ -572,6 +572,7 @@
|
||||||
}
|
}
|
||||||
$(this).removeClass('font-icon-right-dir');
|
$(this).removeClass('font-icon-right-dir');
|
||||||
$(this).addClass('font-icon-down-dir');
|
$(this).addClass('font-icon-down-dir');
|
||||||
|
$(this).attr('aria-expanded', 'true');
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
|
@ -580,6 +581,7 @@
|
||||||
$(this).closest('tr').next('.nested-gridfield').hide();
|
$(this).closest('tr').next('.nested-gridfield').hide();
|
||||||
$(this).removeClass('font-icon-down-dir');
|
$(this).removeClass('font-icon-down-dir');
|
||||||
$(this).addClass('font-icon-right-dir');
|
$(this).addClass('font-icon-right-dir');
|
||||||
|
$(this).attr('aria-expanded', 'false');
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
|
@ -1,4 +1,10 @@
|
||||||
<a class="btn btn-secondary btn--no-text btn--icon-large <% if $Toggle == 'open' %>font-icon-down-dir<% else %>font-icon-right-dir<% end_if %> cms-panel-link list-children-link" data-pjax-target="$PjaxFragment" href="$Link" data-toggle="$ToggleLink"></a>
|
<button
|
||||||
|
class="btn btn-secondary btn--no-text btn--icon-large <% if $Toggle == 'open' %>font-icon-down-dir<% else %>font-icon-right-dir<% end_if %> cms-panel-link list-children-link"
|
||||||
|
aria-expanded="<% if $Toggle == 'open' %>true<% else %>false<% end_if %>"
|
||||||
|
data-pjax-target="$PjaxFragment"
|
||||||
|
data-url="$Link"
|
||||||
|
data-toggle="$ToggleLink"
|
||||||
|
></button>
|
||||||
<% if $Toggle == 'open' %>
|
<% if $Toggle == 'open' %>
|
||||||
$NestedField
|
$NestedField
|
||||||
<% else %>
|
<% else %>
|
||||||
|
|
Loading…
Reference in New Issue