Added proper dom representations to Text elements and increased party text size

src/components/Nickname.js

@@ -8,12 +8,13 @@ function Nickname({ nickname, stream }) {
 
   return (
     <Text
+      as="p"
       my={1}
-      variant="caption"
+      variant="body2"
       sx={{
-        fontSize: 10,
         position: "relative",
         cursor: stream ? "pointer" : "default",
+        fontSize: "12px",
       }}
       onClick={() => stream && setStreamMuted(!streamMuted)}
     >

src/components/Party.js

@@ -33,7 +33,7 @@ function Party({
           width: "100%",
         }}
       >
-        <Text mb={1} variant="heading">
+        <Text mb={1} variant="heading" as="h1">
           Party
         </Text>
       </Box>

src/components/SizeInput.js

@@ -4,7 +4,7 @@ import { Box, Flex, IconButton, Text } from "theme-ui";
 function SizeInput({ value, onChange }) {
   return (
     <Box>
-      <Text sx={{ textAlign: "center" }} variant="heading">
+      <Text sx={{ textAlign: "center" }} variant="heading" as="h1">
         Size
       </Text>
       <Flex sx={{ alignItems: "center", justifyContent: "center" }}>
@@ -24,7 +24,9 @@ function SizeInput({ value, onChange }) {
             <path d="M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z" />
           </svg>
         </IconButton>
-        <Text>{value}</Text>
+        <Text as="p" aria-label="Current Token Size">
+          {value}
+        </Text>
         <IconButton
           aria-label="Increase Token Size"
           title="Increase Token Size"

src/components/StartStreamButton.js

@@ -16,7 +16,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
 
   const unavailableMessage = (
     <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
-      <Text>
+      <Text as="p">
         Browser not supported.
         <br />
         <br />
@@ -27,7 +27,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
 
   const noAudioMessage = (
     <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
-      <Text>
+      <Text as="p">
         No audio found in screen share.
         <br />
         Ensure "Share audio" is selected when sharing.
@@ -94,7 +94,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
           <Label pt={2} pb={1}>
             Radio (experimental)
           </Label>
-          <Text mb={2} variant="caption">
+          <Text as="p" mb={2} variant="caption">
             Share your computers audio with the party
           </Text>
           {!isSupported && unavailableMessage}

src/routes/Home.js

@@ -24,7 +24,7 @@ function Home() {
           justifyContent: "center",
         }}
       >
-        <Text variant="display" sx={{ textAlign: "center" }}>
+        <Text variant="display" as="h1" sx={{ textAlign: "center" }}>
           Owlbear Rodeo
         </Text>
         <Image src={owlington} m={2} />
@@ -34,7 +34,7 @@ function Home() {
         <Button m={2} onClick={handleJoinGame}>
           Join Game
         </Button>
-        <Text variant="caption" sx={{ textAlign: "center" }}>
+        <Text variant="caption" as="p" sx={{ textAlign: "center" }}>
           Alpha v0.6.1
         </Text>
       </Flex>