From 1ad6acbb84f235e29fc364e28fe2ee332a590eb9 Mon Sep 17 00:00:00 2001
From: Niklas Forsdahl <niklas@creamarketing.com>
Date: Wed, 24 Apr 2024 11:13:09 +0300
Subject: [PATCH] Refactored grid field nested form link to be a button with
 aria-attributes, for better accessibility.

---
 javascript/GridFieldExtensions.js                         | 6 ++++--
 .../Symbiote/GridFieldExtensions/GridFieldNestedForm.ss   | 8 +++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/javascript/GridFieldExtensions.js b/javascript/GridFieldExtensions.js
index 644fb13..3500cc9 100644
--- a/javascript/GridFieldExtensions.js
+++ b/javascript/GridFieldExtensions.js
@@ -517,7 +517,7 @@
 		/**
 		 * GridFieldNestedForm
 		 */
-		$('.grid-field .col-listChildrenLink a').entwine({
+		$('.grid-field .col-listChildrenLink button').entwine({
 			onclick: function(e) {
 				let gridField = $(this).closest('.grid-field');
 				let currState = gridField.getState();
@@ -552,7 +552,7 @@
 						}
 						$.ajax({
 							type: 'POST',
-							url: $(this).attr('href'),
+							url: $(this).attr('data-url'),
 							data: data,
 							headers: {
 								'X-Pjax': pjaxTarget
@@ -572,6 +572,7 @@
 					}
 					$(this).removeClass('font-icon-right-dir');
 					$(this).addClass('font-icon-down-dir');
+					$(this).attr('aria-expanded', 'true');
 				}
 				else {
 					$.ajax({
@@ -580,6 +581,7 @@
 					$(this).closest('tr').next('.nested-gridfield').hide();
 					$(this).removeClass('font-icon-down-dir');
 					$(this).addClass('font-icon-right-dir');
+					$(this).attr('aria-expanded', 'false');
 				}
 				e.preventDefault();
 				e.stopPropagation();
diff --git a/templates/Symbiote/GridFieldExtensions/GridFieldNestedForm.ss b/templates/Symbiote/GridFieldExtensions/GridFieldNestedForm.ss
index 0e2f09d..bd5c4f1 100755
--- a/templates/Symbiote/GridFieldExtensions/GridFieldNestedForm.ss
+++ b/templates/Symbiote/GridFieldExtensions/GridFieldNestedForm.ss
@@ -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' %>
 	$NestedField
 <% else %>