a11y support

components/CustomError.tsx

@@ -31,6 +31,7 @@ const CustomError: FC<Props> = ({ statusCode }) => (
         <VStack h="100vh">
             <Header/>
             <Stack
+                as="main"
                 flexGrow={1}
                 color={useColorModeValue("lingva.900", "lingva.100")}
                 direction={["column", null, "row"]}

components/Footer.tsx

@@ -7,11 +7,12 @@ type Props = {
 
 const Footer: FC<Props> = (props) => (
     <Center
+        as="footer"
         w="full"
         p={3}
         fontSize={["sm", null, "md"]}
         bgColor={useColorModeValue("lingva.100", "lingva.900")}
-        color={useColorModeValue("lingva.800", "lingva.200")}
+        color={useColorModeValue("lingva.900", "lingva.100")}
         {...props}
     >
         <Text as="span">&#169; 2021 TheDavidDelta</Text>

components/Header.tsx

@@ -10,6 +10,7 @@ type Props = {
 
 const Header: FC<Props> = (props) => (
     <Flex
+        as="header"
         px={1}
         py={3}
         justify="space-around"

components/LangSelect.tsx

@@ -1,6 +1,7 @@
 import { FC, ChangeEvent } from "react";
 import { Select } from "@chakra-ui/react";
 
+
 type Props = {
     value: string,
     onChange: (e: ChangeEvent<any>) => void,
@@ -15,6 +16,7 @@ const LangSelect: FC<Props> = ({ value, onChange, langs, ...props }) => (
         variant="flushed"
         px={2}
         textAlign="center"
+        style={{ textAlignLast: "center" }}
         {...props}
     >
         {langs.map(([code, name]) => (

components/TranslationArea.tsx

@@ -13,6 +13,8 @@ const TranslationArea: FC<Props> = ({ value, onChange, readOnly, ...props }) =>
         value={value}
         onChange={onChange}
         readOnly={readOnly}
+        lang="auto"
+        dir="auto"
         resize="none"
         rows={useBreakpointValue([6, null, 12]) ?? undefined}
         size="lg"