diff --git a/core/modules/update/templates/update-version.html.twig b/core/modules/update/templates/update-version.html.twig
index 3c5e69ae4f..d41901889f 100644
--- a/core/modules/update/templates/update-version.html.twig
+++ b/core/modules/update/templates/update-version.html.twig
@@ -6,13 +6,13 @@
  * Available variables:
  * - attributes: HTML attributes suitable for a container element.
  * - title: The title of the project.
+ * - core_compatibility_details: Render array of core compatibility details.
+ * - show_download_link: A flag indicating whether the download link should be shown.
  * - version:  A list of data about the latest released version, containing:
  *   - version: The version number.
  *   - date: The date of the release.
  *   - download_link: The URL for the downloadable file.
  *   - release_link: The URL for the release notes.
- *   - core_compatible: A flag indicating whether the release is compatible with the installed core or not?
- *   - core_compatibility_message: A message about core compatibility.
  *
  * @ingroup themeable
  */
@@ -26,7 +26,7 @@
     </div>
     <div class="layout-column layout-column--half">
       <ul class="project-update__version-links">
-        {% if version.core_compatibility_message is empty or version.core_compatible %}
+        {% if show_download_link %}
           <li class="project-update__download-link">
             <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
           </li>
@@ -34,14 +34,9 @@
         <li class="project-update__release-notes-link">
           <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
         </li>
-        {% if version.core_compatibility_message %}
+        {% if core_compatibility_details %}
           <li class="project-update__compatibility-details">
-            <details {% if not version.core_compatible%}open{% endif %}>
-              <summary>
-                {% if version.core_compatible %}{{ 'Compatible'|t }}{% else %}{{ 'Incompatible'|t }}{% endif %}
-              </summary>
-              {{ version.core_compatibility_message }}
-            </details>
+            {{ core_compatibility_details }}
           </li>
         {% endif %}
       </ul>
diff --git a/core/modules/update/tests/src/Functional/UpdateContribTest.php b/core/modules/update/tests/src/Functional/UpdateContribTest.php
index 3d105a3ed1..6d9a752096 100644
--- a/core/modules/update/tests/src/Functional/UpdateContribTest.php
+++ b/core/modules/update/tests/src/Functional/UpdateContribTest.php
@@ -743,7 +743,7 @@ protected function assertCoreCompatibilityMessage($version, $expected_compatibil
       // core it should not have a download link and the details element should
       // be open by default.
       $this->assertTrue($update_compatibility_details_element->hasAttribute('open'));
-      $this->assertSame('Incompatible', $details_summary_element->getText());
+      $this->assertSame('Not compatible', $details_summary_element->getText());
       $this->assertFalse($update_info_element->getParent()->hasLink('Download'));
     }
   }
diff --git a/core/modules/update/update.report.inc b/core/modules/update/update.report.inc
index 92da6780c5..87dab2020c 100644
--- a/core/modules/update/update.report.inc
+++ b/core/modules/update/update.report.inc
@@ -101,6 +101,37 @@ function template_preprocess_update_report(&$variables) {
   }
 }
 
+/**
+ * Prepares variables for update version templates.
+ *
+ * Default template: update-version.html.twig.
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - version: An array of information about the release version.
+ */
+function template_preprocess_update_version(array &$variables) {
+  $version = $variables['version'];
+  $variables['show_download_link'] = !isset($version['core_compatible']) || $version['core_compatible'] === TRUE;
+  $core_compatible = !empty($version['core_compatible']);
+  $core_compatibility_message = $version['core_compatibility_message'] ?? NULL;
+  if ($core_compatibility_message) {
+    $variables['core_compatibility_details'] = [
+      '#type' => 'details',
+      '#title' => $core_compatible ? t('Compatible') : t('Not compatible'),
+      '#open' => !$core_compatible,
+      'message' => [
+        '#markup' => $core_compatibility_message,
+      ],
+      '#attributes' => [
+        'class' => [
+          $core_compatible ? 'compatible' : 'not-compatible',
+        ],
+      ],
+    ];
+  }
+}
+
 /**
  * Prepares variables for update project status templates.
  *
diff --git a/core/themes/claro/templates/admin/update-version.html.twig b/core/themes/claro/templates/admin/update-version.html.twig
index 2c240a34f6..787f691bbc 100644
--- a/core/themes/claro/templates/admin/update-version.html.twig
+++ b/core/themes/claro/templates/admin/update-version.html.twig
@@ -6,13 +6,13 @@
  * Available variables:
  * - attributes: HTML attributes suitable for a container element.
  * - title: The title of the project.
+ * - core_compatibility_details: Render array of core compatibility details.
+ * - show_download_link: A flag indicating whether the download link should be shown.
  * - version:  A list of data about the latest released version, containing:
  *   - version: The version number.
  *   - date: The date of the release.
  *   - download_link: The URL for the downloadable file.
  *   - release_link: The URL for the release notes.
- *   - core_compatible: A flag indicating whether the release is compatible with the installed core or not?
- *   - core_compatibility_message: A message about core compatibility.
  */
 #}
 <div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
@@ -24,7 +24,7 @@
     </div>
     <div class="layout-column layout-column--half">
       <ul class="project-update__version-links">
-        {% if version.core_compatibility_message is empty or version.core_compatible %}
+        {% if show_download_link %}
           <li class="project-update__download-link">
             <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
           </li>
@@ -32,14 +32,9 @@
         <li class="project-update__release-notes-link">
           <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
         </li>
-        {% if version.core_compatibility_message %}
+        {% if core_compatibility_details %}
           <li class="project-update__compatibility-details">
-            <details {% if not version.core_compatible%}open{% endif %}>
-              <summary>
-                {% if version.core_compatible %}{{ 'Compatible'|t }}{% else %}{{ 'Incompatible'|t }}{% endif %}
-              </summary>
-              {{ version.core_compatibility_message }}
-            </details>
+            {{ core_compatibility_details }}
           </li>
         {% endif %}
       </ul>
diff --git a/core/themes/stable/templates/admin/update-version.html.twig b/core/themes/stable/templates/admin/update-version.html.twig
index 34daf0c4f6..356b248557 100644
--- a/core/themes/stable/templates/admin/update-version.html.twig
+++ b/core/themes/stable/templates/admin/update-version.html.twig
@@ -6,13 +6,13 @@
  * Available variables:
  * - attributes: HTML attributes suitable for a container element.
  * - title: The title of the project.
+ * - core_compatibility_details: Render array of core compatibility details.
+ * - show_download_link: A flag indicating whether the download link should be shown.
  * - version:  A list of data about the latest released version, containing:
  *   - version: The version number.
  *   - date: The date of the release.
  *   - download_link: The URL for the downloadable file.
  *   - release_link: The URL for the release notes.
- *   - core_compatible: A flag indicating whether the release is compatible with the installed core or not?
- *   - core_compatibility_message: A message about core compatibility.
  */
 #}
 <div class="{{ attributes.class }} project-update__version"{{ attributes|without('class') }}>
@@ -24,7 +24,7 @@
     </div>
     <div class="layout-column layout-column--half">
       <ul class="project-update__version-links">
-        {% if version.core_compatibility_message is empty or version.core_compatible %}
+        {% if show_download_link %}
           <li class="project-update__download-link">
             <a href="{{ version.download_link }}">{{ 'Download'|t }}</a>
           </li>
@@ -32,14 +32,9 @@
         <li class="project-update__release-notes-link">
           <a href="{{ version.release_link }}">{{ 'Release notes'|t }}</a>
         </li>
-        {% if version.core_compatibility_message %}
+        {% if core_compatibility_details %}
           <li class="project-update__compatibility-details">
-            <details {% if not version.core_compatible%}open{% endif %}>
-              <summary>
-                {% if version.core_compatible %}{{ 'Compatible'|t }}{% else %}{{ 'Incompatible'|t }}{% endif %}
-              </summary>
-              {{ version.core_compatibility_message }}
-            </details>
+            {{ core_compatibility_details }}
           </li>
         {% endif %}
       </ul>