mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-07 14:20:31 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

fix: date question accessibility (#4698)

Browse Source 
Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>
This commit is contained in:
Piyush Gupta
2025-02-12 16:17:54 +05:30
committed by GitHub
parent a9fe05d64a
commit 22e8a137ef
4 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/surveys/src/components/questions/date-question.tsx
View File

@@ -158,7 +158,7 @@ export function DateQuestion({
subheader={question.subheader ? getLocalizedValue(question.subheader, languageCode) : ""}
questionId={question.id}
/>
<div className="fb-text-red-600">
<div id="error-message" className="fb-text-red-600" aria-live="assertive">
<span>{errorMessage}</span>
</div>
<div
@@ -166,7 +166,7 @@ export function DateQuestion({
id="date-picker-root">
<div className="fb-relative">
{!datePickerOpen && (
<div
<button
onClick={() => {
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">
<div className="fb-flex fb-items-center fb-gap-2">
{selectedDate ? (
@@ -186,7 +188,7 @@ export function DateQuestion({
</div>
)}
</div>
</div>
</button>
)}
<DatePicker
@@ -222,14 +224,14 @@ export function DateQuestion({
"calendar-root !fb-bg-input-bg fb-border fb-border-border fb-rounded-custom fb-p-3 fb-h-[46dvh] sm:fb-h-[33dvh] fb-overflow-auto",
tileClassName: ({ date }: { date: Date }) => {
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);

25
packages/surveys/src/lib/styles.ts
View File

@@ -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

2
packages/surveys/src/styles/global.css
View File

@@ -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;
}

1
packages/surveys/tailwind.config.cjs
View File

@@ -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)",