Fix accessibility issues

@@ -34,7 +34,7 @@ const Select = styled.select`  bottom: 5px;  right: 5px;  z-index: 2;  background-color: ${(props) => props.theme.colors.four};  background-color: ${(props) => props.theme.colors.two};  color: white;  padding: 5px;  border: none;

@@ -77,7 +77,7 @@ const Time = styled.div`  font-variant-numeric: tabular-nums;  @media (${(props) => props.theme.breakpoint}) {    font-size: 4em;    font-size: 5em;  }`;

@@ -113,9 +113,9 @@ const Note = styled.input`  }  @media (${(props) => props.theme.breakpoint}) {    padding: 5px 15px;    padding: 10px 20px;    font-size: 1.2em;    width: 225px;    width: 280px;    margin-top: 20px;  }`;

@@ -146,8 +146,8 @@ const Button = styled.button`  }  @media (${(props) => props.theme.breakpoint}) {    font-size: 0.7em;    padding: 10px 15px;    font-size: 0.9em;    padding: 15px 25px;    width: 100%;  }`;

@@ -5,6 +5,7 @@ const nextConfig = withPWA({  webpack5: true,  pwa: {    dest: "public",    disable: process.env.NODE_ENV === "development",    runtimeCaching,  },});

@@ -149,6 +149,10 @@ const Grid = styled.div`  grid-template-rows: repeat(3, 1fr);  width: 100%;  height: 100vh;  @media (${(props) => props.theme.breakpoint}) {    grid-template-columns: 5% 1fr 5%;  }`;const Main = styled.main`

@@ -50,6 +50,10 @@ const Grid = styled.div`  grid-template-rows: repeat(3, 1fr);  width: 100%;  height: 100vh;  @media (${(props) => props.theme.breakpoint}) {    grid-template-columns: 5% 1fr 5%;  }`;const Main = styled.main`

@@ -101,6 +101,10 @@ const Grid = styled.div`  grid-template-columns: 20% 1fr 20%;  width: 100%;  height: 100vh;  @media (${(props) => props.theme.breakpoint}) {    grid-template-columns: 5% 1fr 5%;  }`;const Main = styled.main`