From ddb7a086b7e4094a8a6006df383c1d508693f617 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Wed, 16 Jun 2021 11:35:53 +0300
Subject: [PATCH] Fix some accessibility issues
---
src/client/components/App.js | 8 ++++++--
src/client/components/perspectives/sampo/Footer.js | 12 ++++++------
src/client/components/perspectives/sampo/TopBar.js | 12 ++++++++++--
src/client/configs/sampo/GeneralConfig.js | 3 ++-
4 files changed, 24 insertions(+), 11 deletions(-)
diff --git a/src/client/components/App.js b/src/client/components/App.js
index 62ba0261..1ca93903 100644
--- a/src/client/components/App.js
+++ b/src/client/components/App.js
@@ -1,11 +1,15 @@
import React from 'react'
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
import SemanticPortal from '../containers/SemanticPortal'
-import deepPurple from '@material-ui/core/colors/deepPurple'
const theme = createMuiTheme({
palette: {
- primary: deepPurple
+ primary: {
+ main: '#212121'
+ },
+ secondary: {
+ main: '#f44336'
+ }
},
overrides: {
MuiTooltip: {
diff --git a/src/client/components/perspectives/sampo/Footer.js b/src/client/components/perspectives/sampo/Footer.js
index 9c630360..4763255a 100644
--- a/src/client/components/perspectives/sampo/Footer.js
+++ b/src/client/components/perspectives/sampo/Footer.js
@@ -53,27 +53,27 @@ const useStyles = makeStyles(theme => ({
display: 'flex',
alignItems: 'center'
},
- logo: props => ({
- height: 40,
- [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
- height: 40
- }
- }),
aaltoLogo: props => ({
+ width: 143,
height: 29,
[theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ width: 167,
height: 34
}
}),
hyLogo: props => ({
+ width: 157,
height: 42,
[theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ width: 168,
height: 45
}
}),
heldigLogo: props => ({
+ width: 118,
height: 30,
[theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+ width: 130,
height: 33
}
})
diff --git a/src/client/components/perspectives/sampo/TopBar.js b/src/client/components/perspectives/sampo/TopBar.js
index d4bb415b..a7e60934 100644
--- a/src/client/components/perspectives/sampo/TopBar.js
+++ b/src/client/components/perspectives/sampo/TopBar.js
@@ -89,11 +89,15 @@ const useStyles = makeStyles(theme => ({
mainLogoTypography: {
whiteSpace: 'nowrap',
[theme.breakpoints.down('sm')]: {
- fontSize: '1rem'
+ fontSize: '1.25rem',
+ fontWeight: 600
}
// [theme.breakpoints.down('xs')]: {
// display: 'none'
// }
+ },
+ mobileMenuButton: {
+ padding: 12
}
}))
@@ -304,7 +308,11 @@ const TopBar = props => {
loadLocales={props.loadLocales}
location={props.location}
/>}
- <IconButton aria-haspopup='true' onClick={handleMobileMenuOpen} color='inherit'>
+ <IconButton
+ aria-label='display more actions' color='inherit'
+ className={classes.mobileMenuButton}
+ onClick={handleMobileMenuOpen}
+ >
<MoreIcon />
</IconButton>
</div>
diff --git a/src/client/configs/sampo/GeneralConfig.js b/src/client/configs/sampo/GeneralConfig.js
index afec426d..4fdb723a 100644
--- a/src/client/configs/sampo/GeneralConfig.js
+++ b/src/client/configs/sampo/GeneralConfig.js
@@ -37,7 +37,8 @@ export const layoutConfig = {
topBar: {
showLanguageButton: true,
feedbackLink: 'https://link.webropolsurveys.com/',
- reducedHeight: 44,
+ // 48 px is minimun for tab targets: https://web.dev/tap-targets/?utm_source=lighthouse&utm_medium=devtools#how-to-fix-your-tap-targets
+ reducedHeight: 48,
defaultHeight: 64,
mobileMenuBreakpoint: 1360
},
--
GitLab