Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] 리뷰 작성 페이지에서 동적으로 에러가 생기는 경우, 해당 에러를 읽어주는 기능 #891

Merged
merged 9 commits into from
Oct 22, 2024
Merged

[FE] 리뷰 작성 페이지에서 동적으로 에러가 생기는 경우, 해당 에러를 읽어주는 기능 #891

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bdb960e
feat: Checkbox 선택 여부를 스크린 리더 사용자에게 안내하는 기능 추가
ImxYJL Oct 21, 2024
633f65b
feat: 탭 접근성 강화
ImxYJL Oct 21, 2024
0710167
feat: 에러 메세지가 등장하는 경우 해당 에러 메세지 컴포넌트에 포커스를 주는 훅 작성
ImxYJL Oct 21, 2024
832ef12
feat: useFocusMessage 훅 적용
ImxYJL Oct 21, 2024
6bdb641
feat: CheckboxItem을 전체 선택했을 때도 선택 여부를 알려주도록 변경
ImxYJL Oct 21, 2024
095ec22
refactor: handleKeyDown 이벤트 핸들러에서 사용하는 ChangeEvent 타입 캐스팅을 partial을 사…
ImxYJL Oct 21, 2024
304b4f5
Merge branch 'fe/feat/870-checkbox-accessibility' of https://github.c…
ImxYJL Oct 22, 2024
09ad1c7
refactor: 업데이트된 sr-only 스타일 반영
ImxYJL Oct 22, 2024
8820c8a
Merge branch 'develop' of https://github.com/woowacourse-teams/2024-r…
ImxYJL Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions frontend/src/pages/ReviewWritingPage/form/components/MultipleChoiceAnswer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CheckboxItem } from '@/components';
import { useModals } from '@/hooks';
import { useMultipleChoice } from '@/pages/ReviewWritingPage/form/hooks';
import { useMultipleChoice, useFocusMessage } from '@/pages/ReviewWritingPage/form/hooks';
import { StrengthUnCheckModal } from '@/pages/ReviewWritingPage/modals/components';
import { ReviewWritingCardQuestion } from '@/types';

Expand Down Expand Up @@ -28,6 +28,8 @@ const MultipleChoiceAnswer = ({ question }: MultipleChoiceAnswerProps) => {
},
);

const { messageRef } = useFocusMessage<HTMLParagraphElement>({ isMessageShown: isOpenLimitGuide });

const handleModalCancelButtonClick = () => {
closeModal(MODAL_KEY.confirm);
};
Expand All @@ -51,7 +53,9 @@ const MultipleChoiceAnswer = ({ question }: MultipleChoiceAnswerProps) => {
))}
<S.LimitGuideMessage>
{isOpenLimitGuide && (
<p data-testid="limitGuideMessage">😅 최대 {question.optionGroup?.maxCount}개까지 선택가능해요</p>
<p data-testid="limitGuideMessage" tabIndex={-1} ref={messageRef} aria-live="assertive">
😅 최대 {question.optionGroup?.maxCount}개까지 선택가능해요
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이모지는 읽어주지 않는게 좋을 것 같아요. 이모지를 이미지로 빼서, alt ="" 로 하는 것 추천합니다.

</p>
)}
</S.LimitGuideMessage>
{isOpen(MODAL_KEY.confirm) && (
Expand Down
8 changes: 6 additions & 2 deletions frontend/src/pages/ReviewWritingPage/form/components/TextAnswer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useTextAnswer } from '@/pages/ReviewWritingPage/form/hooks';
import { useFocusMessage, useTextAnswer } from '@/pages/ReviewWritingPage/form/hooks';
import { ReviewWritingCardQuestion } from '@/types';

import * as S from './styles';
Expand All @@ -12,6 +12,8 @@ const TextAnswer = ({ question }: TextAnswerProps) => {
question,
});

const { messageRef } = useFocusMessage<HTMLParagraphElement>({ isMessageShown: errorMessage !== '' });

const textLength = `${text.length} / ${maxLength}`;

return (
Expand All @@ -24,7 +26,9 @@ const TextAnswer = ({ question }: TextAnswerProps) => {
onBlur={handleTextAnswerBlur}
/>
<S.TextareaInfoContainer>
<S.ReviewTextareaError>{errorMessage}</S.ReviewTextareaError>
<S.ReviewTextareaError tabIndex={-1} ref={messageRef} aria-live="assertive">
{errorMessage}
</S.ReviewTextareaError>
<S.ReviewTextLength>{textLength}</S.ReviewTextLength>
</S.TextareaInfoContainer>
</S.TextareaContainer>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/pages/ReviewWritingPage/form/hooks/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ export { default as useMutateReview } from './useMutateReview';
export { default as useCurrentCardIndex } from './useCurrentCardIndex';
export { default as useNavigateBlocker } from './useNavigateBlocker';
export { default as useResetFormRecoil } from './useResetFormRecoil';
export { default as useFocusMessage } from './useFocusMessage';
21 changes: 21 additions & 0 deletions frontend/src/pages/ReviewWritingPage/form/hooks/useFocusMessage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useRef, useEffect } from 'react';

interface useMessageFocusProps {
isMessageShown: boolean;
}

const useFocusMessage = <T extends HTMLElement = HTMLElement>({ isMessageShown }: useMessageFocusProps) => {
const messageRef = useRef<T | null>(null);

useEffect(() => {
if (isMessageShown && messageRef.current) {
messageRef.current.focus();
}
}, [isMessageShown]);

return {
messageRef,
};
};

export default useFocusMessage;