diff --git a/frontend/src/appConfig.ts b/frontend/src/appConfig.ts index d387c508f2d8ff43ccc38f240e1eac0a98135ab8..84880d70a088ae516f630454601f05d9eb61b823 100644 --- a/frontend/src/appConfig.ts +++ b/frontend/src/appConfig.ts @@ -17,7 +17,7 @@ export const appVersion: string = process.env.REACT_APP_VERSION as string export const appName: string = process.env.REACT_APP_NAME as string /* Institution */ -export const appInst: string = env.REACT_APP_INST as string; +export const appInst: string = env.REACT_APP_INST as string /* Theming */ export const appTheme: string = env.REACT_APP_THEME @@ -26,7 +26,7 @@ export const appTheme: string = env.REACT_APP_THEME /* Show warning in the footer about this being a staging/test system */ export const appStagingWarning: boolean = - env.REACT_APP_STAGING_WARNING === 'true'; + env.REACT_APP_STAGING_WARNING === 'true' /* Footer content */ export const appTechnicalSupportLink: string = env.REACT_APP_SUPPORT_URL as string diff --git a/frontend/src/components/dropdownmenu/index.tsx b/frontend/src/components/dropdownmenu/index.tsx index 9feb7fed666edb2c09b7a1a1d8581f09572afbdb..fbdbd36feb4135114f5c8be6d5260d3ad8c68013 100644 --- a/frontend/src/components/dropdownmenu/index.tsx +++ b/frontend/src/components/dropdownmenu/index.tsx @@ -69,14 +69,25 @@ function DropDown(props: IProps) { } return ( + <DropDownMenu aria-haspopup='true' aria-expanded={open} + /* eslint-disable-next-line react/jsx-no-bind */ onFocus={openMenu} tabIndex={0} > <div> - <div onClick={openMenu}> + <div role='button' + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === ' ') { + openMenu() + } + }} + onClick={openMenu} + tabIndex={0} + > + {/* eslint-disable-next-line */} {placeholder ? placeholder : getValueName(value, options).toLowerCase()} @@ -85,19 +96,25 @@ function DropDown(props: IProps) { <div> {open && ( <DropDownList> - {options.map((option, index) => { - return ( - <li - onClick={( - event: React.MouseEvent<HTMLElement, MouseEvent>, - ) => { - handleClick(option) - }} - > - <p>{option.name}</p> - </li> - ) - })} + {options.map((option) => ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions + <li + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === ' ') { + openMenu() + } + }} + + onClick={( + // eslint-disable-next-line @typescript-eslint/no-unused-vars + event: React.MouseEvent<HTMLElement, MouseEvent>, + ) => { + handleClick(option) + }} + > + <p>{option.name}</p> + </li> + ))} </DropDownList> )} </div> @@ -105,4 +122,10 @@ function DropDown(props: IProps) { ) } + +DropDown.defaultProps = + { + placeholder: undefined, + } + export default DropDown diff --git a/frontend/src/components/logobars/LogoBar.tsx b/frontend/src/components/logobars/LogoBar.tsx index f79379488fa161139b1fa67d3378b1a336d61db1..2af512f339f8742d8428050f52ea4753ea82c047 100644 --- a/frontend/src/components/logobars/LogoBar.tsx +++ b/frontend/src/components/logobars/LogoBar.tsx @@ -1,10 +1,11 @@ -import { appInst } from 'appConfig' +import React from 'react' +import { appTheme } from 'appConfig' import UiOLogoBar from './UiO' import UiBLogoBar from './UiB' function LogoBar() { - switch (appInst) { + switch (appTheme) { case 'uio': return <UiOLogoBar /> case 'uib': diff --git a/frontend/src/components/logobars/UiB.tsx b/frontend/src/components/logobars/UiB.tsx index 0475fa932648f996ee638213f62c323db6242ba4..059ac0d05a1f779ac73565cfba4937b26d3d246c 100644 --- a/frontend/src/components/logobars/UiB.tsx +++ b/frontend/src/components/logobars/UiB.tsx @@ -1,8 +1,6 @@ import React from 'react' import styled from 'styled-components/macro' -import { useTranslation } from 'react-i18next' - const LogoBarWrapper = styled.div` background-color: ${(props) => props.theme.colors.secondary}); @@ -15,8 +13,6 @@ const LogoBar = styled.div` ` function UiBLogoBar() { - const { i18n, t } = useTranslation(['common', 'footer']) - return ( <LogoBarWrapper> <LogoBar> diff --git a/frontend/src/components/logobars/UiO.tsx b/frontend/src/components/logobars/UiO.tsx index a95cb7a4cb0bae741625ee0ddfb310dd076e1c61..8796ac584d1d430e2be16ad14e6a10c0b8f32dc3 100644 --- a/frontend/src/components/logobars/UiO.tsx +++ b/frontend/src/components/logobars/UiO.tsx @@ -10,10 +10,6 @@ const LogoBarWrapper = styled.div` background-color: ${({ theme }) => theme.page.headerBackgroundColor}; ` -const LogoBar = styled.div` - margin: 0 auto; -` - type Language = { language: string } @@ -25,7 +21,7 @@ const Logo = styled.div<Language>` ` function UiOLogoBar() { - const { i18n, t } = useTranslation(['common', 'footer']) + const { i18n } = useTranslation(['common', 'footer']) return ( <LogoBarWrapper> diff --git a/frontend/src/routes/components/footer.tsx b/frontend/src/routes/components/footer.tsx index ee2b9535c66136bb414734ebd62d29380feb0b84..f6821a56c801a7ae8588bbb35b3c1dc9c8f0306d 100644 --- a/frontend/src/routes/components/footer.tsx +++ b/frontend/src/routes/components/footer.tsx @@ -44,7 +44,7 @@ const ContentContainer = styled.div` ` const Footer: React.FunctionComponent = () => { - const { i18n, t } = useTranslation(['common', 'footer']) + const { t } = useTranslation(['common', 'footer']) return ( <>