feat: support exposing Feedback as a landmark if needed

fremtind · Sep 27, 2024 · 5c1710a · 5c1710a
1 parent b511dfc
commit 5c1710a
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/packages/feedback-react/src/Feedback.tsx b/packages/feedback-react/src/Feedback.tsx
@@ -41,16 +41,24 @@ type Props = {
      * - `message`: Eventuell utfyllende melding fra bruker. Blir kun sendt inn ved aktiv innsending
      */
     onSubmit: (value: FeedbackType) => void;
-
     followup?: FollowupProps;
     contactQuestion?: ContactQuestionProps;
+    /**
+     * Hvis du ønsker at Feedback formen skal eksponeres som et landmark kan du sende inn
+     * hva du ønsker at en skjermleser skal kalle den her. Bare eksponer Feedback som et
+     * landmark på sider der den er en viktig del av innholdet, feks en kvitteringsside
+     * eller et annet sted det å kunne gi tilbakemelding vil føles naturlig eller forventet
+     * for brukeren.
+     */
+    landmarkLabel?: string;
 } & Pick<BaseTextAreaProps, "counter">;
 
 export const Feedback = ({
     className,
     followup,
     contactQuestion,
     counter,
+    landmarkLabel,
     ...mainQuestionProps
 }: Props): ReactElement => {
     const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
@@ -67,6 +75,7 @@ export const Feedback = ({
                     followupSubmitted,
                     contactSubmitted,
                     counter,
+                    landmarkLabel,
                     setFeedbackSubmitted,
                     setFollowupStarted,
                     setFollowupSubmitted,

diff --git a/packages/feedback-react/src/feedbackContext.tsx b/packages/feedback-react/src/feedbackContext.tsx
@@ -7,6 +7,7 @@ type FeedbackContext = {
     followupStarted: boolean;
     followupSubmitted: boolean;
     contactSubmitted: boolean;
+    landmarkLabel?: string;
     setFeedbackSubmitted: (state: boolean) => void;
     setFollowupStarted: (state: boolean) => void;
     setFollowupSubmitted: (state: boolean) => void;

diff --git a/packages/feedback-react/src/followup/Followup.tsx b/packages/feedback-react/src/followup/Followup.tsx
@@ -29,7 +29,8 @@ export const Followup: FC<Props> = ({ questions, successMessage = defaultSuccess
     const focusRef = useRef<HTMLParagraphElement>(null);
     const followupState = useFollowup(questions, onSubmit);
     const { handleAbort, handleNext, step, submitted } = followupState;
-    const { followupStarted, setFollowupStarted, setFollowupSubmitted, contactSubmitted } = useFeedbackContext();
+    const { followupStarted, setFollowupStarted, setFollowupSubmitted, contactSubmitted, landmarkLabel } =
+        useFeedbackContext();
 
     useEffect(() => {
         if (step.number === 0) {
@@ -67,7 +68,7 @@ export const Followup: FC<Props> = ({ questions, successMessage = defaultSuccess
                     </div>
                 )}
                 {!submitted && followupStarted && (
-                    <form onSubmit={handleNext} className="jkl-feedback__fade-in">
+                    <form onSubmit={handleNext} className="jkl-feedback__fade-in" aria-label={landmarkLabel}>
                         <p className="jkl-feedback__step-counter" ref={focusRef}>
                             Steg {step.number + 1} av {questions.length}
                         </p>

diff --git a/packages/feedback-react/src/main-question/MainQuestion.tsx b/packages/feedback-react/src/main-question/MainQuestion.tsx
@@ -40,7 +40,7 @@ export const MainQuestion: FC<Props> = ({
 }) => {
     const mainQuestionState = useMainQuestion(onSubmit);
 
-    const { setFeedbackSubmitted, contactSubmitted } = useFeedbackContext();
+    const { setFeedbackSubmitted, contactSubmitted, landmarkLabel } = useFeedbackContext();
     const { handleSubmit, currentValue, setCurrentValue, submitted } = mainQuestionState;
     const [submitWrapperRef] = useAnimatedHeight<HTMLDivElement>(currentValue !== undefined);
 
@@ -54,7 +54,7 @@ export const MainQuestion: FC<Props> = ({
         <>
             {!submitted && (
                 <MainQuestionContextProvider state={mainQuestionState}>
-                    <form onSubmit={handleSubmit}>
+                    <form onSubmit={handleSubmit} aria-label={landmarkLabel}>
                         <MainQuestionComp label={label} options={options} helpLabel={helpLabel} />
                         <div
                             ref={submitWrapperRef}

diff --git a/packages/feedback-react/src/questions/ContactQuestion.tsx b/packages/feedback-react/src/questions/ContactQuestion.tsx
@@ -70,7 +70,7 @@ export const ContactQuestion: FC<Props> = ({
     const [shouldValidate, setShouldValidate] = useState(false);
 
     const [noThanks, setNoThanks] = useState(false);
-    const { contactSubmitted, setContactSubmitted } = useFeedbackContext();
+    const { contactSubmitted, setContactSubmitted, landmarkLabel } = useFeedbackContext();
 
     const ChildrenWrapper = typeof children === "string" ? "p" : "div";
 
@@ -122,7 +122,7 @@ export const ContactQuestion: FC<Props> = ({
     }
 
     return (
-        <form className="jkl-spacing-xl--top" onSubmit={handleSubmit}>
+        <form className="jkl-spacing-xl--top" onSubmit={handleSubmit} aria-label={landmarkLabel}>
             <p className="jkl-heading-4 jkl-spacing-xs--bottom">{label}</p>
             {children && <ChildrenWrapper className="jkl-body">{children}</ChildrenWrapper>}