feat(a11y): update colors and styling to improve accessibility

2021-04-23 13:33:29 +02:00 · 2021-04-23 13:33:29 +02:00 · 9dd9691aa9
parent 8b2f2cc5a0
commit 9dd9691aa9
16 changed files with 148 additions and 96 deletions
--- a/packages/app/components/auth.component.tsx
+++ b/packages/app/components/auth.component.tsx
@ -60,7 +60,7 @@ export const Auth: React.FC<AuthProps> = ({ navigation }) => {
                <Text category="h2" adjustsFontSizeToFit numberOfLines={1}>
                  {translate('general.title')}
                </Text>
-                <Text category="h6" style={styles.subtitle}>
+                <Text style={styles.subtitle}>
                  {translate('auth.subtitle', {
                    word: randomWord(),
                  })}
@ -92,7 +92,9 @@ const styles = StyleSheet.create({
  },
  subtitle: {
    ...Typography.align.center,
-    color: '#9CA3AF',
+    ...Typography.fontSize.base,
+    ...Typography.fontWeight.bold,
+    color: Colors.neutral.gray500,
    marginTop: Sizing.t1,
  },
 })
--- a/packages/app/components/calendar.component.tsx
+++ b/packages/app/components/calendar.component.tsx
@ -4,6 +4,7 @@ import { Divider, List, ListItem, Text } from '@ui-kitten/components'
 import moment from 'moment'
 import React from 'react'
 import { Image, ListRenderItemInfo, StyleSheet, View } from 'react-native'
+import { Colors, Typography } from '../styles'
 import { useChild } from './childContext.component'
 import { CalendarOutlineIcon } from './icon.component'
 import { SaveToCalendar } from './saveToCalendar.component'
@ -22,7 +23,6 @@ export const Calendar = () => {
    </View>
  ) : (
    <List
-      contentContainerStyle={styles.contentContainer}
      data={data.sort((a, b) =>
        a.startDate && b.startDate ? a.startDate.localeCompare(b.startDate) : 0
      )}
@ -31,9 +31,13 @@ export const Calendar = () => {
        <ListItem
          disabled={true}
          title={`${item.title}`}
-          description={`${moment(item.startDate).format(
-            'YYYY-MM-DD'
-          )} (${moment(item.startDate).fromNow()})`}
+          description={(props) => (
+            <Text style={[props?.style, styles.description]}>
+              {`${moment(item.startDate).format('YYYY-MM-DD')} (${moment(
+                item.startDate
+              ).fromNow()})`}
+            </Text>
+          )}
          accessoryLeft={CalendarOutlineIcon}
          accessoryRight={() => <SaveToCalendar event={item} />}
        />
@ -55,7 +59,8 @@ const styles = StyleSheet.create({
    height: '100%',
    width: '100%',
  },
-  contentContainer: {
-    padding: 10,
+  description: {
+    ...Typography.fontSize.xs,
+    color: Colors.neutral.gray500,
  },
 })
--- a/packages/app/components/childListItem.component.tsx
+++ b/packages/app/components/childListItem.component.tsx
@ -181,12 +181,12 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
      onPress={() => navigation.navigate('Child', { child, color })}
    >
      {scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => (
-        <Text appearance="hint" category="c1" key={i}>
+        <Text category="p1" key={i}>
          {`${calendarItem.title} (${displayDate(calendarItem.startDate)})`}
        </Text>
      ))}
      {notificationsThisWeek.slice(0, 3).map((notification, i) => (
-        <Text appearance="hint" category="c1" key={i}>
+        <Text category="p1" key={i}>
          {translate('notifications.notificationTitle', {
            message: notification.message,
            dateCreated: displayDate(notification.dateCreated),
@ -194,7 +194,7 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
        </Text>
      ))}
      {newsThisWeek.slice(0, 3).map((newsItem, i) => (
-        <Text appearance="hint" category="c1" key={i}>
+        <Text category="p1" key={i}>
          {translate('news.notificationTitle', {
            header: newsItem.header,
            published: displayDate(newsItem.published),
@ -204,14 +204,13 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
      {scheduleAndCalendarThisWeek.length ||
      notificationsThisWeek.length ||
      newsThisWeek.length ? null : (
-        <Text appearance="hint" category="c1">
-          {translate('news.noNewNewsItemsThisWeek')}
-        </Text>
+        <Text category="p1">{translate('news.noNewNewsItemsThisWeek')}</Text>
      )}
      <View style={styles.itemFooterAbsence}>
        <Button
          size="small"
          onPress={() => navigation.navigate('Absence', { child })}
+          style={styles.button}
        >
          {translate('abscense.title')}
        </Button>
@ -254,4 +253,8 @@ const styles = StyleSheet.create({
    color: '#500',
  },
  pending: {},
+  button: {
+    backgroundColor: Colors.primary.primary600,
+    borderColor: Colors.primary.primary600,
+  },
 })
--- a/packages/app/components/login.component.tsx
+++ b/packages/app/components/login.component.tsx
@ -171,7 +171,7 @@ export const Login = () => {
        <ButtonGroup style={styles.loginButtonGroup}>
          <Button
            onPress={() => startLogin(socialSecurityNumber)}
-            style={styles.loginButton}
+            style={[styles.button, styles.loginButton]}
            appearance="ghost"
            disabled={loginMethodIndex === 1 && !valid}
            status="primary"
@ -182,7 +182,7 @@ export const Login = () => {
          </Button>
          <Button
            onPress={selectLoginMethod}
-            style={styles.loginMethodButton}
+            style={[styles.button, styles.loginMethodButton]}
            appearance="ghost"
            status="primary"
            accessoryLeft={SelectIcon}
@ -202,6 +202,7 @@ export const Login = () => {
          </Text>

          <Button
+            style={styles.button}
            onPress={() => {
              cancelLoginRequest()
              showModal(false)
@ -239,4 +240,8 @@ const styles = StyleSheet.create({
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  bankIdLoading: { margin: 10 },
+  button: {
+    backgroundColor: Colors.primary.primary600,
+    borderColor: Colors.primary.primary600,
+  },
 })
--- a/packages/app/components/menu.component.tsx
+++ b/packages/app/components/menu.component.tsx
@ -43,7 +43,7 @@ const styles = StyleSheet.create({
    width: '100%',
  },
  contentContainer: {
-    padding: 10,
+    padding: Sizing.t3,
  },
  emptyState: {
    ...LayoutStyle.center,
@ -55,7 +55,7 @@ const styles = StyleSheet.create({
  emptyStateDescription: {
    ...Typography.align.center,
    lineHeight: 21,
-    marginTop: Sizing.t2,
+    marginTop: Sizing.t3,
  },
  emptyStateImage: {
    ...Sizing.aspectRatio(0.8),
--- a/packages/app/components/menuListItem.component.tsx
+++ b/packages/app/components/menuListItem.component.tsx
@ -2,24 +2,24 @@ import { Text, Card } from '@ui-kitten/components'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { MenuItem } from '@skolplattformen/embedded-api'
+import { Colors, Sizing, Typography } from '../styles'

 interface MenuListItemProps {
  item: MenuItem
 }

 export const MenuListItem = ({ item }: MenuListItemProps) => {
-  const cardHeader = () => {
-    return (
-      <View style={styles.topContainer}>
-        <Text category="h6">{`${item.title}`}</Text>
-      </View>
-    )
-  }
-
  return (
    <View style={styles.container}>
-      <Card header={cardHeader} style={styles.contentContainer}>
-        <Text>{`${item.description}`}</Text>
+      <Card
+        header={(props) => (
+          <View {...props}>
+            <Text style={styles.title}>{item.title}</Text>
+          </View>
+        )}
+        style={styles.contentContainer}
+      >
+        <Text category="p1">{item.description}</Text>
      </Card>
    </View>
  )
@ -30,17 +30,19 @@ const styles = StyleSheet.create({
    width: '100%',
  },
  contentContainer: {
-    margin: 5,
+    marginBottom: Sizing.t2,
    justifyContent: 'flex-start',
  },
  topContainer: {
-    margin: 5,
+    margin: Sizing.t1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  listHeader: {
    backgroundColor: '#fff',
-    paddingTop: 10,
-    paddingLeft: 15,
+  },
+  title: {
+    ...Typography.header,
+    color: Colors.neutral.gray700,
  },
 })
--- a/packages/app/components/modalWebView.component.tsx
+++ b/packages/app/components/modalWebView.component.tsx
@ -11,6 +11,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { WebView } from 'react-native-webview'
 import { WebViewNavigationEvent } from 'react-native-webview/lib/WebViewTypes'
+import { Colors, Layout, Sizing } from '../styles'
 import { BackIcon, ExternalLinkIcon } from './icon.component'

 interface ModalWebViewProps {
@ -43,9 +44,11 @@ export const ModalWebView = ({
    setModalVisible(false)
    onClose()
  }
+
  const openInApp = () => {
    Linking.openURL(url)
  }
+
  return (
    <Modal
      animationType="slide"
@ -57,19 +60,21 @@ export const ModalWebView = ({
        <View style={styles.headerWrapper}>
          <View style={styles.header}>
            <TouchableOpacity onPress={closeModal}>
-              <BackIcon style={styles.backIcon} fill="#333333" />
+              <BackIcon style={styles.backIcon} fill={Colors.neutral.gray800} />
            </TouchableOpacity>
            <Text category="s1" style={styles.headerText} numberOfLines={1}>
              {title}
            </Text>
            <TouchableOpacity onPress={openInApp}>
-              <ExternalLinkIcon style={styles.shareIcon} fill="#333333" />
+              <ExternalLinkIcon
+                style={styles.shareIcon}
+                fill={Colors.neutral.gray800}
+              />
            </TouchableOpacity>
          </View>
        </View>
        {(headers || sharedCookiesEnabled) && (
          <WebView
-            style={styles.webview}
            source={{ uri: url, headers }}
            sharedCookiesEnabled={sharedCookiesEnabled}
            thirdPartyCookiesEnabled={sharedCookiesEnabled}
@ -85,14 +90,14 @@ export const ModalWebView = ({

 const styles = StyleSheet.create({
  container: {
-    flex: 1,
+    ...Layout.flex.full,
  },
  headerWrapper: {
-    marginTop: 5,
-    backgroundColor: '#ffffff',
-    padding: 5,
+    marginTop: Sizing.t1,
+    backgroundColor: Colors.neutral.white,
+    padding: Sizing.t1,
    borderRadius: 2,
-    borderColor: '#6B7280',
+    borderColor: Colors.neutral.gray200,
    borderBottomWidth: 1,
  },
  headerText: {
@ -101,11 +106,11 @@ const styles = StyleSheet.create({
    paddingRight: 2,
  },
  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    backgroundColor: '#ffffff',
+    ...Layout.flex.row,
+    ...Layout.mainAxis.center,
+    paddingHorizontal: Sizing.t3,
+    paddingVertical: Sizing.t1,
+    backgroundColor: Colors.neutral.white,
  },
  shareIcon: {
    width: 24,
@ -114,7 +119,6 @@ const styles = StyleSheet.create({
  backIcon: {
    width: 24,
    height: 24,
-    marginRight: 15,
+    marginRight: Sizing.t4,
  },
-  webview: {},
 })
--- a/packages/app/components/newsItem.component.tsx
+++ b/packages/app/components/newsItem.component.tsx
@ -11,6 +11,7 @@ import moment from 'moment'
 import 'moment/locale/sv'
 import React from 'react'
 import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
+import { Colors, Layout, Sizing, Typography } from '../styles'
 import { translate } from '../utils/translation'
 import { BackIcon } from './icon.component'
 import { Image } from './image.component'
@ -75,9 +76,19 @@ export const NewsItem = ({ navigation, route }: NewsItemProps) => {
          <View style={styles.body}>
            <Markdown
              style={{
-                body: { color: '#1F2937', fontSize: 16, lineHeight: 26 },
-                heading1: { color: '#1F2937', fontSize: 20 },
-                heading2: { color: '#1F2937', fontSize: 18 },
+                body: {
+                  ...Typography.fontSize.base,
+                  color: Colors.neutral.gray800,
+                  lineHeight: 26,
+                },
+                heading1: {
+                  ...Typography.fontSize.xl,
+                  color: Colors.neutral.gray800,
+                },
+                heading2: {
+                  ...Typography.fontSize.lg,
+                  color: Colors.neutral.gray800,
+                },
              }}
            >
              {data.body}
@ -94,42 +105,42 @@ export const NewsItem = ({ navigation, route }: NewsItemProps) => {

 const styles = StyleSheet.create({
  safeArea: {
-    flex: 1,
-    backgroundColor: '#fff',
+    ...Layout.flex.full,
+    backgroundColor: Colors.neutral.white,
  },
  topContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    ...Layout.flex.row,
+    ...Layout.crossAxis.spaceBetween,
  },
  article: {
-    padding: 20,
+    padding: Sizing.t5,
  },
  scrollView: {
-    flex: 1,
+    ...Layout.flex.full,
  },
  image: {
    width: '100%',
    minHeight: 300,
-    marginTop: 16,
+    marginTop: Sizing.t4,
  },
  title: {
+    ...Typography.fontWeight.bold,
    fontSize: 30,
-    fontWeight: '700',
    marginBottom: 8,
  },
  subtitle: {
-    color: '#6B7280',
-    fontSize: 12,
+    ...Typography.fontSize.xs,
+    color: Colors.neutral.gray600,
  },
  strong: {
-    color: '#6B7280',
-    fontSize: 12,
-    fontWeight: '700',
+    ...Typography.fontSize.xs,
+    ...Typography.fontWeight.bold,
+    color: Colors.neutral.gray600,
  },
  published: {
-    marginBottom: 4,
+    marginBottom: Sizing.t1,
  },
  body: {
-    marginTop: 16,
+    marginTop: Sizing.t4,
  },
 })
--- a/packages/app/components/newsList.component.tsx
+++ b/packages/app/components/newsList.component.tsx
@ -2,6 +2,7 @@ import { useNews } from '@skolplattformen/api-hooks'
 import { List } from '@ui-kitten/components'
 import React from 'react'
 import { StyleSheet } from 'react-native'
+import { Sizing } from '../styles'
 import { useChild } from './childContext.component'
 import { NewsListItem } from './newsListItem.component'

@ -10,16 +11,12 @@ export const NewsList = () => {
  const { data } = useNews(child)

  return (
-    <>
-      <List
-        style={styles.container}
-        contentContainerStyle={styles.contentContainer}
-        data={data}
-        renderItem={(info) => (
-          <NewsListItem key={info.item.id} item={info.item} />
-        )}
-      />
-    </>
+    <List
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      data={data}
+      renderItem={({ item }) => <NewsListItem key={item.id} item={item} />}
+    />
  )
 }

@ -29,6 +26,6 @@ const styles = StyleSheet.create({
    width: '100%',
  },
  contentContainer: {
-    padding: 10,
+    padding: Sizing.t3,
  },
 })
--- a/packages/app/components/newsListItem.component.tsx
+++ b/packages/app/components/newsListItem.component.tsx
@ -60,7 +60,7 @@ const styles = StyleSheet.create({
    ...Layout.flex.row,
    backgroundColor: Colors.neutral.white,
    borderRadius: 2,
-    borderColor: '#f0f0f0',
+    borderColor: Colors.neutral.gray200,
    borderWidth: 1,
    padding: Sizing.t5,
    marginBottom: Sizing.t2,
@ -69,18 +69,17 @@ const styles = StyleSheet.create({
    ...Layout.flex.full,
  },
  title: {
-    ...Typography.fontWeight.bold,
-    ...Typography.fontSize.lg,
-    marginBottom: 2,
+    ...Typography.header,
+    marginBottom: Sizing.t1,
  },
  subtitle: {
    ...Typography.fontSize.xs,
-    color: '#6B7280',
+    color: Colors.neutral.gray600,
    marginBottom: Sizing.t2,
  },
  intro: {
    ...Typography.fontSize.sm,
-    color: '#374151',
+    color: Colors.neutral.gray700,
  },
  image: {
    borderRadius: 3,
--- a/packages/app/components/notification.component.tsx
+++ b/packages/app/components/notification.component.tsx
@ -57,16 +57,16 @@ const styles = StyleSheet.create({
    ...Layout.flex.full,
    backgroundColor: Colors.neutral.white,
    borderRadius: 2,
-    borderColor: '#f0f0f0',
+    borderColor: Colors.neutral.gray200,
    borderWidth: 1,
    marginBottom: Sizing.t2,
  },
  title: {
    ...Typography.header,
-    marginBottom: 2,
+    marginBottom: Sizing.t1,
  },
  subtitle: {
-    color: '#6B7280',
+    color: Colors.neutral.gray600,
    ...Typography.fontSize.xs,
  },
 })
--- a/packages/app/components/notificationsList.component.tsx
+++ b/packages/app/components/notificationsList.component.tsx
@ -2,6 +2,7 @@ import { useNotifications } from '@skolplattformen/api-hooks'
 import { List } from '@ui-kitten/components'
 import React from 'react'
 import { StyleSheet } from 'react-native'
+import { Sizing } from '../styles'
 import { useChild } from './childContext.component'
 import { Notification } from './notification.component'

@ -27,6 +28,6 @@ const styles = StyleSheet.create({
    width: '100%',
  },
  contentContainer: {
-    padding: 10,
+    padding: Sizing.t3,
  },
 })
--- a/packages/app/ios/Podfile.lock
+++ b/packages/app/ios/Podfile.lock
@ -279,7 +279,7 @@ PODS:
  - react-native-simple-toast (1.1.3):
    - React-Core
    - Toast (~> 4.0.0)
-  - react-native-webview (11.4.2):
+  - react-native-webview (11.3.2):
    - React-Core
  - React-perflogger (0.64.0)
  - React-RCTActionSheet (0.64.0):
@ -540,9 +540,9 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
+  DoubleConversion: cde416483dac037923206447da6e1454df403714
  FBLazyVector: 49cbe4b43e445b06bf29199b6ad2057649e4c8f5
-  FBReactNativeSpec: 0bd88dccda1f83b7a01f01706f3728c8b36a5b30
+  FBReactNativeSpec: bc9813353956ed2de2f370de75d9c1123e81f425
  Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
  Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
  Flipper-Folly: f7a3caafbd74bda4827954fd7a6e000e36355489
@ -550,7 +550,7 @@ SPEC CHECKSUMS:
  Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
  Flipper-RSocket: 602921fee03edacf18f5d6f3d3594ba477f456e5
  FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
-  glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
+  glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
  hermes-engine: 7d97ba46a1e29bacf3e3c61ecb2804a5ddd02d4f
  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
  OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
@ -570,7 +570,7 @@ SPEC CHECKSUMS:
  react-native-restart: 733a51ad137f15b0f8dc34c4082e55af7da00979
  react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
  react-native-simple-toast: bf002828cf816775a6809f7a9ec3907509bce11f
-  react-native-webview: 4c85a3e5de574ee8c2c0985b4bebbdd240f49304
+  react-native-webview: 71567b6bf3d4e55914e580d720cc8f7df64af817
  React-perflogger: 9c547d8f06b9bf00cb447f2b75e8d7f19b7e02af
  React-RCTActionSheet: 3080b6e12e0e1a5b313c8c0050699b5c794a1b11
  React-RCTAnimation: 3f96f21a497ae7dabf4d2f150ee43f906aaf516f
--- a/packages/app/styles/colors.ts
+++ b/packages/app/styles/colors.ts
@ -1,5 +1,22 @@
-type Neutral = 'white' | 'black'
+type Neutral =
+  | 'white'
+  | 'black'
+  | 'gray200'
+  | 'gray500'
+  | 'gray600'
+  | 'gray700'
+  | 'gray800'
 export const neutral: Record<Neutral, string> = {
  white: '#ffffff',
-  black: '#000000',
+  gray200: '#E5E7EB',
+  gray500: '#6B7280', // 4.83 (AA) on white
+  gray600: '#4B5563', // 7.56 (AAA) on white
+  gray700: '#374151', // 10.31 (AAA) on white
+  gray800: '#1F2937', // 14.68 (AAA) on white
+  black: '#000000', // 21 (AAA) on white
+}
+
+type Primary = 'primary600'
+export const primary: Record<Primary, string> = {
+  primary600: '#DB2575',
 }
--- a/packages/app/styles/layout.ts
+++ b/packages/app/styles/layout.ts
@ -10,7 +10,7 @@ export const mainAxis: Record<MainAxis, ViewStyle> = {
  },
 }

-type CrossAxis = 'center' | 'flexEnd' | 'evenly'
+type CrossAxis = 'center' | 'flexEnd' | 'evenly' | 'spaceBetween'
 export const crossAxis: Record<CrossAxis, ViewStyle> = {
  center: {
    justifyContent: 'center',
@ -21,6 +21,9 @@ export const crossAxis: Record<CrossAxis, ViewStyle> = {
  flexEnd: {
    justifyContent: 'flex-end',
  },
+  spaceBetween: {
+    justifyContent: 'space-between',
+  },
 }

 export const center: ViewStyle = {
--- a/packages/app/styles/typography.ts
+++ b/packages/app/styles/typography.ts
@ -1,7 +1,7 @@
 import { TextStyle } from 'react-native'
 import { systemWeights } from 'react-native-typography'

-type FontSize = 'xs' | 'sm' | 'base' | 'lg'
+type FontSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl'
 export const fontSize: Record<FontSize, TextStyle> = {
  xs: {
    fontSize: 12,
@ -15,6 +15,9 @@ export const fontSize: Record<FontSize, TextStyle> = {
  lg: {
    fontSize: 18,
  },
+  xl: {
+    fontSize: 20,
+  },
 }

 type FontWeight = 'regular' | 'semibold' | 'bold'
@ -31,7 +34,7 @@ export const fontWeight: Record<FontWeight, TextStyle> = {
 }

 export const header: TextStyle = {
-  ...fontSize.lg,
+  ...fontSize.base,
  ...fontWeight.bold,
 }