SONAR-18391 Improve layout landmark

diff --git a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
index f00194a37553c323b4e6fed007ef93e3c8689030..c6cf4a771acf7474b0d69c78e87cec43f7421596 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
+++ b/server/sonar-web/src/main/js/app/components/SimpleContainer.tsx
@@ -31,7 +31,7 @@ export default function SimpleContainer({ children }: { children?: React.ReactNo
   return (
     <div className="global-container">
       <div className="page-wrapper" id="container">
-        <NavBar className="navbar-global" height={rawSizes.globalNavHeightRaw} />
+        <NavBar className="global-navbar" height={rawSizes.globalNavHeightRaw} />
         {children !== undefined ? children : <Outlet />}
       </div>
       <GlobalFooter />

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
index 0abf419e1c77f8633801372373278570295a6db5..1c65589ead7a7d660285755146f377f27dfe54a7 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.tsx
@@ -20,6 +20,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import ContextNavBar from '../../../../components/ui/ContextNavBar';
+import { translate } from '../../../../helpers/l10n';
 import {
   ProjectAlmBindingConfigurationErrors,
   ProjectAlmBindingResponse,
@@ -118,6 +119,7 @@ export default function ComponentNav(props: ComponentNavProps) {
     <ContextNavBar
       height={contextNavHeight}
       id="context-navigation"
+      label={translate('qualifier', component.qualifier)}
       notif={
         <>
           {bgTaskNotifComponent}

diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
index 0d5dfdf83f02da9af499d3745020096251dc4640..5013161cc0e7833f2ed562531edeacf86c8c3193 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
@@ -17,16 +17,32 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-.navbar-global,
-.navbar-global .navbar-inner {
+.global-navbar,
+.global-navbar .global-navbar-inner {
   background-color: var(--globalNavBarBg);
   z-index: 421;
 }
 
-.navbar-global .navbar-limited {
+.global-navbar .navbar-limited {
   display: flex;
 }
 
+.global-navbar {
+  position: fixed;
+  width: 100%;
+}
+
+.global-navbar .global-navbar-inner {
+  position: static;
+  display: flex;
+  max-width: var(--maxPageWidth);
+  min-width: var(--minPageWidth);
+  padding-left: var(--pagePadding);
+  padding-right: var(--pagePadding);
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .navbar-brand {
   display: flex;
   justify-content: center;
@@ -66,6 +82,7 @@
 .global-navbar-menu {
   display: flex;
   align-items: center;
+  margin-left: auto;
   height: var(--globalNavHeight);
 }
 
@@ -101,19 +118,8 @@
   margin-left: calc(5 * var(--gridSize));
 }
 
-.global-navbar-menu-right .navbar-search {
-  flex: 0 1 240px; /* Workaround for SONAR-10971 */
-  min-width: 0;
-}
-
-.global-navbar-menu-right .navbar-search .search-box,
-.global-navbar-menu-right .navbar-search .search-box-input {
-  min-width: 0;
-  width: 100%;
-}
-
 @media print {
-  .navbar-global {
+  .global-navbar {
     display: none !important;
   }
 }

diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
index 76f60ff5504a7d96f31bbcc6d3a4dcb1541e415c..a44493731e67001348afa5f8fa7cc57a13777ba5 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
@@ -19,9 +19,8 @@
  */
 import * as React from 'react';
 import EmbedDocsPopupHelper from '../../../../components/embed-docs-modal/EmbedDocsPopupHelper';
-import NavBar from '../../../../components/ui/NavBar';
 import { CurrentUser } from '../../../../types/users';
-import { rawSizes } from '../../../theme';
+import { sizes } from '../../../theme';
 import withCurrentUserContext from '../../current-user/withCurrentUserContext';
 import Search from '../../search/Search';
 import './GlobalNav.css';
@@ -37,17 +36,21 @@ export interface GlobalNavProps {
 export function GlobalNav(props: GlobalNavProps) {
   const { currentUser, location } = props;
   return (
-    <NavBar className="navbar-global" height={rawSizes.globalNavHeightRaw} id="global-navigation">
-      <GlobalNavBranding />
+    <div style={{ height: sizes.globalNavHeight }}>
+      <div className="navbar global-navbar" id="global-navigation">
+        <div className="global-navbar-inner">
+          <GlobalNavBranding />
 
-      <GlobalNavMenu currentUser={currentUser} location={location} />
+          <GlobalNavMenu currentUser={currentUser} location={location} />
 
-      <div className="global-navbar-menu global-navbar-menu-right">
-        <EmbedDocsPopupHelper />
-        <Search />
-        <GlobalNavUser currentUser={currentUser} />
+          <div className="global-navbar-menu global-navbar-menu-right">
+            <EmbedDocsPopupHelper />
+            <Search />
+            <GlobalNavUser currentUser={currentUser} />
+          </div>
+        </div>
       </div>
-    </NavBar>
+    </div>
   );
 }
 

diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
index 16abd2d0cf0836f28cfbc08ebafa0374d65a4064..2eabde72d7903a972d18228ab75a1e8cf6c48a20 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
@@ -183,16 +183,18 @@ export class GlobalNavMenu extends React.PureComponent<Props> {
     );
 
     return (
-      <ul className="global-navbar-menu">
-        {this.renderProjects()}
-        {governanceInstalled && this.renderPortfolios()}
-        {this.renderIssuesLink()}
-        {this.renderRulesLink()}
-        {this.renderProfilesLink()}
-        {this.renderQualityGatesLink()}
-        {this.renderAdministrationLink()}
-        {this.renderMore()}
-      </ul>
+      <nav aria-label={translate('global')}>
+        <ul className="global-navbar-menu">
+          {this.renderProjects()}
+          {governanceInstalled && this.renderPortfolios()}
+          {this.renderIssuesLink()}
+          {this.renderRulesLink()}
+          {this.renderProfilesLink()}
+          {this.renderQualityGatesLink()}
+          {this.renderAdministrationLink()}
+          {this.renderMore()}
+        </ul>
+      </nav>
     );
   }
 }

diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap
index 0a1ec124c7964c78f1a4225e2816207a4d042622..c0800f1fe8d1a085edc2ab9714a482f289c6bc55 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap
@@ -1,73 +1,95 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly: anonymous users 1`] = `
-<NavBar
-  className="navbar-global"
-  height={48}
-  id="global-navigation"
->
-  <withAppStateContext(GlobalNavBranding) />
-  <withAppStateContext(GlobalNavMenu)
-    currentUser={
-      {
-        "dismissedNotices": {},
-        "isLoggedIn": false,
-      }
-    }
-    location={
-      {
-        "pathname": "",
-      }
+<div
+  style={
+    {
+      "height": "48px",
     }
-  />
+  }
+>
   <div
-    className="global-navbar-menu global-navbar-menu-right"
+    className="navbar global-navbar"
+    id="global-navigation"
   >
-    <EmbedDocsPopupHelper />
-    <withRouter(Search) />
-    <withRouter(GlobalNavUser)
-      currentUser={
-        {
-          "dismissedNotices": {},
-          "isLoggedIn": false,
+    <div
+      className="global-navbar-inner"
+    >
+      <withAppStateContext(GlobalNavBranding) />
+      <withAppStateContext(GlobalNavMenu)
+        currentUser={
+          {
+            "dismissedNotices": {},
+            "isLoggedIn": false,
+          }
+        }
+        location={
+          {
+            "pathname": "",
+          }
         }
-      }
-    />
+      />
+      <div
+        className="global-navbar-menu global-navbar-menu-right"
+      >
+        <EmbedDocsPopupHelper />
+        <withRouter(Search) />
+        <withRouter(GlobalNavUser)
+          currentUser={
+            {
+              "dismissedNotices": {},
+              "isLoggedIn": false,
+            }
+          }
+        />
+      </div>
+    </div>
   </div>
-</NavBar>
+</div>
 `;
 
 exports[`should render correctly: logged in users 1`] = `
-<NavBar
-  className="navbar-global"
-  height={48}
-  id="global-navigation"
->
-  <withAppStateContext(GlobalNavBranding) />
-  <withAppStateContext(GlobalNavMenu)
-    currentUser={
-      {
-        "isLoggedIn": true,
-      }
-    }
-    location={
-      {
-        "pathname": "",
-      }
+<div
+  style={
+    {
+      "height": "48px",
     }
-  />
+  }
+>
   <div
-    className="global-navbar-menu global-navbar-menu-right"
+    className="navbar global-navbar"
+    id="global-navigation"
   >
-    <EmbedDocsPopupHelper />
-    <withRouter(Search) />
-    <withRouter(GlobalNavUser)
-      currentUser={
-        {
-          "isLoggedIn": true,
+    <div
+      className="global-navbar-inner"
+    >
+      <withAppStateContext(GlobalNavBranding) />
+      <withAppStateContext(GlobalNavMenu)
+        currentUser={
+          {
+            "isLoggedIn": true,
+          }
+        }
+        location={
+          {
+            "pathname": "",
+          }
         }
-      }
-    />
+      />
+      <div
+        className="global-navbar-menu global-navbar-menu-right"
+      >
+        <EmbedDocsPopupHelper />
+        <withRouter(Search) />
+        <withRouter(GlobalNavUser)
+          currentUser={
+            {
+              "isLoggedIn": true,
+            }
+          }
+        />
+      </div>
+    </div>
   </div>
-</NavBar>
+</div>
 `;

diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
index b6aa5af9ef0d7c5926122c83f3960c05244ccd87..369780bbe5edd4beae480fc9d67c6cffb303b3f4 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/SettingsNav.tsx
@@ -259,6 +259,7 @@ export class SettingsNav extends React.PureComponent<Props> {
       <ContextNavBar
         height={notifComponent ? contextNavHeight + ALERT_HEIGHT : contextNavHeight}
         id="context-navigation"
+        label={translate('settings')}
         notif={notifComponent}
       >
         <div className="navbar-context-header">

diff --git a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap
index f09713ebd58548a7dbdd4bee15d6ddb4240a74f2..01c0bb4afc5e92f3291baef17b916ed49cf8f9df 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/settings/__tests__/__snapshots__/SettingsNav-test.tsx.snap
@@ -28,6 +28,7 @@ exports[`should render correctly when governance is active 1`] = `
 <ContextNavBar
   height={72}
   id="context-navigation"
+  label="settings"
 >
   <div
     className="navbar-context-header"
@@ -181,6 +182,7 @@ exports[`should work with extensions 1`] = `
 <ContextNavBar
   height={72}
   id="context-navigation"
+  label="settings"
 >
   <div
     className="navbar-context-header"

diff --git a/server/sonar-web/src/main/js/app/components/search/Search.tsx b/server/sonar-web/src/main/js/app/components/search/Search.tsx
index ad557a7b9a0cbc6ab317daf41d4a78efef44d74b..c4b1aa6f522355aeab28793c91f46b6ec0e50113 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/search/Search.tsx
+++ b/server/sonar-web/src/main/js/app/components/search/Search.tsx
@@ -348,7 +348,7 @@ export class Search extends React.PureComponent<Props, State> {
 
   render() {
     const search = (
-      <div className="navbar-search dropdown">
+      <div role="search" className="navbar-search dropdown">
         <DeferredSpinner className="navbar-search-icon" loading={this.state.loading} />
 
         <SearchBox

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
index a95747b6b5ee53f75e9d5510a207527253d1a823..b6e32c4947c9b804f7e4fd2273db3aa55eb61d22 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CodingRulesApp.tsx
@@ -585,11 +585,7 @@ export class CodingRulesApp extends React.PureComponent<Props, State> {
         <div className="layout-page" id="coding-rules-page">
           <ScreenPositionHelper className="layout-page-side-outer">
             {({ top }) => (
-              <section
-                aria-label={translate('filters')}
-                className="layout-page-side"
-                style={{ top }}
-              >
+              <nav aria-label={translate('filters')} className="layout-page-side" style={{ top }}>
                 <div className="layout-page-side-inner">
                   <div className="layout-page-filters">
                     <A11ySkipTarget
@@ -619,7 +615,7 @@ export class CodingRulesApp extends React.PureComponent<Props, State> {
                     />
                   </div>
                 </div>
-              </section>
+              </nav>
             )}
           </ScreenPositionHelper>
 

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap
index 08da9918375fc95b9e77150fa2501b21c75a1036..e89e17bb628de409ae5456523d89075f49fdd91f 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/__snapshots__/CodingRulesApp-test.tsx.snap
@@ -101,7 +101,7 @@ exports[`renderBulkButton should show bulk change button when user has global ad
 `;
 
 exports[`should render correctly: loaded (ScreenPositionHelper) 1`] = `
-<section
+<nav
   aria-label="filters"
   className="layout-page-side"
   style={
@@ -178,7 +178,7 @@ exports[`should render correctly: loaded (ScreenPositionHelper) 1`] = `
       />
     </div>
   </div>
-</section>
+</nav>
 `;
 
 exports[`should render correctly: loaded 1`] = `

diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index 81b9a54f4e3d203930a375da6f95cd5cdb43872f..b9429272f573eb452b4d0c0c6eb50b0b63bb0457 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -967,7 +967,7 @@ export class App extends React.PureComponent<Props, State> {
     return (
       <ScreenPositionHelper className="layout-page-side-outer">
         {({ top }) => (
-          <section
+          <nav
             aria-label={openIssue ? translate('list_of_issues') : translate('filters')}
             className="layout-page-side"
             style={{ top }}
@@ -1001,7 +1001,7 @@ export class App extends React.PureComponent<Props, State> {
 
               {openIssue ? this.renderConciseIssuesList() : this.renderFacets()}
             </div>
-          </section>
+          </nav>
         )}
       </ScreenPositionHelper>
     );

diff --git a/server/sonar-web/src/main/js/components/ui/ContextNavBar.tsx b/server/sonar-web/src/main/js/components/ui/ContextNavBar.tsx
index 66a607c1273191f509b19baa494f690d0cfc8a11..812e377476ca4cb3cb706ef5674468c2ab48dfad 100644 (file)
--- a/server/sonar-web/src/main/js/components/ui/ContextNavBar.tsx
+++ b/server/sonar-web/src/main/js/components/ui/ContextNavBar.tsx
@@ -26,8 +26,11 @@ interface Props extends NavBarProps {
   className?: string;
   id?: string;
   height: number;
+  label: string;
 }
 
-export default function ContextNavBar({ className, ...other }: Props) {
-  return <NavBar className={classNames('navbar-context', className)} {...other} />;
+export default function ContextNavBar({ className, label, ...other }: Props) {
+  return (
+    <NavBar aria-label={label} className={classNames('navbar-context', className)} {...other} />
+  );
 }

diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
index 3242ee0e933b63280f5aa5e229c9461fccfaa761..c54379d9344ef8c963198b6962538cde64eb6d40 100644 (file)
--- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties
+++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties
@@ -192,6 +192,7 @@ selected=Selected
 select_tags=Add or remove tags
 set=Set
 set_up=Set Up
+settings=Settings
 severity=Severity
 shared=Shared
 start_date=Start Date