Keyboard help screen to use HTML description list (#5116)

* Keyboard help screen to use HTML description list * Update PR number * Fix styles
microsoft · Apr 4, 2024 · 136b5a4 · 136b5a4
1 parent 512cc60
commit 136b5a4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 -  Fixes [#5050](https://github.com/microsoft/BotFramework-WebChat/issues/5050). Fixed focus should not blur briefly after tapping on a suggested action, by [@compulim](https://github.com/compulim), in PR [#5097](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5097)
+-  Fixes [#5111](https://github.com/microsoft/BotFramework-WebChat/issues/5111). Fixed keyboard help screen to use HTML description list, by [@compulim](https://github.com/compulim), in PR [#5116](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5116)
 
 ### Changed
 

diff --git a/packages/component/src/Styles/StyleSet/KeyboardHelp.ts b/packages/component/src/Styles/StyleSet/KeyboardHelp.ts
@@ -183,10 +183,12 @@ export default function createKeyboardHelpStyleSet({ paddingRegular, primaryFont
       },
 
       '& .webchat__keyboard-help__notes': {
-        marginBottom: paddingRegular
+        marginBottom: paddingRegular,
+        marginTop: 0
       },
 
       '& .webchat__keyboard-help__notes-header': {
+        fontWeight: 'bold',
         margin: 0
       },
 

diff --git a/packages/component/src/Transcript/KeyboardHelp.tsx b/packages/component/src/Transcript/KeyboardHelp.tsx
@@ -5,9 +5,9 @@ import React, { useCallback, useState } from 'react';
 
 import type { FC } from 'react';
 
+import useUniqueId from '../hooks/internal/useUniqueId';
 import useFocus from '../hooks/useFocus';
 import useStyleSet from '../hooks/useStyleSet';
-import useUniqueId from '../hooks/internal/useUniqueId';
 
 const { useLocalizer } = hooks;
 
@@ -17,16 +17,16 @@ type NotesBodyProps = {
 };
 
 const Notes: FC<NotesBodyProps> = ({ header, text }) => (
-  <section className="webchat__keyboard-help__notes">
-    <h4 className="webchat__keyboard-help__notes-header">{header}</h4>
+  <dl className="webchat__keyboard-help__notes">
+    <dt className="webchat__keyboard-help__notes-header">{header}</dt>
     {text.split('\n').map((line, index) => (
       // We are splitting lines into paragraphs, index as key is legitimate here.
       // eslint-disable-next-line react/no-array-index-key
-      <p className="webchat__keyboard-help__notes-text" key={index}>
+      <dd className="webchat__keyboard-help__notes-text" key={index}>
         {line}
-      </p>
+      </dd>
     ))}
-  </section>
+  </dl>
 );
 
 Notes.propTypes = {