Ahmad YasserandGitHub
3052cf5157
Add aria-label to the TimeFormatToggle and LayoutToggle components on the booking page so screen readers can identify these radio groups. Uses existing translation keys "time_format" and "layout". Fixes #20703
28 lines
989 B
TypeScript
28 lines
989 B
TypeScript
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { TimeFormat } from "@calcom/lib/timeFormat";
|
|
import { ToggleGroup } from "@calcom/ui/components/form";
|
|
|
|
import { useTimePreferences } from "@calcom/features/bookings/lib";
|
|
|
|
export const TimeFormatToggle = ({ customClassName }: { customClassName?: string }) => {
|
|
const timeFormat = useTimePreferences((state) => state.timeFormat);
|
|
const setTimeFormat = useTimePreferences((state) => state.setTimeFormat);
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<ToggleGroup
|
|
customClassNames={customClassName}
|
|
onValueChange={(newFormat) => {
|
|
if (newFormat && newFormat !== timeFormat) setTimeFormat(newFormat as TimeFormat);
|
|
}}
|
|
defaultValue={timeFormat}
|
|
value={timeFormat}
|
|
aria-label={t("time_format")}
|
|
options={[
|
|
{ value: TimeFormat.TWELVE_HOUR, label: t("12_hour_short") },
|
|
{ value: TimeFormat.TWENTY_FOUR_HOUR, label: t("24_hour_short") },
|
|
]}
|
|
/>
|
|
);
|
|
};
|