feat: support exposing Feedback as a landmark if needed

fremtind · Sep 30, 2024 · e29277c · e29277c
1 parent 5583847
commit e29277c
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 14 deletions.
diff --git a/packages/feedback-react/documentation/Feedback.mdx b/packages/feedback-react/documentation/Feedback.mdx
@@ -51,3 +51,8 @@ Funksjonen for håndtering av oppfølgings&shy;spørmål får inn en liste med o
 ```ts
 [{ label: string: name: string; type: "radio" | "checkbox" | "text"; value: string | string[] }]
 ```
+
+### Landmark
+
+Hvis tilbakemeldingskomponenten er en viktig del av siden kan den eksponeres som et landmark.
+Sett da `landmarkLabel` prop men ikke overdriv bruken av landmarks.
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>}
 

diff --git a/packages/jokul/src/components/feedback/Feedback.tsx b/packages/jokul/src/components/feedback/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/jokul/src/components/feedback/feedbackContext.tsx b/packages/jokul/src/components/feedback/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/jokul/src/components/feedback/followup/Followup.tsx b/packages/jokul/src/components/feedback/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/jokul/src/components/feedback/main-question/MainQuestion.tsx b/packages/jokul/src/components/feedback/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/jokul/src/components/feedback/questions/ContactQuestion.tsx b/packages/jokul/src/components/feedback/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>}