From 917ffbbb345bd3484e65a474234a355eb4fb65ab Mon Sep 17 00:00:00 2001
From: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com>
Date: Mon, 27 Jan 2025 11:36:45 +1300
Subject: [PATCH] FIX Update HTML markup for bootstrap 5 (#11560)

---
 src/Forms/GridField/GridFieldDetailForm_ItemRequest.php       | 4 ++--
 src/Security/PermissionCheckboxSetField.php                   | 4 ++--
 templates/RightLabelledFieldHolder.ss                         | 2 +-
 templates/SilverStripe/Forms/CheckboxField_holder.ss          | 2 +-
 templates/SilverStripe/Forms/CheckboxField_holder_small.ss    | 2 +-
 templates/SilverStripe/Forms/CheckboxSetField.ss              | 2 +-
 templates/SilverStripe/Forms/FieldGroup_holder.ss             | 4 ++--
 templates/SilverStripe/Forms/FormField_holder.ss              | 4 ++--
 templates/SilverStripe/Forms/FormField_holder_small.ss        | 4 ++--
 templates/SilverStripe/Forms/GridField/GridFieldEditButton.ss | 2 +-
 .../Forms/GridField/GridFieldImportButton_Modal.ss            | 4 +---
 templates/SilverStripe/Forms/GridField/GridFieldViewButton.ss | 2 +-
 .../Forms/HTMLEditor/HTMLEditorField_Toolbar_viewfile.ss      | 2 +-
 templates/SilverStripe/Forms/LabelField.ss                    | 2 +-
 templates/SilverStripe/Forms/OptionsetField.ss                | 2 +-
 templates/SilverStripe/Forms/OptionsetField_holder.ss         | 4 ++--
 templates/SilverStripe/Forms/SelectionGroup.ss                | 2 +-
 templates/forms/HtmlEditorField_holder_small.ss               | 4 ++--
 tests/php/ORM/LabelFieldTest.php                              | 2 +-
 19 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/Forms/GridField/GridFieldDetailForm_ItemRequest.php b/src/Forms/GridField/GridFieldDetailForm_ItemRequest.php
index 34e060412f4..1ff678b2074 100644
--- a/src/Forms/GridField/GridFieldDetailForm_ItemRequest.php
+++ b/src/Forms/GridField/GridFieldDetailForm_ItemRequest.php
@@ -352,11 +352,11 @@ protected function getCreateContext()
     protected function getRightGroupField()
     {
         $rightGroup = CompositeField::create()->setName('RightGroup');
-        $rightGroup->addExtraClass('ml-auto');
+        $rightGroup->addExtraClass('ms-auto');
         $rightGroup->setFieldHolderTemplate(get_class($rightGroup) . '_holder_buttongroup');
 
         $previousAndNextGroup = CompositeField::create()->setName('PreviousAndNextGroup');
-        $previousAndNextGroup->addExtraClass('btn-group--circular mr-2');
+        $previousAndNextGroup->addExtraClass('btn-group--circular me-2');
         $previousAndNextGroup->setFieldHolderTemplate(CompositeField::class . '_holder_buttongroup');
 
         $component = $this->gridField->getConfig()->getComponentByType(GridFieldDetailForm::class);
diff --git a/src/Security/PermissionCheckboxSetField.php b/src/Security/PermissionCheckboxSetField.php
index 7592dc68170..e0dddecd142 100644
--- a/src/Security/PermissionCheckboxSetField.php
+++ b/src/Security/PermissionCheckboxSetField.php
@@ -253,7 +253,7 @@ public function Field($properties = [])
                         $options .= "<li class=\"$extraClass\">"
                             . "<input id=\"$itemID\"$disabled name=\"$this->name[$code]\" type=\"checkbox\""
                             . " value=\"$code\"$checked class=\"checkbox\" />"
-                            . "<label {$title}for=\"$itemID\">"
+                            . "<label class=\"form-label\" {$title}for=\"$itemID\">"
                             . "<span class=\"font-icon-$icon\"></span>"
                             . "{$value}{$inheritMessage}</label>"
                             . "</li>\n";
@@ -261,7 +261,7 @@ public function Field($properties = [])
                         $options .= "<li class=\"$extraClass\">"
                             . "<input id=\"$itemID\"$disabled name=\"$this->name[$code]\" type=\"checkbox\""
                             . " value=\"$code\"$checked class=\"checkbox\" />"
-                            . "<label {$title}for=\"$itemID\">{$value}{$inheritMessage}</label>"
+                            . "<label class=\"form-label\" {$title}for=\"$itemID\">{$value}{$inheritMessage}</label>"
                             . "</li>\n";
                     }
                 }
diff --git a/templates/RightLabelledFieldHolder.ss b/templates/RightLabelledFieldHolder.ss
index 574ab26d429..fef2b955233 100644
--- a/templates/RightLabelledFieldHolder.ss
+++ b/templates/RightLabelledFieldHolder.ss
@@ -1,5 +1,5 @@
 <p id="$Name" class="field $Type">
 	$Field
-	<label class="right" for="$id">$Title</label>
+	<label class="form-label right" for="$id">$Title</label>
 	<% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
 </p>
diff --git a/templates/SilverStripe/Forms/CheckboxField_holder.ss b/templates/SilverStripe/Forms/CheckboxField_holder.ss
index 1114073b7d9..d9b216c9d6c 100644
--- a/templates/SilverStripe/Forms/CheckboxField_holder.ss
+++ b/templates/SilverStripe/Forms/CheckboxField_holder.ss
@@ -1,6 +1,6 @@
 <div id="$HolderID" class="field<% if extraClass %> $extraClass<% end_if %>">
 	$Field
-    <label class="right" for="$ID">$Title<% if $RightTitle %> $RightTitle<% end_if %></label>
+    <label class="form-label right" for="$ID">$Title<% if $RightTitle %> $RightTitle<% end_if %></label>
 	<% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
 	<% if $Description %><span class="description">$Description</span><% end_if %>
 </div>
diff --git a/templates/SilverStripe/Forms/CheckboxField_holder_small.ss b/templates/SilverStripe/Forms/CheckboxField_holder_small.ss
index 5d5c19e7327..58c34c0286e 100644
--- a/templates/SilverStripe/Forms/CheckboxField_holder_small.ss
+++ b/templates/SilverStripe/Forms/CheckboxField_holder_small.ss
@@ -1,5 +1,5 @@
 $Field
 
 <% if $Title %>
-	<label class="checkboxfield-small" <% if $ID %>for="$ID"<% end_if %>>$Title<% if $RightTitle %> $RightTitle<% end_if %></label>
+	<label class="form-label checkboxfield-small" <% if $ID %>for="$ID"<% end_if %>>$Title<% if $RightTitle %> $RightTitle<% end_if %></label>
 <% end_if %>
diff --git a/templates/SilverStripe/Forms/CheckboxSetField.ss b/templates/SilverStripe/Forms/CheckboxSetField.ss
index 75d1a62b975..76cbf73c74a 100644
--- a/templates/SilverStripe/Forms/CheckboxSetField.ss
+++ b/templates/SilverStripe/Forms/CheckboxSetField.ss
@@ -3,7 +3,7 @@
 		<% loop $Options %>
 			<li class="$Class" role="$Role">
 				<input id="$ID" class="checkbox" name="$Name" type="checkbox" value="$Value.ATT"<% if $isChecked %> checked="checked"<% end_if %><% if $isDisabled %> disabled="disabled"<% end_if %> />
-				<label for="$ID">$Title</label>
+				<label class="form-label" for="$ID">$Title</label>
 			</li>
 		<% end_loop %>
 	<% else %>
diff --git a/templates/SilverStripe/Forms/FieldGroup_holder.ss b/templates/SilverStripe/Forms/FieldGroup_holder.ss
index 19b45bb1689..9b16bf0b6c1 100644
--- a/templates/SilverStripe/Forms/FieldGroup_holder.ss
+++ b/templates/SilverStripe/Forms/FieldGroup_holder.ss
@@ -1,5 +1,5 @@
 <div <% if $Name %>id="$Name"<% end_if %> class="field <% if $extraClass %>$extraClass<% end_if %>">
-	<% if $Title %><label class="left">$Title</label><% end_if %>
+	<% if $Title %><label class="form-label left">$Title</label><% end_if %>
 
 	<div class="middleColumn fieldgroup<% if $Zebra %> fieldgroup-$Zebra<% end_if %>">
 		<% loop $FieldList %>
@@ -8,7 +8,7 @@
 			</div>
 		<% end_loop %>
 	</div>
-	<% if $RightTitle %><label class="right">$RightTitle</label><% end_if %>
+	<% if $RightTitle %><label class="form-label right">$RightTitle</label><% end_if %>
 	<% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
 	<% if $Description %><span class="description">$Description</span><% end_if %>
 </div>
diff --git a/templates/SilverStripe/Forms/FormField_holder.ss b/templates/SilverStripe/Forms/FormField_holder.ss
index df878d9ac4f..b108411a2e6 100644
--- a/templates/SilverStripe/Forms/FormField_holder.ss
+++ b/templates/SilverStripe/Forms/FormField_holder.ss
@@ -1,9 +1,9 @@
 <div id="$HolderID" class="field<% if $extraClass %> $extraClass<% end_if %>">
-	<% if $Title %><label class="left" for="$ID">$Title</label><% end_if %>
+	<% if $Title %><label class="form-label left" for="$ID">$Title</label><% end_if %>
 	<div class="middleColumn">
 		$Field
 	</div>
-	<% if $RightTitle %><label class="right" for="$ID">$RightTitle</label><% end_if %>
+	<% if $RightTitle %><label class="form-label right" for="$ID">$RightTitle</label><% end_if %>
 	<% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
 	<% if $Description %><span class="description">$Description</span><% end_if %>
 </div>
diff --git a/templates/SilverStripe/Forms/FormField_holder_small.ss b/templates/SilverStripe/Forms/FormField_holder_small.ss
index 15b3280d573..df5edae6007 100644
--- a/templates/SilverStripe/Forms/FormField_holder_small.ss
+++ b/templates/SilverStripe/Forms/FormField_holder_small.ss
@@ -1,5 +1,5 @@
 <div class="fieldholder-small<% if $extraClass %> $extraClass<% end_if %>" id="$HolderID.ATT">
-	<% if $Title %><label class="fieldholder-small-label" <% if $ID %>for="$ID"<% end_if %>>$Title</label><% end_if %>
+	<% if $Title %><label class="form-label fieldholder-small-label" <% if $ID %>for="$ID"<% end_if %>>$Title</label><% end_if %>
 	$Field
-	<% if $RightTitle %><label class="right fieldholder-small-label" <% if $ID %>for="$ID"<% end_if %>>$RightTitle</label><% end_if %>
+	<% if $RightTitle %><label class="form-label right fieldholder-small-label" <% if $ID %>for="$ID"<% end_if %>>$RightTitle</label><% end_if %>
 </div>
diff --git a/templates/SilverStripe/Forms/GridField/GridFieldEditButton.ss b/templates/SilverStripe/Forms/GridField/GridFieldEditButton.ss
index 42f39d3dd6e..df850e6330e 100644
--- a/templates/SilverStripe/Forms/GridField/GridFieldEditButton.ss
+++ b/templates/SilverStripe/Forms/GridField/GridFieldEditButton.ss
@@ -2,5 +2,5 @@
     class="grid-field__icon-action {$ExtraClass} action action-detail edit-link"
     href="$Link" title="<%t SilverStripe\\Forms\\GridField\\GridFieldEditButton.EDIT 'Edit' %>"
 >
-    <span class="sr-only"><%t SilverStripe\\Forms\\GridField\\GridFieldEditButton.EDIT 'Edit' %></span>
+    <span class="visually-hidden"><%t SilverStripe\\Forms\\GridField\\GridFieldEditButton.EDIT 'Edit' %></span>
 </a>
diff --git a/templates/SilverStripe/Forms/GridField/GridFieldImportButton_Modal.ss b/templates/SilverStripe/Forms/GridField/GridFieldImportButton_Modal.ss
index 853913e036e..4d66a70bfdf 100644
--- a/templates/SilverStripe/Forms/GridField/GridFieldImportButton_Modal.ss
+++ b/templates/SilverStripe/Forms/GridField/GridFieldImportButton_Modal.ss
@@ -5,9 +5,7 @@
                 <% if $ImportModalTitle %>
                     <h2 class="modal-title">$ImportModalTitle</h2>
                 <% end_if %>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">×</span>
-                </button>
+                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <% if $ImportIframe %>
diff --git a/templates/SilverStripe/Forms/GridField/GridFieldViewButton.ss b/templates/SilverStripe/Forms/GridField/GridFieldViewButton.ss
index 45c5a2993be..8422b59a5d6 100644
--- a/templates/SilverStripe/Forms/GridField/GridFieldViewButton.ss
+++ b/templates/SilverStripe/Forms/GridField/GridFieldViewButton.ss
@@ -1,3 +1,3 @@
 <a class="grid-field__icon-action font-icon-right-open btn--icon-large action action-detail view-link action-menu--handled" href="$Link">
-    <span class="sr-only">View</span>
+    <span class="visually-hidden">View</span>
 </a>
diff --git a/templates/SilverStripe/Forms/HTMLEditor/HTMLEditorField_Toolbar_viewfile.ss b/templates/SilverStripe/Forms/HTMLEditor/HTMLEditorField_Toolbar_viewfile.ss
index b7661c84967..0e8f2c8a3e8 100644
--- a/templates/SilverStripe/Forms/HTMLEditor/HTMLEditorField_Toolbar_viewfile.ss
+++ b/templates/SilverStripe/Forms/HTMLEditor/HTMLEditorField_Toolbar_viewfile.ss
@@ -10,7 +10,7 @@
 	</div>
 
 	<div class="ss-uploadfield-item-info">
-		<label class="ss-uploadfield-item-name">
+		<label class="form-label ss-uploadfield-item-name">
 			<span class="name" title="$Name">
 				$Name
 			</span>
diff --git a/templates/SilverStripe/Forms/LabelField.ss b/templates/SilverStripe/Forms/LabelField.ss
index 181751577c0..ae86fc13322 100644
--- a/templates/SilverStripe/Forms/LabelField.ss
+++ b/templates/SilverStripe/Forms/LabelField.ss
@@ -1 +1 @@
-<label id="$ID" class="$extraClass">$Title</label>
+<label id="$ID" class="form-label $extraClass">$Title</label>
diff --git a/templates/SilverStripe/Forms/OptionsetField.ss b/templates/SilverStripe/Forms/OptionsetField.ss
index 35d8f628628..488986037f5 100644
--- a/templates/SilverStripe/Forms/OptionsetField.ss
+++ b/templates/SilverStripe/Forms/OptionsetField.ss
@@ -2,7 +2,7 @@
 	<% loop $Options %>
 		<li class="$Class" role="$Role">
 			<input id="$ID" class="radio" name="$Name" type="radio" value="$Value"<% if $isChecked %> checked<% end_if %><% if $isDisabled %> disabled<% end_if %> <% if $Up.Required %>required<% end_if %> />
-			<label for="$ID">$Title</label>
+			<label class="form-label" for="$ID">$Title</label>
 		</li>
 	<% end_loop %>
 </ul>
diff --git a/templates/SilverStripe/Forms/OptionsetField_holder.ss b/templates/SilverStripe/Forms/OptionsetField_holder.ss
index dd566be383f..2ef3aa387fe 100644
--- a/templates/SilverStripe/Forms/OptionsetField_holder.ss
+++ b/templates/SilverStripe/Forms/OptionsetField_holder.ss
@@ -1,9 +1,9 @@
 <div id="$HolderID" class="field<% if $extraClass %> $extraClass<% end_if %>">
-	<% if $Title %><label class="left">$Title</label><% end_if %>
+	<% if $Title %><label class="form-label left">$Title</label><% end_if %>
 	<div class="middleColumn">
 		$Field
 	</div>
-	<% if $RightTitle %><label class="right">$RightTitle</label><% end_if %>
+	<% if $RightTitle %><label class="form-label right">$RightTitle</label><% end_if %>
 	<% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
 	<% if $Description %><span class="description">$Description</span><% end_if %>
 </div>
diff --git a/templates/SilverStripe/Forms/SelectionGroup.ss b/templates/SilverStripe/Forms/SelectionGroup.ss
index f000604a8bd..9c80931dcf9 100644
--- a/templates/SilverStripe/Forms/SelectionGroup.ss
+++ b/templates/SilverStripe/Forms/SelectionGroup.ss
@@ -13,7 +13,7 @@
 	<ul class="SelectionGroup<% if extraClass %> $extraClass<% end_if %>">
 	<% loop $FieldSet %>
 		<li <% if Selected %>class="selected"<% end_if %>>
-			<label>{$RadioButton} {$RadioLabel}</label>
+			<label class="form-label">{$RadioButton} {$RadioLabel}</label>
 			<% if $FieldList %>
 				$FieldHolder
 			<% end_if %>
diff --git a/templates/forms/HtmlEditorField_holder_small.ss b/templates/forms/HtmlEditorField_holder_small.ss
index 21eec8dc53d..87035162910 100644
--- a/templates/forms/HtmlEditorField_holder_small.ss
+++ b/templates/forms/HtmlEditorField_holder_small.ss
@@ -1,5 +1,5 @@
 <div class="fieldholder-small field htmleditor">
-    <% if $Title %><label class="fieldholder-small-label" <% if $ID %>for="$ID"<% end_if %>>$Title</label><% end_if %>
+    <% if $Title %><label class="form-label fieldholder-small-label" <% if $ID %>for="$ID"<% end_if %>>$Title</label><% end_if %>
     $Field
-    <% if $RightTitle %><label class="right fieldholder-small-label" <% if $ID %>for="$ID"<% end_if %>>$RightTitle</label><% end_if %>
+    <% if $RightTitle %><label class="form-label right fieldholder-small-label" <% if $ID %>for="$ID"<% end_if %>>$RightTitle</label><% end_if %>
 </div>
diff --git a/tests/php/ORM/LabelFieldTest.php b/tests/php/ORM/LabelFieldTest.php
index e1170ac612e..e359ce7c5cd 100644
--- a/tests/php/ORM/LabelFieldTest.php
+++ b/tests/php/ORM/LabelFieldTest.php
@@ -11,6 +11,6 @@ class LabelFieldTest extends SapphireTest
     public function testFieldHasNoNameAttribute()
     {
         $field = new LabelField('MyName', 'MyTitle');
-        $this->assertEquals('<label id="MyName" class="readonly">MyTitle</label>', trim($field->Field()));
+        $this->assertEquals('<label id="MyName" class="form-label readonly">MyTitle</label>', trim($field->Field()));
     }
 }