diff --git a/packages/feedback-react/documentation/Feedback.mdx b/packages/feedback-react/documentation/Feedback.mdx index 2218d2a4349..634ba03e76a 100644 --- 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­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 index 2aae9cd78da..d48ec707e1d 100644 --- a/packages/feedback-react/src/Feedback.tsx +++ b/packages/feedback-react/src/Feedback.tsx @@ -41,9 +41,16 @@ 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; export const Feedback = ({ @@ -51,6 +58,7 @@ export const Feedback = ({ 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 index 1dfe6a8fbb1..ea13b9e1add 100644 --- 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 index 4920a8348aa..e988a5a25c5 100644 --- a/packages/feedback-react/src/followup/Followup.tsx +++ b/packages/feedback-react/src/followup/Followup.tsx @@ -29,7 +29,8 @@ export const Followup: FC = ({ questions, successMessage = defaultSuccess const focusRef = useRef(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 = ({ questions, successMessage = defaultSuccess )} {!submitted && followupStarted && ( -
+

Steg {step.number + 1} av {questions.length}

diff --git a/packages/feedback-react/src/main-question/MainQuestion.tsx b/packages/feedback-react/src/main-question/MainQuestion.tsx index 4e6d794fd3a..ebed2826511 100644 --- 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 = ({ }) => { const mainQuestionState = useMainQuestion(onSubmit); - const { setFeedbackSubmitted, contactSubmitted } = useFeedbackContext(); + const { setFeedbackSubmitted, contactSubmitted, landmarkLabel } = useFeedbackContext(); const { handleSubmit, currentValue, setCurrentValue, submitted } = mainQuestionState; const [submitWrapperRef] = useAnimatedHeight(currentValue !== undefined); @@ -54,7 +54,7 @@ export const MainQuestion: FC = ({ <> {!submitted && ( - +
= ({ 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 = ({ } return ( - +

{label}

{children && {children}} diff --git a/packages/jokul/src/components/feedback/Feedback.tsx b/packages/jokul/src/components/feedback/Feedback.tsx index 361451f78d1..21040073350 100644 --- a/packages/jokul/src/components/feedback/Feedback.tsx +++ b/packages/jokul/src/components/feedback/Feedback.tsx @@ -41,9 +41,16 @@ 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; export const Feedback = ({ @@ -51,6 +58,7 @@ export const Feedback = ({ 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 index 46672d2b1f7..97405257462 100644 --- 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 index 68f96daf359..ad2344a04cb 100644 --- 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 = ({ questions, successMessage = defaultSuccess const focusRef = useRef(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 = ({ questions, successMessage = defaultSuccess
)} {!submitted && followupStarted && ( - +

Steg {step.number + 1} av {questions.length}

diff --git a/packages/jokul/src/components/feedback/main-question/MainQuestion.tsx b/packages/jokul/src/components/feedback/main-question/MainQuestion.tsx index fbf80d6432d..17a3c898af2 100644 --- 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 = ({ }) => { const mainQuestionState = useMainQuestion(onSubmit); - const { setFeedbackSubmitted, contactSubmitted } = useFeedbackContext(); + const { setFeedbackSubmitted, contactSubmitted, landmarkLabel } = useFeedbackContext(); const { handleSubmit, currentValue, setCurrentValue, submitted } = mainQuestionState; const [submitWrapperRef] = useAnimatedHeight(currentValue !== undefined); @@ -54,7 +54,7 @@ export const MainQuestion: FC = ({ <> {!submitted && ( - +
= ({ 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 = ({ } return ( - +

{label}

{children && {children}}