Skip to content

Commit 45d10a3

Browse files
PeerRichkodiakhq[bot]sean-brydon
authored
a11y: right-to-left improvements (#6235)
* fixed a ton of rtl issues * removed duplicant Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: sean-brydon <[email protected]>
1 parent 9250b20 commit 45d10a3

File tree

90 files changed

+248
-207
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+248
-207
lines changed

‎apps/web/components/Embed.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -639,7 +639,7 @@ const ChooseEmbedTypesDialogContent = () => {
639639
<div className="flex items-start">
640640
{embeds.map((embed, index) => (
641641
<button
642-
className="mr-2 w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-neutral-100"
642+
className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-neutral-100 ltr:mr-2 rtl:ml-2"
643643
key={index}
644644
data-testid={embed.type}
645645
onClick={() => {
@@ -914,7 +914,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
914914
<div
915915
className={classNames(
916916
"mt-4 flex items-center justify-start",
917-
embedType === "floating-popup" ? "space-x-2" : "hidden"
917+
embedType === "floating-popup" ? "space-x-2 rtl:space-x-reverse" : "hidden"
918918
)}>
919919
<Switch
920920
defaultChecked={true}
@@ -1010,7 +1010,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
10101010
</CollapsibleTrigger>
10111011
<CollapsibleContent>
10121012
<div className="mt-6 text-sm">
1013-
<div className="mb-4 flex items-center justify-start space-x-2">
1013+
<div className="mb-4 flex items-center justify-start space-x-2 rtl:space-x-reverse">
10141014
<Switch
10151015
checked={previewState.hideEventTypeDetails}
10161016
onCheckedChange={(checked) => {

‎apps/web/components/apps/IntegrationListItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ function IntegrationListItem(props: {
5656
<ListItemText component="p">{props.description}</ListItemText>
5757
{/* Alert error that key stopped working. */}
5858
{props.invalidCredential && (
59-
<div className="flex items-center space-x-2">
59+
<div className="flex items-center space-x-2 rtl:space-x-reverse">
6060
<Icon.FiAlertCircle className="w-8 text-red-500 sm:w-4" />
6161
<ListItemText component="p" className="whitespace-pre-wrap text-red-500">
6262
{t("invalid_credential")}

‎apps/web/components/booking/AvailableEventLocations.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
1616
return (
1717
<div key={location.type} className="flex flex-row items-center text-sm font-medium">
1818
{eventLocationType.iconUrl === "/link.svg" ? (
19-
<Icon.FiLink className="dark:text-darkgray-600 mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 " />
19+
<Icon.FiLink className="dark:text-darkgray-600 ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
2020
) : (
2121
<img
2222
src={eventLocationType.iconUrl}
2323
className={classNames(
24-
"mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
24+
"ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
2525
!eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
2626
)}
2727
alt={`${eventLocationType.label} icon`}

‎apps/web/components/booking/BookingDescription.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const BookingDescription: FC<Props> = (props) => {
9595
<div>
9696
<Icon.FiInfo
9797
className={classNames(
98-
"mr-[10px] ml-[2px] inline-block h-4 w-4",
98+
"ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
9999
isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
100100
)}
101101
/>
@@ -112,7 +112,7 @@ const BookingDescription: FC<Props> = (props) => {
112112
isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
113113
)}>
114114
<div>
115-
<Icon.FiCheckSquare className="mr-[10px] ml-[2px] inline-block h-4 w-4 " />
115+
<Icon.FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
116116
</div>
117117
{requiresConfirmationText}
118118
</div>
@@ -127,7 +127,7 @@ const BookingDescription: FC<Props> = (props) => {
127127
)}>
128128
<Icon.FiClock
129129
className={classNames(
130-
"min-h-4 min-w-4 mr-[10px] ml-[2px] inline-block",
130+
"min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
131131
isBookingPage && "mt-[2px]"
132132
)}
133133
/>

‎apps/web/components/booking/BookingListItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -363,7 +363,7 @@ function BookingListItem(booking: BookingItemProps) {
363363
<span> </span>
364364

365365
{!!booking?.eventType?.price && !booking.paid && (
366-
<Badge className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex" variant="orange">
366+
<Badge className="hidden ltr:ml-2 ltr:mr-2 rtl:ml-2 sm:inline-flex" variant="orange">
367367
{t("pending_payment")}
368368
</Badge>
369369
)}

‎apps/web/components/booking/pages/AvailabilityPage.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ function TimezoneDropdown({
221221
<Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
222222
<Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 !mt-2 inline-block self-start rounded-md px-2 py-2 text-left text-gray-600">
223223
<p className="flex items-center text-sm font-medium">
224-
<Icon.FiGlobe className="min-h-4 min-w-4 mr-[10px] ml-[2px] -mt-[2px] inline-block" />
224+
<Icon.FiGlobe className="min-h-4 min-w-4 ml-[2px] -mt-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]" />
225225
{timeZone}
226226
{isTimeOptionsOpen ? (
227227
<Icon.FiChevronUp className="min-h-4 min-w-4 ml-1 inline-block" />
@@ -368,7 +368,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
368368
<BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
369369
{!rescheduleUid && eventType.recurringEvent && (
370370
<div className="flex items-start text-sm font-medium">
371-
<Icon.FiRefreshCcw className="float-left mr-[10px] mt-[7px] ml-[2px] inline-block h-4 w-4 " />
371+
<Icon.FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
372372
<div>
373373
<p className="mb-1 -ml-2 inline px-2 py-1">
374374
{getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@@ -393,7 +393,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
393393
)}
394394
{stripeAppData.price > 0 && (
395395
<p className="-ml-2 px-2 text-sm font-medium">
396-
<Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
396+
<Icon.FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
397397
<IntlProvider locale="en">
398398
<FormattedNumber
399399
value={stripeAppData.price / 100.0}
@@ -414,7 +414,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
414414
{t("former_time")}
415415
</p>
416416
<p className="text-gray-500 line-through dark:text-darkgray-600">
417-
<CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
417+
<CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
418418
{typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
419419
</p>
420420
</div>

‎apps/web/components/booking/pages/BookingPage.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -501,7 +501,7 @@ const BookingPage = ({
501501
<BookingDescription isBookingPage profile={profile} eventType={eventType}>
502502
{stripeAppData.price > 0 && (
503503
<p className="text-bookinglight -ml-2 px-2 text-sm ">
504-
<Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
504+
<Icon.FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
505505
<IntlProvider locale="en">
506506
<FormattedNumber
507507
value={stripeAppData.price / 100.0}
@@ -513,7 +513,7 @@ const BookingPage = ({
513513
)}
514514
{!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
515515
<div className="items-start text-sm font-medium text-gray-600 dark:text-white">
516-
<Icon.FiRefreshCw className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
516+
<Icon.FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
517517
<p className="-ml-2 inline-block items-center px-2">
518518
{getEveryFreqFor({
519519
t,
@@ -524,7 +524,7 @@ const BookingPage = ({
524524
</div>
525525
)}
526526
<div className="text-bookinghighlight flex items-start text-sm">
527-
<Icon.FiCalendar className="mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4" />
527+
<Icon.FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
528528
<div className="text-sm font-medium">
529529
{(rescheduleUid || !eventType.recurringEvent?.freq) && `${parseDate(date, i18n)}`}
530530
{!rescheduleUid &&
@@ -552,15 +552,15 @@ const BookingPage = ({
552552
{t("former_time")}
553553
</p>
554554
<p className="line-through ">
555-
<Icon.FiCalendar className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
555+
<Icon.FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
556556
{typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
557557
</p>
558558
</div>
559559
)}
560560
{!!eventType.seatsPerTimeSlot && (
561561
<div className="text-bookinghighlight flex items-start text-sm">
562562
<Icon.FiUser
563-
className={`mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4 ${
563+
className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
564564
booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
565565
? "text-rose-600"
566566
: booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
@@ -623,7 +623,7 @@ const BookingPage = ({
623623
/>
624624
{bookingForm.formState.errors.email && (
625625
<div className="mt-2 flex items-center text-sm text-red-700 ">
626-
<Icon.FiInfo className="mr-2 h-3 w-3" />
626+
<Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
627627
<p>{t("email_validation_error")}</p>
628628
</div>
629629
)}
@@ -664,7 +664,7 @@ const BookingPage = ({
664664
value={location.type}
665665
defaultChecked={i === 0}
666666
/>
667-
<span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
667+
<span className="text-sm ltr:ml-2 ltr:mr-2 rtl:ml-2 dark:text-white">
668668
{locationKeyToString(location)}
669669
</span>
670670
</label>
@@ -716,7 +716,7 @@ const BookingPage = ({
716716
</div>
717717
{bookingForm.formState.errors.phone && (
718718
<div className="mt-2 flex items-center text-sm text-red-700 ">
719-
<Icon.FiInfo className="mr-2 h-3 w-3" />
719+
<Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
720720
<p>{t("invalid_number")}</p>
721721
</div>
722722
)}
@@ -834,7 +834,7 @@ const BookingPage = ({
834834
/>
835835
{bookingForm.formState.errors?.customInputs?.[input.id] && (
836836
<div className="mt-2 flex items-center text-sm text-red-700 ">
837-
<Icon.FiInfo className="mr-2 h-3 w-3" />
837+
<Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
838838
<p>{t("invalid_number")}</p>
839839
</div>
840840
)}
@@ -914,7 +914,7 @@ const BookingPage = ({
914914
</div>
915915
{bookingForm.formState.errors.smsReminderNumber && (
916916
<div className="mt-2 flex items-center text-sm text-red-700 ">
917-
<Icon.FiInfo className="mr-2 h-3 w-3" />
917+
<Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
918918
<p>{t("invalid_number")}</p>
919919
</div>
920920
)}

‎apps/web/components/dialog/EditLocationDialog.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
354354
/>
355355
{selectedLocation && LocationOptions}
356356
<DialogFooter>
357-
<div className="mt-4 flex justify-end space-x-2">
357+
<div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
358358
<Button
359359
onClick={() => {
360360
setShowLocationModal(false);

‎apps/web/components/eventtype/AvailabilityTab.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
149149
<span className="w-16 sm:w-28 sm:text-left">
150150
{format(dayRange.startTime, timeFormat === 12)}
151151
</span>
152-
<span className="ml-4">-</span>
152+
<span className="ltr:ml-4 rtl:mr-4">-</span>
153153
<div className="ml-6">{format(dayRange.endTime, timeFormat === 12)}</div>
154154
</div>
155155
))}
@@ -164,7 +164,7 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
164164
<hr />
165165
<div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
166166
<span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
167-
<Icon.FiGlobe className="mr-2" />
167+
<Icon.FiGlobe className="ltr:mr-2 rtl:ml-2" />
168168
{schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
169169
</span>
170170
<Button

‎apps/web/components/eventtype/CustomInputTypeForm.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,8 @@ const CustomInputTypeForm: FC<Props> = (props) => {
134134
value={selectedCustomInput?.id || -1}
135135
{...register("id", { valueAsNumber: true })}
136136
/>
137-
<div className="mt-5 flex justify-end space-x-2 sm:mt-4">
138-
<Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2">
137+
<div className="mt-5 flex justify-end space-x-2 rtl:space-x-reverse sm:mt-4">
138+
<Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2 rtl:ml-2">
139139
{t("cancel")}
140140
</Button>
141141
<Button

‎apps/web/components/eventtype/EventLimitsTab.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
197197
label={t("minimum_booking_notice")}
198198
type="number"
199199
placeholder="120"
200-
className="mr-2 mb-0 h-[38px] rounded-[4px]"
200+
className="mb-0 h-[38px] rounded-[4px] ltr:mr-2 rtl:ml-2"
201201
{...formMethods.register("minimumBookingNoticeInDurationType", {
202202
onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
203203
onMinimumNoticeChange(event.target.value),
@@ -327,7 +327,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
327327
</div>
328328
)}
329329
{period.type === "RANGE" && (
330-
<div className="inline-flex space-x-2 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse">
330+
<div className="inline-flex space-x-2 ltr:ml-2 ltr:mr-2 rtl:ml-2 rtl:space-x-reverse">
331331
<Controller
332332
name="periodDates"
333333
control={formMethods.control}
@@ -347,7 +347,9 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
347347
/>
348348
</div>
349349
)}
350-
{period.suffix ? <span className="ltr:ml-2 rtl:mr-2">&nbsp;{period.suffix}</span> : null}
350+
{period.suffix ? (
351+
<span className="ltr:ml-2 ltr:mr-2 rtl:ml-2">&nbsp;{period.suffix}</span>
352+
) : null}
351353
</div>
352354
);
353355
})}
@@ -410,7 +412,9 @@ const BookingLimits = () => {
410412
.map(([key, bookingAmount]) => {
411413
const bookingLimitKey = key as BookingLimitsKey;
412414
return (
413-
<div className="mb-2 flex items-center space-x-2 text-sm" key={bookingLimitKey}>
415+
<div
416+
className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse"
417+
key={bookingLimitKey}>
414418
<Input
415419
id={`${bookingLimitKey}-limit`}
416420
type="number"

‎apps/web/components/eventtype/RecurringEventController.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default function RecurringEventController({
5757
{recurringEventState && (
5858
<div data-testid="recurring-event-collapsible" className="text-sm">
5959
<div className="flex items-center">
60-
<p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
60+
<p className="text-neutral-900 ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
6161
<input
6262
type="number"
6363
min="1"
@@ -89,7 +89,7 @@ export default function RecurringEventController({
8989
/>
9090
</div>
9191
<div className="mt-4 flex items-center">
92-
<p className="mr-2 text-neutral-900">{t("for_a_maximum_of")}</p>
92+
<p className="text-neutral-900 ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
9393
<input
9494
type="number"
9595
min="1"
@@ -105,7 +105,7 @@ export default function RecurringEventController({
105105
setRecurringEventState(newVal);
106106
}}
107107
/>
108-
<p className="mr-2 text-neutral-900">
108+
<p className="text-neutral-900 ltr:mr-2 rtl:ml-2">
109109
{t("events", {
110110
count: recurringEventState.count,
111111
})}

‎apps/web/components/security/DisableTwoFactorModal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
8282
</div>
8383

8484
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
85-
<Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isDisabling}>
85+
<Button type="submit" className="ltr:ml-2 ltr:mr-2 rtl:ml-2" disabled={isDisabling}>
8686
{t("disable")}
8787
</Button>
8888
<Button color="secondary" onClick={onCancel}>

0 commit comments

Comments
 (0)