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 567e5f9a18c8088b11f6a25d4765f024d3ae2686..1d48642153b20573d9620b2d5729a1100af8692a 100644 (file)
--- 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 699c03b952135676c9ef00e7b5ab5540a0c801c3..0fd077c50b45f8bdc483412561fbb982c0b794f2 100644 (file)
--- 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 da58a8ccb009065ca53132f165ad9dcba2141f96..edd740b4349bb2dc4f4f19edc52f7b727547068d 100644 (file)
--- 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>