From ff0d55b6ccbadab7124ee55f86108a0bbfee5489 Mon Sep 17 00:00:00 2001 From: olav Date: Thu, 21 Apr 2022 09:52:43 +0200 Subject: [PATCH] fix: improve HTML landmarks (#886) * fix: improve HTML landmarks * refactor: footer headers should use h2 * refactor: fix header order on the feature overview page * fix: make drawer logo clickable * fix: wrap header links in + + ); }; diff --git a/frontend/src/component/menu/__tests__/__snapshots__/apiDetails.test.tsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/apiDetails.test.tsx.snap deleted file mode 100644 index 5ced02acef..0000000000 --- a/frontend/src/component/menu/__tests__/__snapshots__/apiDetails.test.tsx.snap +++ /dev/null @@ -1,78 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly with empty version 1`] = ` -
-

- Unleash - - - ( - test - ) - -

-
- - We are the best! - -
-
-`; - -exports[`renders correctly with ui-config 1`] = ` -
-

- Unleash 1.1.0 - - - ( - test - ) - -

-
- - We are the best! - -
-
-`; - -exports[`renders correctly with versionInfo 1`] = ` -
-

- Unleash 1.2.3 - -

- - Upgrade available - Latest Enterprise release: 1.2.4 -
- -
- -
- - 1 - -
-`; - -exports[`renders correctly without uiConfig 1`] = ` -
-

- Unleash 1.1.0 - -

-
- -
-
-`; diff --git a/frontend/src/component/menu/__tests__/__snapshots__/breadcrumbTest.jsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/breadcrumbTest.jsx.snap deleted file mode 100644 index f6be065f6d..0000000000 --- a/frontend/src/component/menu/__tests__/__snapshots__/breadcrumbTest.jsx.snap +++ /dev/null @@ -1,43 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`breadcrumb for /features 1`] = ` - - - Feature Toggles - - -`; - -exports[`breadcrumb for /features/view/Demo 1`] = ` - - - Feature Toggles - - - - › - - - Demo - - - -`; - -exports[`breadcrumb for /strategies 1`] = ` - - - Strategies - - -`; diff --git a/frontend/src/component/menu/__tests__/__snapshots__/footerTest.jsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/footerTest.jsx.snap index 4cdd16dbce..35ccdc4e26 100644 --- a/frontend/src/component/menu/__tests__/__snapshots__/footerTest.jsx.snap +++ b/frontend/src/component/menu/__tests__/__snapshots__/footerTest.jsx.snap @@ -18,10 +18,12 @@ exports[`should render DrawerMenu 1`] = `
-

+

Unleash 3.x -

+
The enterprise ready feature toggle service. @@ -41,9 +43,11 @@ exports[`should render DrawerMenu 1`] = `
-

+

Server SDKs -

+
    @@ -210,9 +214,11 @@ exports[`should render DrawerMenu 1`] = `
    -

    +

    Frontend SDKs -

    +
      @@ -318,9 +324,11 @@ exports[`should render DrawerMenu 1`] = ` className="MuiGrid-root MuiGrid-item" >
      -

      +

      About -

      +
        @@ -446,10 +454,12 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
        -

        +

        Unleash 3.x -

        +
        The enterprise ready feature toggle service. @@ -469,9 +479,11 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
        -

        +

        Server SDKs -

        +
          @@ -638,9 +650,11 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
          -

          +

          Frontend SDKs -

          +
            @@ -746,9 +760,11 @@ exports[`should render DrawerMenu with "features" selected 1`] = ` className="MuiGrid-root MuiGrid-item" >
            -

            +

            About -

            +
              diff --git a/frontend/src/component/menu/__tests__/breadcrumbTest.jsx b/frontend/src/component/menu/__tests__/breadcrumbTest.jsx deleted file mode 100644 index 1417583355..0000000000 --- a/frontend/src/component/menu/__tests__/breadcrumbTest.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import renderer from 'react-test-renderer'; -import { MemoryRouter } from 'react-router-dom'; -import Breadcrumb from '../breadcrumb'; - -test('breadcrumb for /features', () => { - const tree = renderer.create( - - - - ); - - expect(tree).toMatchSnapshot(); -}); - -test('breadcrumb for /features/view/Demo', () => { - const tree = renderer.create( - - - - ); - - expect(tree).toMatchSnapshot(); -}); - -test('breadcrumb for /strategies', () => { - const tree = renderer.create( - - - - ); - - expect(tree).toMatchSnapshot(); -}); diff --git a/frontend/src/component/menu/breadcrumb.jsx b/frontend/src/component/menu/breadcrumb.jsx deleted file mode 100644 index 92ae8b00ea..0000000000 --- a/frontend/src/component/menu/breadcrumb.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { Link, Route, Switch } from 'react-router-dom'; - -import { routes, getRoute } from './routes'; - -import styles from '../styles.module.scss'; - -const renderDoubleBread = (currentTitle, parentRoute) => { - document.title = `${currentTitle} - ${parentRoute.title} - Unleash`; - return ( - - - {parentRoute.title} - - - › - {currentTitle} - - - ); -}; - -const renderBread = route => { - document.title = `${route.title} - Unleash`; - return ( - - {route.title} - - ); -}; - -const renderRoute = (params, route) => { - if (!route) { - return null; - } - const title = route.title.startsWith(':') - ? params[route.title.substring(1)] - : route.title; - return route.parent - ? renderDoubleBread(title, getRoute(route.parent)) - : renderBread(route); -}; - -/* - Render the breadcrumb. - - We only support two levels. - - Examples: - - Features - - Features > Create - - Features > SomeToggle - */ -const Breadcrumb = () => ( - - {routes.map(route => ( - - renderRoute(params, route) - } - /> - ))} - -); - -export default Breadcrumb; diff --git a/frontend/src/component/menu/drawer.jsx b/frontend/src/component/menu/drawer.jsx index f42f05f8ef..c8cd15421c 100644 --- a/frontend/src/component/menu/drawer.jsx +++ b/frontend/src/component/menu/drawer.jsx @@ -4,9 +4,8 @@ import PropTypes from 'prop-types'; import GitHubIcon from '@material-ui/icons/GitHub'; import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'; import ExitToApp from '@material-ui/icons/ExitToApp'; - +import { Link } from 'react-router-dom'; import styles from './drawer.module.scss'; - import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg'; import NavigationLink from './Header/NavigationLink/NavigationLink'; import ConditionallyRender from 'component/common/ConditionallyRender'; @@ -49,16 +48,23 @@ export const DrawerMenu = ({ toggleDrawer()} + anchor="left" + onClose={toggleDrawer} > -
              +
              - +               ); }; diff --git a/frontend/src/component/menu/drawer.module.scss b/frontend/src/component/menu/drawer.module.scss index 730d8c3497..1f1ae94ce3 100644 --- a/frontend/src/component/menu/drawer.module.scss +++ b/frontend/src/component/menu/drawer.module.scss @@ -6,6 +6,8 @@ .drawerTitle { display: flex; align-items: center; + color: inherit; + text-decoration: none; } .drawerContainer { diff --git a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.jsx.snap b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.jsx.snap index feaeb1ce04..12aa045c51 100644 --- a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.jsx.snap +++ b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.jsx.snap @@ -20,11 +20,11 @@ exports[`renders correctly with one strategy 1`] = ` className="" data-loading={true} > -

              Strategies -

              +
              -

              Strategies -

              +
              -

              Tag Types -

              +
              -

              Tag Types -

              +