diff --git a/front/src/App.tsx b/front/src/App.tsx index 41d51cc854..bac92855b5 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -8,6 +8,7 @@ import BrowserDetect from "./BrowserDetect"; import ErrorBoundary from "./ErrorBoundary"; import { FeatureFlagsProvider } from "./common/contexts/FeatureFlagsContext"; import { PermissionsProvider } from "./common/contexts/PermissionsContext"; +import A11ySkipLinks from "./Apps/common/Components/A11ySkipLinks/A11ySkipLinks"; // Defines app-wide french error messages for yup // See https://github.com/jquense/yup#using-a-custom-locale-dictionary @@ -22,6 +23,7 @@ export default function App() {
+
diff --git a/front/src/Apps/Account/Account.tsx b/front/src/Apps/Account/Account.tsx index 46ed73c423..15de76eaff 100644 --- a/front/src/Apps/Account/Account.tsx +++ b/front/src/Apps/Account/Account.tsx @@ -41,7 +41,7 @@ export default function Account() { return (
{!isMobile && } -
+
} /> diff --git a/front/src/Apps/Companies/CompaniesList/CompaniesList.tsx b/front/src/Apps/Companies/CompaniesList/CompaniesList.tsx index 237fef45b0..90c87d37c9 100644 --- a/front/src/Apps/Companies/CompaniesList/CompaniesList.tsx +++ b/front/src/Apps/Companies/CompaniesList/CompaniesList.tsx @@ -134,7 +134,7 @@ export default function CompaniesList() { additional={ <> - Créer un établissement + Créer un établissement } > - - - +
+ + + +
); } diff --git a/front/src/Apps/Dashboard/Components/DashboardTabs/DashboardTabs.tsx b/front/src/Apps/Dashboard/Components/DashboardTabs/DashboardTabs.tsx index f2bea3f342..a61b0c6810 100644 --- a/front/src/Apps/Dashboard/Components/DashboardTabs/DashboardTabs.tsx +++ b/front/src/Apps/Dashboard/Components/DashboardTabs/DashboardTabs.tsx @@ -115,7 +115,7 @@ const DashboardTabs = ({ currentCompany, companies }: DashboardTabsProps) => { return (
-
+
{ + const location = useLocation(); + const links = useRef<{ title; callback }[]>([]); + const isMobile = useMedia(`(max-width: ${MEDIA_QUERIES.handHeld})`); + + const matchDashboard = matchPath( + { + path: routes.dashboard.index, + caseSensitive: false, + end: false + }, + location.pathname + ); + + const matchCompanies = matchPath( + { + path: routes.companies.index, + caseSensitive: false, + end: true + }, + location.pathname + ); + const matchCompanyDetails = matchPath( + { + path: routes.companies.details, + caseSensitive: false, + end: false + }, + location.pathname + ); + const matchRegistry = matchPath( + { + path: routes.registry, + caseSensitive: false, + end: false + }, + location.pathname + ); + const matchAccount = matchPath( + { + path: routes.account.info, + caseSensitive: false, + end: false + }, + location.pathname + ); + const matchAdmin = matchPath( + { + path: routes.admin.verification, + caseSensitive: false, + end: false + }, + location.pathname + ); + + const matchSignIn = matchPath( + { + path: routes.login, + caseSensitive: false, + end: false + }, + location.pathname + ); + + const matchSignUp = matchPath( + { + path: routes.signup.index, + caseSensitive: false, + end: false + }, + location.pathname + ); + const matchPasswordResetRequest = matchPath( + { + path: routes.passwordResetRequest, + caseSensitive: false, + end: false + }, + location.pathname + ); + + if (matchSignIn || matchSignUp || matchPasswordResetRequest) { + links.current = [ + { + title: "Contenu", + callback: () => { + matchSignUp + ? document.getElementById("fullnameSignUp")?.focus() + : document.getElementsByName("email")?.[0]?.focus(); + } + } + ]; + } else { + links.current = [ + { + title: "Menu principal", + callback: () => { + // @ts-ignore + document.getElementById("header-all-bsds-link")?.firstChild?.focus(); + } + }, + { + title: "Menu secondaire", + callback: () => { + if (matchDashboard) { + //dashboard company switcher + document + .getElementById("company-dashboard-select") + //@ts-ignore + ?.firstChild?.firstChild?.focus(); + } else { + //first accordion element + document + .getElementById("td-sidebar") + //@ts-ignore + ?.firstChild?.firstChild?.firstChild?.focus(); + } + } + }, + { + title: "Contenu", + callback: () => { + if (matchDashboard) { + document.getElementById("create-bsd-btn")?.focus(); + } + if (matchCompanies) { + // @ts-ignore + document.getElementById("create-company-link")?.parentNode?.focus(); + } + if (matchCompanyDetails) { + document.getElementById("company-tab-content")?.focus(); + } + if (matchRegistry) { + document.getElementsByName("exportType")?.[0]?.focus(); + } + if (matchAccount) { + document.getElementById("account-info")?.focus(); + } + if (matchAdmin) { + document.getElementById("admin-content")?.focus(); + } + } + } + ]; + } + if (isMobile) return null; + + return ( +
+ +
+ ); +}; + +export default A11ySkipLinks; diff --git a/front/src/Apps/common/Components/DropdownMenu/DropdownMenu.tsx b/front/src/Apps/common/Components/DropdownMenu/DropdownMenu.tsx index 81f09cfcec..c7c3404238 100644 --- a/front/src/Apps/common/Components/DropdownMenu/DropdownMenu.tsx +++ b/front/src/Apps/common/Components/DropdownMenu/DropdownMenu.tsx @@ -36,6 +36,7 @@ const DropdownMenu = ({ })} > @@ -71,10 +73,14 @@ const DropdownMenu = ({ }} > {link.icon && ( - + {link.icon} )} + {menuTitle} {link.title} ) : ( @@ -88,15 +94,20 @@ const DropdownMenu = ({ state={link.state && { ...link.state }} > {link.icon && ( - + {link.icon} )} {link.iconId && ( )} + {menuTitle} {link.title} )} diff --git a/front/src/Apps/common/Components/SideBar/SideBar.tsx b/front/src/Apps/common/Components/SideBar/SideBar.tsx index f1dbf935a8..a247fb09de 100644 --- a/front/src/Apps/common/Components/SideBar/SideBar.tsx +++ b/front/src/Apps/common/Components/SideBar/SideBar.tsx @@ -6,6 +6,10 @@ interface SideBarProps { } const SideBar = ({ children }: SideBarProps) => { - return ; + return ( + + ); }; export default React.memo(SideBar); diff --git a/front/src/Apps/common/Components/layout/Header.tsx b/front/src/Apps/common/Components/layout/Header.tsx index 432ea9804a..48b2d94c83 100644 --- a/front/src/Apps/common/Components/layout/Header.tsx +++ b/front/src/Apps/common/Components/layout/Header.tsx @@ -426,6 +426,7 @@ function MobileSubNav({ currentCompany }) {
); } +const allBsdsMenuEntryLbl = "Mes bordereaux"; const getDesktopMenuEntries = ( isAuthenticated, @@ -448,10 +449,9 @@ const getDesktopMenuEntries = ( navlink: true } ]; - const connected = [ { - caption: "Mes bordereaux", + caption: allBsdsMenuEntryLbl, href: currentSiret ? generatePath(routes.dashboard.index, { siret: currentSiret @@ -766,7 +766,15 @@ export default function Header({ style={{ margin: "initial", maxWidth: "initial" }} > {menuEntries.map((e, idx) => ( -
  • +
  • ))} diff --git a/front/src/admin/Admin.tsx b/front/src/admin/Admin.tsx index faf71118f2..e44cd51027 100644 --- a/front/src/admin/Admin.tsx +++ b/front/src/admin/Admin.tsx @@ -152,7 +152,11 @@ export default function Admin() { -
    +
    setNameValue(e.target.value) + onChange: e => setNameValue(e.target.value), + id: "fullnameSignUp" }} />