fix: added semantic markup, strong instead of font-weight

library/src/components/Bindings.tsx

@@ -25,9 +25,9 @@ export const Bindings: React.FunctionComponent<Props> = ({
     const schemaName = (
       <div className="inline-block text-sm">
         <span>{name}</span>
-        <span className="bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-xs">
+        <strong className="bg-teal-500 no-underline text-white uppercase rounded mx-2 px-2 py-1 text-xs">
           {protocol}
-        </span>
+        </strong>
       </div>
     );
     return (

library/src/components/Schema.tsx

@@ -160,37 +160,37 @@ export const Schema: React.FunctionComponent<Props> = ({
                 </div>
                 <div className="inline-block">
                   {schema.format() && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       format: {schema.format()}
-                    </span>
+                    </strong>
                   )}
 
                   {/* related to string */}
                   {schema.pattern() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded mr-2 p-1 text-xs">
                       must match: {schema.pattern()}
-                    </span>
+                    </strong>
                   )}
                   {schema.contentMediaType() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       media type: {schema.contentMediaType()}
-                    </span>
+                    </strong>
                   )}
                   {schema.contentEncoding() !== undefined && (
-                    <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
+                    <strong className="bg-yellow-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs">
                       encoding: {schema.contentEncoding()}
-                    </span>
+                    </strong>
                   )}
 
                   {/* constraints */}
                   {!!constraints.length &&
                     constraints.map((c) => (
-                      <span
-                        className="bg-purple-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs"
+                      <strong
+                        className="bg-purple-600 no-underline text-white rounded lowercase mr-2 p-1 text-xs"
                         key={c}
                       >
                         {c}
-                      </span>
+                      </strong>
                     ))}
 
                   {uid && !uid.startsWith('<anonymous-') && (
@@ -244,14 +244,14 @@ export const Schema: React.FunctionComponent<Props> = ({
                   </div>
                 )}
                 {externalDocs && (
-                  <span className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-2 py-0">
+                  <strong className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 no-underline text-xs uppercase rounded px-2 py-0">
                     <Href
                       href={externalDocs.url()}
                       title={externalDocs.description() ?? ''}
                     >
                       Documentation
                     </Href>
-                  </span>
+                  </strong>
                 )}
                 {schema.examples() && (
                   <ul className="text-xs">

library/src/containers/Info/Info.tsx

@@ -46,9 +46,9 @@ export const Info: React.FunctionComponent = () => {
                     <span>{license.name()}</span>
                   </Href>
                 ) : (
-                  <span className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1">
+                  <strong className="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 no-underline text-xs uppercase rounded px-3 py-1">
                     {license.name()}
-                  </span>
+                  </strong>
                 )}
               </li>
             )}
@@ -108,9 +108,9 @@ export const Info: React.FunctionComponent = () => {
             )}
             {specId && (
               <li className="inline-block mt-2 mr-2">
-                <span className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs uppercase rounded px-3 py-1">
+                <strong className="border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 no-underline text-xs uppercase rounded px-3 py-1">
                   ID: {specId}
-                </span>
+                </strong>
               </li>
             )}
           </ul>

library/src/containers/Messages/Message.tsx

@@ -55,7 +55,7 @@ export const Message: React.FunctionComponent<Props> = ({
         <div className="shadow rounded bg-gray-200 p-4 border">
           <div>
             {index !== undefined && (
-              <span className="text-gray-700 font-bold mr-2">#{index}</span>
+              <strong className="text-gray-700 mr-2">#{index}</strong>
             )}
             {title && <span className="text-gray-700 mr-2">{title}</span>}
             <span className="border text-orange-600 rounded text-xs py-0 px-2">

library/src/containers/Operations/Operation.tsx

@@ -262,7 +262,7 @@ export const OperationReplyInfo: React.FunctionComponent<Props> = (props) => {
                   : 'bg-blue-600 border-blue-600'
               } text-sm rounded-t h-8 px-4 border text-white flex items-center`}
             >
-              <span className="font-bold">REPLY INFORMATION</span>
+              <strong>REPLY INFORMATION</strong>
             </div>
             <div className="flex">
               <div

library/src/containers/Servers/Security.tsx

@@ -130,22 +130,22 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
       <div className="px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded">
         {securityProtocol && (
           <div className="mt-1">
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               security.protocol:
-            </span>
-            <span className="inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
+            </strong>
+            <strong className="inline-block no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
               {securityProtocol}
-            </span>
+            </strong>
           </div>
         )}
         {saslMechanism && (
           <div className="mt-1">
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               sasl.mechanism:
-            </span>
-            <span className="inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
+            </strong>
+            <strong className="inline-block no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1">
               {saslMechanism}
-            </span>
+            </strong>
           </div>
         )}
       </div>
@@ -179,49 +179,49 @@ const SecurityItem: React.FunctionComponent<SecurityItemProps> = ({
           key={flowName}
         >
           <div>
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               Flow:
-            </span>
-            <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+            </strong>
+            <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
               {ServerHelpers.flowName(flowName)}
-            </span>
+            </strong>
           </div>
 
           {authorizationUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Auth URL:
-              </span>
+              </strong>
               <Href href={authorizationUrl} className="underline">
                 {authorizationUrl}
               </Href>
             </div>
           )}
           {tokenUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Token URL:
-              </span>
+              </strong>
               <Href href={tokenUrl} className="underline">
                 {tokenUrl}
               </Href>
             </div>
           )}
           {refreshUrl && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Refresh URL:
-              </span>
+              </strong>
               <Href href={refreshUrl} className="underline">
                 {refreshUrl}
               </Href>
             </div>
           )}
           {scopes && (
             <div className="mt-1">
-              <span className="text-xs font-bold text-gray-600 mt-1 mr-1 uppercase">
+              <strong className="text-xs text-gray-600 mt-1 mr-1 uppercase">
                 Scopes:
-              </span>
+              </strong>
               <ul className="inline-block">
                 {scopes &&
                   Object.entries(scopes).map(([scopeName, scopeDesc]) => (

library/src/containers/Servers/Server.tsx

@@ -34,14 +34,14 @@ export const Server: React.FunctionComponent<Props> = ({
         <div className="shadow rounded bg-gray-200 p-4 border bg-gray-100">
           <div>
             <span className="font-mono text-base">{server.url()}</span>
-            <span className="bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm">
+            <strong className="bg-teal-500 no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm">
               {protocolVersion
                 ? `${server.protocol()} ${protocolVersion}`
                 : server.protocol()}
-            </span>
-            <span className="bg-blue-500 font-bold no-underline text-white uppercase rounded px-2 py-1 text-sm">
+            </strong>
+            <strong className="bg-blue-500 no-underline text-white uppercase rounded px-2 py-1 text-sm">
               {serverName}
-            </span>
+            </strong>
           </div>
 
           {server.hasDescription() && (

library/src/containers/Sidebar/Sidebar.tsx

@@ -356,12 +356,12 @@ const OperationItem: React.FunctionComponent<OperationItemProps> = ({
         href={`#${operationHrefId}`}
         onClick={() => setShowSidebar(false)}
       >
-        <span
-          className={`font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded text-xs ${bgColors.includes(backgroundColor) && backgroundColor}`}
+        <strong
+          className={`h-6 no-underline text-white uppercase p-1 mr-2 rounded text-xs ${bgColors.includes(backgroundColor) && backgroundColor}`}
           title={typeLabel}
         >
           {typeLabel}
-        </span>
+        </strong>
         <span className="break-all inline-block">{label}</span>
       </a>
     </li>

library/src/containers/Sidebar/__tests__/SideBar.test.tsx

@@ -121,10 +121,10 @@ describe('Sidebar component', () => {
       'smartylighting.streetlights.1.0.action.{streetlightId}.dim',
     ];
     for (let i = 0; i < operations.length; i++) {
+      const description = operations[i].querySelector('span');
+
       // eslint-disable-next-line jest/no-standalone-expect
-      expect(operations[i].querySelectorAll('span')[1].textContent).toBe(
-        expectedOperationDescriptions[i],
-      );
+      expect(description?.textContent).toBe(expectedOperationDescriptions[i]);
     }
   });
 });