updated focus issue

This commit is contained in:
joyal007
2023-10-04 21:58:08 +05:30
parent a126cc14a0
commit 55c2830085
3 changed files with 6 additions and 3 deletions

View File

@@ -97,13 +97,14 @@ export default function MultipleChoiceSingleQuestion({
}}
className={cn(
value === choice.label ? "z-10 border-slate-400 bg-slate-50" : "border-gray-200",
"relative flex cursor-pointer flex-col rounded-md border p-4 text-slate-800 hover:bg-slate-50 focus:bg-slate-50 focus:outline-none "
"relative flex cursor-pointer flex-col rounded-md border p-4 text-slate-800 hover:bg-slate-50 focus:border-slate-400 focus:bg-slate-50 focus:outline-none "
)}>
<span className="flex items-center text-sm">
<input
type="checkbox"
id={choice.id}
name={question.id}
tabIndex={-1}
value={choice.label}
className="h-4 w-4 border border-slate-300 focus:ring-0 focus:ring-offset-0"
aria-labelledby={`${choice.id}-label`}
@@ -140,6 +141,7 @@ export default function MultipleChoiceSingleQuestion({
<span className="flex items-center text-sm">
<input
type="checkbox"
tabIndex={-1}
id={otherOption.id}
name={question.id}
value={otherOption.label}

View File

@@ -87,6 +87,7 @@ export default function MultipleChoiceSingleQuestion({
id={choice.id}
name={question.id}
value={choice.label}
tabIndex={-1}
className="h-4 w-4 border border-slate-300 focus:ring-0 focus:ring-offset-0"
aria-labelledby={`${choice.id}-label`}
onChange={() => {
@@ -120,7 +121,7 @@ export default function MultipleChoiceSingleQuestion({
<input
type="radio"
id={otherOption.id}
tabIndex={questionChoices.length + 1}
tabIndex={-1}
name={question.id}
value={otherOption.label}
className="h-4 w-4 border border-slate-300 focus:ring-0 focus:ring-offset-0"

View File

@@ -78,7 +78,7 @@ export default function OpenTextQuestion({
onKeyDown={(e) => {
if (e.key == "Enter") onSubmit({ [question.id]: value });
}}
className="block w-full rounded-md border border-slate-100 bg-slate-50 p-2 shadow-sm focus:border-slate-500 focus:ring-0 sm:text-sm"></textarea>
className="block w-full rounded-md border border-slate-100 bg-slate-50 p-2 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-0 sm:text-sm"></textarea>
)}
</div>
<div className="mt-4 flex w-full justify-between">