From c745416a6a94a3c1eb9204f2beadaa9ccdcdcd11 Mon Sep 17 00:00:00 2001 From: Pedro Duarte Date: Thu, 22 Jul 2021 14:16:54 +0200 Subject: [PATCH] Make collapsible time options accessible to screen readers --- package.json | 1 + pages/[user]/[type].tsx | 29 ++++++++------ yarn.lock | 87 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 104 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 2875cf5368..3194fd278d 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@heroicons/react": "^1.0.1", "@jitsu/sdk-js": "^2.0.1", "@prisma/client": "^2.23.0", + "@radix-ui/react-collapsible": "^0.0.16", "@tailwindcss/forms": "^0.2.1", "async": "^3.2.0", "bcryptjs": "^2.4.3", diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx index 04cdbd76a0..ec8677f4b7 100644 --- a/pages/[user]/[type].tsx +++ b/pages/[user]/[type].tsx @@ -4,6 +4,7 @@ import Head from "next/head"; import { ChevronDownIcon, ClockIcon, GlobeIcon } from "@heroicons/react/solid"; import { useRouter } from "next/router"; import dayjs, { Dayjs } from "dayjs"; +import * as Collapsible from "@radix-ui/react-collapsible"; import prisma, { whereAndSelect } from "@lib/prisma"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry"; @@ -139,19 +140,21 @@ export default function Type(props): Type { {props.eventType.length} minutes

- - {isTimeOptionsOpen && ( - - )} + + + + + {timeZone()} + + + + + + +

{props.eventType.description}