From 22e8a137ef88bcc045519b95cc93265c2f923154 Mon Sep 17 00:00:00 2001 From: Piyush Gupta <56182734+gupta-piyush19@users.noreply.github.com> Date: Wed, 12 Feb 2025 16:17:54 +0530 Subject: [PATCH] fix: date question accessibility (#4698) Co-authored-by: pandeymangg Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com> --- .../components/questions/date-question.tsx | 16 ++++++------ packages/surveys/src/lib/styles.ts | 25 +++++++++++-------- packages/surveys/src/styles/global.css | 2 +- packages/surveys/tailwind.config.cjs | 1 + 4 files changed, 26 insertions(+), 18 deletions(-) diff --git a/packages/surveys/src/components/questions/date-question.tsx b/packages/surveys/src/components/questions/date-question.tsx index 48a636c029..543f893563 100644 --- a/packages/surveys/src/components/questions/date-question.tsx +++ b/packages/surveys/src/components/questions/date-question.tsx @@ -158,7 +158,7 @@ export function DateQuestion({ subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""} questionId={question.id} /> -
+
{errorMessage}
{!datePickerOpen && ( -
{ setDatePickerOpen(true); }} @@ -174,6 +174,8 @@ export function DateQuestion({ onKeyDown={(e) => { if (e.key === " ") setDatePickerOpen(true); }} + aria-label={selectedDate ? `You have selected ${formattedDate}` : "Select a date"} + aria-describedby={errorMessage ? "error-message" : undefined} className="focus:fb-outline-brand fb-bg-input-bg hover:fb-bg-input-bg-selected fb-border-border fb-text-heading fb-rounded-custom fb-relative fb-flex fb-h-[12dvh] fb-w-full fb-cursor-pointer fb-appearance-none fb-items-center fb-justify-center fb-border fb-text-left fb-text-base fb-font-normal">
{selectedDate ? ( @@ -186,7 +188,7 @@ export function DateQuestion({
)}
-
+ )} { const baseClass = - "hover:fb-bg-input-bg-selected fb-rounded-custom fb-h-9 fb-p-0 fb-mt-1 fb-font-normal fb-text-heading aria-selected:fb-opacity-100 focus:fb-ring-2 focus:fb-bg-slate-200"; + "hover:fb-bg-input-bg-selected fb-rounded-custom fb-h-9 fb-p-0 fb-mt-1 fb-font-normal aria-selected:fb-opacity-100 focus:fb-ring-2 focus:fb-bg-slate-200"; // today's date class if ( date.getDate() === new Date().getDate() && date.getMonth() === new Date().getMonth() && date.getFullYear() === new Date().getFullYear() ) { - return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-heading focus:fb-ring-2 focus:fb-bg-slate-200`; + return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-calendar-tile focus:fb-ring-2 focus:fb-bg-slate-200`; } // active date class if ( @@ -238,10 +240,10 @@ export function DateQuestion({ date.getMonth() === selectedDate.getMonth() && date.getFullYear() === selectedDate.getFullYear() ) { - return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-heading`; + return `${baseClass} !fb-bg-brand !fb-border-border-highlight !fb-text-calendar-tile`; } - return baseClass; + return `${baseClass} !fb-text-heading`; }, formatShortWeekday: (_: any, date: Date) => { return date.toLocaleDateString("en-US", { weekday: "short" }).slice(0, 2); diff --git a/packages/surveys/src/lib/styles.ts b/packages/surveys/src/lib/styles.ts index 58fc2da75d..c18d067e84 100644 --- a/packages/surveys/src/lib/styles.ts +++ b/packages/surveys/src/lib/styles.ts @@ -77,16 +77,17 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS appendCssVariable("input-background-color", styling.inputColor?.light); if (styling.questionColor?.light) { - let signatureColor = ""; - let brandingColor = ""; - - if (isLight(styling.questionColor.light)) { - signatureColor = mixColor(styling.questionColor.light, "#000000", 0.2); - brandingColor = mixColor(styling.questionColor.light, "#000000", 0.3); - } else { - signatureColor = mixColor(styling.questionColor.light, "#ffffff", 0.2); - brandingColor = mixColor(styling.questionColor.light, "#ffffff", 0.3); - } + const isLightQuestionColor = isLight(styling.questionColor.light); + const signatureColor = mixColor( + styling.questionColor.light, + isLightQuestionColor ? "#000000" : "#ffffff", + 0.2 + ); + const brandingColor = mixColor( + styling.questionColor.light, + isLightQuestionColor ? "#000000" : "#ffffff", + 0.3 + ); appendCssVariable("signature-text-color", signatureColor); appendCssVariable("branding-text-color", brandingColor); @@ -115,6 +116,10 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS appendCssVariable("accent-background-color", accentColor); appendCssVariable("accent-background-color-selected", accentColorSelected); + + if (isLight(brandColor)) { + appendCssVariable("calendar-tile-color", mixColor(brandColor, "#000000", 0.7)); + } } // Close the :root block diff --git a/packages/surveys/src/styles/global.css b/packages/surveys/src/styles/global.css index 436bb72fa1..1732362444 100644 --- a/packages/surveys/src/styles/global.css +++ b/packages/surveys/src/styles/global.css @@ -93,7 +93,7 @@ p.fb-editor-paragraph { --fb-rating-selected: black; --fb-close-btn-color: var(--slate-500); --fb-close-btn-color-hover: var(--slate-700); - + --fb-calendar-tile-color: var(--slate-50); --fb-border-radius: 8px; } diff --git a/packages/surveys/tailwind.config.cjs b/packages/surveys/tailwind.config.cjs index 83487eb2d3..1c3e27c5ad 100644 --- a/packages/surveys/tailwind.config.cjs +++ b/packages/surveys/tailwind.config.cjs @@ -37,6 +37,7 @@ module.exports = { "submit-button-border": "var(--fb-submit-btn-border)", "close-button": "var(--fb-close-btn-color)", "close-button-focus": "var(--fb-close-btn-hover-color)", + "calendar-tile": "var(--fb-calendar-tile-color)", }, borderRadius: { custom: "var(--fb-border-radius)",