From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 27 Jul 2022 12:56:50 +0000 (+0200)
Subject: SONAR-16683 [891491] proper structure for docs popup
X-Git-Tag: 9.6.0.59041~134
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=0ade067c4ebd2ebd14e2d18842ff90a088629880;p=sonarqube.git

SONAR-16683 [891491] proper structure for docs popup
---

diff --git a/server/sonar-web/src/main/js/app/styles/components/menu.css b/server/sonar-web/src/main/js/app/styles/components/menu.css
index 567e5f9a18c..1d48642153b 100644
--- a/server/sonar-web/src/main/js/app/styles/components/menu.css
+++ b/server/sonar-web/src/main/js/app/styles/components/menu.css
@@ -27,6 +27,10 @@
   background-clip: padding-box;
 }
 
+.menu:not(:last-of-type) {
+  padding-bottom: 12px;
+}
+
 .menu + .menu {
   border-top: 1px solid var(--barBorderColor);
 }
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopup.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopup.tsx
index 699c03b9521..0fd077c50b4 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopup.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopup.tsx
@@ -31,7 +31,11 @@ interface Props {
 
 export default class EmbedDocsPopup extends React.PureComponent<Props> {
   renderTitle(text: string) {
-    return <li className="menu-header">{text}</li>;
+    return (
+      <li role="presentation" className="menu-header">
+        {text}
+      </li>
+    );
   }
 
   renderSuggestions = ({ suggestions }: { suggestions: SuggestionLink[] }) => {
@@ -39,17 +43,16 @@ export default class EmbedDocsPopup extends React.PureComponent<Props> {
       return null;
     }
     return (
-      <>
+      <ul className="menu abs-width-240" role="group">
         {this.renderTitle(translate('embed_docs.suggestion'))}
-        {suggestions.map((suggestion, index) => (
-          <li key={index}>
+        {suggestions.map(suggestion => (
+          <li key={suggestion.link}>
             <Link onClick={this.props.onClose} target="_blank" to={suggestion.link}>
               {suggestion.text}
             </Link>
           </li>
         ))}
-        <li className="divider" />
-      </>
+      </ul>
     );
   };
 
@@ -71,8 +74,8 @@ export default class EmbedDocsPopup extends React.PureComponent<Props> {
   render() {
     return (
       <DropdownOverlay>
-        <ul className="menu abs-width-240">
-          <SuggestionsContext.Consumer>{this.renderSuggestions}</SuggestionsContext.Consumer>
+        <SuggestionsContext.Consumer>{this.renderSuggestions}</SuggestionsContext.Consumer>
+        <ul className="menu abs-width-240" role="group">
           <li>
             <Link onClick={this.props.onClose} target="_blank" to="/documentation">
               {translate('embed_docs.documentation')}
@@ -83,13 +86,15 @@ export default class EmbedDocsPopup extends React.PureComponent<Props> {
               {translate('api_documentation.page')}
             </Link>
           </li>
-          <li className="divider" />
+        </ul>
+        <ul className="menu abs-width-240" role="group">
           <li>
             <a href="https://community.sonarsource.com/" rel="noopener noreferrer" target="_blank">
               {translate('embed_docs.get_help')}
             </a>
           </li>
-          <li className="divider" />
+        </ul>
+        <ul className="menu abs-width-240" role="group">
           {this.renderTitle(translate('embed_docs.stay_connected'))}
           <li>
             {this.renderIconLink(
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap b/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap
index da58a8ccb00..edd740b4349 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/__tests__/__snapshots__/EmbedDocsPopup-test.tsx.snap
@@ -2,12 +2,13 @@
 
 exports[`should render 1`] = `
 <DropdownOverlay>
+  <ContextConsumer>
+    <Component />
+  </ContextConsumer>
   <ul
     className="menu abs-width-240"
+    role="group"
   >
-    <ContextConsumer>
-      <Component />
-    </ContextConsumer>
     <li>
       <Link
         onClick={[MockFunction]}
@@ -25,9 +26,11 @@ exports[`should render 1`] = `
         api_documentation.page
       </Link>
     </li>
-    <li
-      className="divider"
-    />
+  </ul>
+  <ul
+    className="menu abs-width-240"
+    role="group"
+  >
     <li>
       <a
         href="https://community.sonarsource.com/"
@@ -37,11 +40,14 @@ exports[`should render 1`] = `
         embed_docs.get_help
       </a>
     </li>
-    <li
-      className="divider"
-    />
+  </ul>
+  <ul
+    className="menu abs-width-240"
+    role="group"
+  >
     <li
       className="menu-header"
+      role="presentation"
     >
       embed_docs.stay_connected
     </li>