웹 접근성 개선과 토스트 문서 추가 #86

hae-on · 2023-11-08T14:52:31Z

Issue

✨ 구현한 기능

토스트 문서 추가 했어요
Toast 메세지 뜨면 스크린리더가 바로 읽게 했어요
ESC 누르면 dialog 꺼지게 했어요
공백 유효성 검사 했어요 (일단 text area만 -> input에도 할깝쇼?)

공백만
띄어쓰기 연속 10번
줄바꿈 연속 4번

📢 논의하고 싶은 내용

ESC 누르면 꺼지게 하는 함수에서 이벤트에 type을 이렇게 줬거든요?

  const handleKeydown: KeyboardEventHandler<HTMLElement> = (e) => {
    if (e.keyCode === 27) {
      e.preventDefault();
      handleCloseBottomSheet();
    }
  };

이게 펀잇에서 Enter key custom hook 함수 로직인데 이렇게 정의했더라구요.
그래서 똑같이 했는데 이게 이 함수 자체에서는 오류가 없는데
useEffect 내부 함수를 넣으니까

이런 에러가 뜨면서 useEffect 내부에 'handleKeydown' 있는 곳 다 빨간 줄 나더라구요.
그래서 어쩔 수 없이 아래처럼 했는데 혹시 이유나 어떻게 바꿀 수 있는지 안다면 말해주세요.

구글링해도 안나오네요 후 ㅠㅠㅠ GPT는 any 이러고 이씀 ㅡㅡ

const handleKeydown = (e: KeyboardEvent) => {
    if (e.keyCode === 27) {
      e.preventDefault();
      handleCloseBottomSheet();
    }
  };

🎸 기타

x

Leejin-Yang · 2023-11-09T04:58:14Z

이벤트 핸들러 타입 추측하는 바.. KeyboardEventHandler는 리액트에서 만든 타입이라 그런거 같아요
해온이 작성한대로 해도 좋습니다!

Leejin-Yang

수고했어요 해온~

Leejin-Yang · 2023-11-09T05:00:28Z

src/Toast/Toast.tsx

@@ -16,7 +16,9 @@ const Toast = ({ id, message, isError = false }: ToastProps) => {

  return (
    <ToastWrapper isError={isError} isAnimating={isShown}>
-      <Message color={theme.colors.white}>{message}</Message>
+      <Message color={theme.colors.white} aria-live="assertive">


hae-on · 2023-11-09T11:50:41Z

@Leejin-Yang
황펭아 유효성 검사 추가했어요 확인해주세요~

Leejin-Yang · 2023-11-09T12:46:59Z

@hae-on
유효성 검사 굳입니다 👍
그런데 사용처에서는 상태를 밖에서 만들고 prop으로 전달해주어야해서 유효성 검사 함수를 유틸로 제공하는건 어떤가요???

hae-on · 2023-11-09T16:04:51Z

@Leejin-Yang
제가 error 상태는 따로 빼서 사용할 예정인데요!
util 함수로 만들면 text area 자체에서 error를 export 해서 펀잇에서 사용할 수 있나요?!?!

Leejin-Yang

해온 다시 생각해봤는데 코멘트 확인해주세요!

Leejin-Yang · 2023-11-11T06:30:30Z

src/Textarea/Textarea.tsx

+        value={value}
+        ref={ref}
+        resize={resize}
+        error={error}


이 친구랑

Leejin-Yang · 2023-11-11T06:30:43Z

src/Textarea/Textarea.tsx

+      <Text size="xs" color={theme.colors.error} aria-live="assertive">
+        {error}
+      </Text>


이 친구는 여기 남기고

Leejin-Yang · 2023-11-11T06:32:06Z

src/hooks/useSpaceValidator.ts

+const useSpaceValidator = (initialValue = '') => {
+  const [value, setValue] = useState(initialValue);
+  const [error, setError] = useState('');
+
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+
+    const isWhitespaceOnly = !newValue.trim() && newValue.length > 2;
+    const isConsecutiveSpaces = /\s{10,}/.test(newValue);
+    const isConsecutiveNewlines = /\n{4,}/.test(newValue);
+
+    isWhitespaceOnly || isConsecutiveSpaces || isConsecutiveNewlines
+      ? setError('의미 있는 리뷰를 작성해보는 건 어떨까요? 🫨')
+      : setError('');
+  };
+
+  return { value, error, handleChange };
+};


이 훅은 사용처에서 작성해도 될거 같아요.
함수만 제공해도 될 거 같다고 했는데, 이건 사용처에서 처리하는 부분이라 common한 부분은 아닌거 같아서..! 아싸리 펀잇에서 작성하는건 어떤가요??

Leejin-Yang · 2023-11-11T06:32:18Z

src/Textarea/Textarea.tsx

@@ -10,14 +14,33 @@ export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
 }

 const Textarea = ({ resize = 'both', ref, ...props }: TextareaProps) => {
+  const { value, error, handleChange } = useValidator();


그럼 요거가 삭제되겠네요!

hae-on · 2023-11-12T04:49:40Z

@Leejin-Yang
이렇게 수정하는 거 맞을까요????
error라고 하니까 좀 안 와닿는 거 같은데 errorMessage로 바꾸는 건 어떻게 생각하시나요!!!!!!!!!!!!!!!!

Leejin-Yang · 2023-11-12T04:53:13Z

@hae-on
넵 좋습니다! 👍👍👍
errorMessage도 좋습니다.!

hae-on · 2023-11-12T05:14:11Z

@Leejin-Yang
얍 props 수정했고, 리드미 문서도 수정했습니다!
진짜 끝 -

Leejin-Yang · 2023-11-12T05:29:33Z

@hae-on
진짜 진짜 고생했습니다 해온 🌞

hae-on added 3 commits November 8, 2023 23:00

docs: 토스트 문서 작성

ae949ff

refactor: toast assertive 속성 추가

f399b5a

refactor: esc 키 누르면 dialog 꺼지도록 구현

8c2d264

hae-on added the 🔧 Refactor label Nov 8, 2023

hae-on requested review from xodms0309 and Leejin-Yang November 8, 2023 14:52

hae-on self-assigned this Nov 8, 2023

Leejin-Yang approved these changes Nov 9, 2023

View reviewed changes

hae-on added 4 commits November 9, 2023 14:49

chore: main merge

0357c92

docs: 리드미 오타 수정

7a02be5

refactor: 유효성 검사 추가

158ec78

chore: import 파일 이름 변경

17c3954

Leejin-Yang reviewed Nov 11, 2023

View reviewed changes

refactor: hook 외부로 분리

f1414ff

refactor: props 이름 수정과 리드미 추가

ae3791b

hae-on merged commit fdcc8c2 into main Nov 18, 2023
2 of 3 checks passed

hae-on deleted the feat/issue-84 branch November 18, 2023 13:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

웹 접근성 개선과 토스트 문서 추가 #86

웹 접근성 개선과 토스트 문서 추가 #86

hae-on commented Nov 8, 2023 •

edited

Loading

Leejin-Yang commented Nov 9, 2023

Leejin-Yang left a comment

Leejin-Yang Nov 9, 2023

hae-on commented Nov 9, 2023

Leejin-Yang commented Nov 9, 2023

hae-on commented Nov 9, 2023

Leejin-Yang left a comment

Leejin-Yang Nov 11, 2023

Leejin-Yang Nov 11, 2023

Leejin-Yang Nov 11, 2023

Leejin-Yang Nov 11, 2023

hae-on commented Nov 12, 2023

Leejin-Yang commented Nov 12, 2023

hae-on commented Nov 12, 2023

Leejin-Yang commented Nov 12, 2023

웹 접근성 개선과 토스트 문서 추가 #86

웹 접근성 개선과 토스트 문서 추가 #86

Conversation

hae-on commented Nov 8, 2023 • edited Loading

Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

Leejin-Yang commented Nov 9, 2023

Leejin-Yang left a comment

Choose a reason for hiding this comment

Leejin-Yang Nov 9, 2023

Choose a reason for hiding this comment

hae-on commented Nov 9, 2023

Leejin-Yang commented Nov 9, 2023

hae-on commented Nov 9, 2023

Leejin-Yang left a comment

Choose a reason for hiding this comment

Leejin-Yang Nov 11, 2023

Choose a reason for hiding this comment

Leejin-Yang Nov 11, 2023

Choose a reason for hiding this comment

Leejin-Yang Nov 11, 2023

Choose a reason for hiding this comment

Leejin-Yang Nov 11, 2023

Choose a reason for hiding this comment

hae-on commented Nov 12, 2023

Leejin-Yang commented Nov 12, 2023

hae-on commented Nov 12, 2023

Leejin-Yang commented Nov 12, 2023

hae-on commented Nov 8, 2023 •

edited

Loading