From deefacb388719dd14eb9327e2eb7d88334310028 Mon Sep 17 00:00:00 2001
From: Ravi <13908473+rkdfx@users.noreply.github.com>
Date: Sat, 9 May 2026 19:10:28 +0530
Subject: [PATCH] fix(a11y): use <strong> for model titles to convey emphasis
 semantically

Signed-off-by: Ravi <13908473+rkdfx@users.noreply.github.com>
---
 .../json-schema-2020-12/components/keywords/Title/Title.jsx | 2 +-
 src/core/plugins/json-schema-5/components/array-model.jsx   | 4 ++--
 src/core/plugins/json-schema-5/components/model.jsx         | 4 ++--
 src/core/plugins/json-schema-5/components/models.jsx        | 4 ++--
 src/core/plugins/json-schema-5/components/object-model.jsx  | 4 ++--
 .../plugins/json-schema-5/components/primitive-model.jsx    | 4 ++--
 src/style/_models.scss                                      | 1 +
 test/e2e-selenium/scenarios/bugs/4536.js                    | 6 +++---
 8 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx b/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx
index 8bd8863329f..5cbec01ce29 100644
--- a/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx
+++ b/src/core/plugins/json-schema-2020-12/components/keywords/Title/Title.jsx
@@ -13,7 +13,7 @@ const Title = ({ title = "", schema }) => {
 
   if (!renderedTitle) return null
 
-  return <div className="json-schema-2020-12__title">{renderedTitle}</div>
+  return <strong className="json-schema-2020-12__title">{renderedTitle}</strong>
 }
 
 Title.propTypes = {
diff --git a/src/core/plugins/json-schema-5/components/array-model.jsx b/src/core/plugins/json-schema-5/components/array-model.jsx
index 3c5335d6d0b..dd04208950a 100644
--- a/src/core/plugins/json-schema-5/components/array-model.jsx
+++ b/src/core/plugins/json-schema-5/components/array-model.jsx
@@ -38,9 +38,9 @@ export default class ArrayModel extends Component {
     const Link = getComponent("Link")
 
     const titleEl = title &&
-      <span className="model-title">
+      <strong className="model-title">
         <span className="model-title__text">{ title }</span>
-      </span>
+      </strong>
 
     /*
     Note: we set `name={null}` in <Model> below because we don't want
diff --git a/src/core/plugins/json-schema-5/components/model.jsx b/src/core/plugins/json-schema-5/components/model.jsx
index 1fb70d386bf..b3c9eac18a8 100644
--- a/src/core/plugins/json-schema-5/components/model.jsx
+++ b/src/core/plugins/json-schema-5/components/model.jsx
@@ -86,10 +86,10 @@ export default class Model extends ImmutablePureComponent {
     }
 
     if(!schema) {
-      return <span className="model model-title">
+      return <strong className="model model-title">
               <span className="model-title__text">{ displayName || name }</span>
               {!$ref && <RollingLoadSVG height="20px" width="20px" />}
-            </span>
+            </strong>
     }
 
     const deprecated = specSelectors.isOAS3() && schema.get("deprecated")
diff --git a/src/core/plugins/json-schema-5/components/models.jsx b/src/core/plugins/json-schema-5/components/models.jsx
index e9023f36f3e..5f185ca090f 100644
--- a/src/core/plugins/json-schema-5/components/models.jsx
+++ b/src/core/plugins/json-schema-5/components/models.jsx
@@ -109,9 +109,9 @@ export default class Models extends Component {
               includeWriteOnly = {true}/>
 
             const title = <span className="model-box">
-              <span className="model model-title">
+              <strong className="model model-title">
                 {displayName}
-              </span>
+              </strong>
             </span>
 
             return <div id={ `model-${name}` } className="model-container" key={ `models-section-${name}` }
diff --git a/src/core/plugins/json-schema-5/components/object-model.jsx b/src/core/plugins/json-schema-5/components/object-model.jsx
index c3560c5a06f..b6b9f6ebf20 100644
--- a/src/core/plugins/json-schema-5/components/object-model.jsx
+++ b/src/core/plugins/json-schema-5/components/object-model.jsx
@@ -100,7 +100,7 @@ export default class ObjectModel extends Component {
     const not = specSelectors.isOAS3() ? schema.get("not") : null
 
     const titleEl = title && (
-      <span className="model-title">
+      <strong className="model-title">
         {isRef && schema.get("$$ref") && (
           <span
             className={classNames("model-hint", {
@@ -111,7 +111,7 @@ export default class ObjectModel extends Component {
           </span>
         )}
         <span className="model-title__text">{title}</span>
-      </span>
+      </strong>
     )
 
     return (
diff --git a/src/core/plugins/json-schema-5/components/primitive-model.jsx b/src/core/plugins/json-schema-5/components/primitive-model.jsx
index 97ae2e0c645..592b97716fb 100644
--- a/src/core/plugins/json-schema-5/components/primitive-model.jsx
+++ b/src/core/plugins/json-schema-5/components/primitive-model.jsx
@@ -69,9 +69,9 @@ export default class Primitive extends Component {
     const ModelExtensions = getComponent("ModelExtensions")
 
     const titleEl = title && (
-      <span className="model-title">
+      <strong className="model-title">
         <span className="model-title__text">{title}</span>
-      </span>
+      </strong>
     )
 
     return (
diff --git a/src/style/_models.scss b/src/style/_models.scss
index 7a3b3a12324..6b480a921d3 100644
--- a/src/style/_models.scss
+++ b/src/style/_models.scss
@@ -285,6 +285,7 @@ section.models {
 
 .model-title {
   font-size: 16px;
+  font-weight: inherit;
 
   @include type.text_headline($section-models-model-title-font-color);
 
diff --git a/test/e2e-selenium/scenarios/bugs/4536.js b/test/e2e-selenium/scenarios/bugs/4536.js
index e47273116a0..3d40b1c614f 100644
--- a/test/e2e-selenium/scenarios/bugs/4536.js
+++ b/test/e2e-selenium/scenarios/bugs/4536.js
@@ -17,9 +17,9 @@ describe("bug #4536: model name consistency", function () {
     done()
   })
   it("consistently displays a model's name regardless of expansion state", function (client) {
-    client.waitForElementVisible("span.model.model-title", 10000)
-      .assert.containsText("span.model.model-title", "TitleName")
-      .click("span.model.model-title")
+    client.waitForElementVisible("strong.model.model-title", 10000)
+      .assert.containsText("strong.model.model-title", "TitleName")
+      .click("strong.model.model-title")
       .pause(500)
       .assert.containsText("span.model-title__text", "TitleName")