[FE] 컴포넌트 접근성 검수 (Carousel, BottomSheet) #984

Todari · 2025-01-30T08:37:59Z

issue

close [FE] 컴포넌트 접근성 검수 (Carousel, BottomSheet) #982

구현 목적

#893 issue 작업을 진행하던 중 접근성이 고려가 되지 않은 component들을 발견하여 해당 작업을 진행하고자 했습니다.

1. GlobalStyle에 focus-visible 이 존재하지 않음

2025-01-30.4.14.09.mov

focus 상태에 대한 style을 별도로 만들어 준 input을 제외하고, tab 키를 이용해서 focus를 변경하였을 때,
focus가 어디에 존재하는지 확인할 수 없는 것을 확인할 수 있었습니다.
이에 대한 작업을 진행하여 키보드 및 tab키만을 이용하여 서비스를 사용할 수 있도록 합니다.

2. IOS 환경에서 SVG Icon component의 direction이 제대로 적용되지 않는 문제

safari에서 확인한 경우 (ios 환경도 동일하게 적용)
chrome 기반에서 확인한 경우

3. Carousel component가 768px 이상의 경우에서 제대로 드래그 되지 않는 문제

2025-01-30.4.25.40.mov

768px 이하의 해상도에선 정상 작동 하지만, 위의 영상과 같이 768px 이상에서 제대로 작동하지 않음

4. Carousel component를 드래그 및 터치무브로밖에 사용할 수 없는 문제

현재 carousel은 드래그 및 터치무브 이벤트만 가능하기 때문에, 키보드 및 스크린리더로 사용할 수 없는 문제가 있습니다.

5. 계좌등록 - 은행선택 과정에서 키보드 및 스크린리더를 사용할 수 없는 문제

현재 은행 선택에서 클릭을 통해서만 바텀시트를 열수 있어 키보드 및 스크린리더로 사용할 수 없는 문제가 있습니다.

구현 사항

1. GlobalStyle에 focus-visible 이 존재하지 않음

// Globalstyle.ts
// ...
  [href]:focus-visible,
  [tabindex]:not([tabindex='-1']):focus-visible,
  select:focus-visible,
  button:focus-visible {
    outline: 2px solid ${COLORS.primary};
    outline-offset: 2px;
    opacity: 1;
  }
// ...

focus-visible 속성을 추가하여 focusible element에 focus 강조 효과를 추가하였습니다.
위와 같이 속성을 추가하면 href와 tabIndex attribute를 가진 모든 element들에 focus-visible이 적용되는데,
현재 Top component 에 불필요한 tabIndex={0}이 적용되어 있어 이를 제거하였습니다.

2. IOS 환경에서 SVG Icon component의 direction이 제대로 적용되지 않는 문제

ios(safari) 환경과 그렇지 않은 환경에서 attribute 값에 단위가 제대로 적혀있지 않을 떄, 기본적으로 처리하는 방법이 달라서 발생하는 문제입니다.
기존에는 direction에 대해서 90, 180 과 같이 값만 적혀 있어 ios 환경에서 이를 제대로 적용시키지 못했지만,
deg 단위를 추가하여 두 환경에서 모두 정상작동 할 수 있도록 변경하였습니다.

// Svg.tsx
// ...
  const getRotation = () => {
    switch (direction) {
      case 'up':
        return '180deg';
      case 'left':
        return '90deg';
      case 'right':
        return '270deg';
      default:
        return '0deg';
    }
  };
// ...

3. Carousel component가 768px 이상의 경우에서 제대로 드래그 되지 않는 문제

// Carousel.tsx
// ...
  transform: translateX(
    calc(
      (100vw - 3rem) * ${-currentIndex} +
        ${(currentIndex === 0 && translateX > 0) || (currentIndex === length - 1 && translateX < 0) ? 0 : translateX}px
    )
  );
// ...

기존 carousel wrapper에서 transform을 100vw 기준으로 변경하였습니다.
768px 이하의 경우 100%로 확장되기 때문에 문제가 없지만, 768px 이상의 경우 100vw 크기와 앱의 전체 크기 (768px) 사이의 오류가 생겨 발생하는 문제입니다.
이에 Carousel component의 부모 요소 너비를 받아 해당 요소까지 넓어질 수 있도록 하였습니다.

// useCarousel.ts
// ...
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const parentWidth = useRef(0);
// ...
  useEffect(() => {
    const handleResize = () => {
      if (wrapperRef.current) {
        const parentElement = wrapperRef.current.parentElement;
        parentWidth.current = parentElement?.clientWidth ?? 0;
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [wrapperRef, window.innerWidth]);
// ...

// Carousel.tsx
// ...
  transform: translate3d(
    calc(
      (${parentWidth}px - 3rem) * ${-currentIndex} +
        ${(currentIndex === 0 && translateX > 0) || (currentIndex === length - 1 && translateX < 0) ? 0 : translateX}px
    ),
    0,
    0
  );
// ...

또한, 기존의 translateX를 translate3D로 변경한 이유는 GPU 가속을 이용하여 애니메이션의 품질이 떨어지지 않도록 하기 위함입니다.

4. Carousel component를 드래그 및 터치무브로밖에 사용할 수 없는 문제

// Carousel.tsx
// ...
        {urls &&
          urls.map((url, index) => (
            <div key={url} css={imageCardStyle({theme, parentWidth})}>
              <img
                src={url}
                alt={`업로드된 이미지 ${index + 1}`}
                loading="lazy"
                decoding="async"
                css={imageStyle}
                onDragStart={handlePreventDrag}
                onDragEnd={handlePreventDrag}
              />
              {index !== 0 && (
                <CarouselChangeButton
                  direction="left"
                  onClick={handleToPrev}
                  tabIndex={currentIndex === index ? 0 : -1}
                />
              )}
              {index !== urls.length - 1 && (
                <CarouselChangeButton
                  direction="right"
                  onClick={handleToNext}
                  tabIndex={currentIndex === index ? 0 : -1}
                />
              )}
              {onClickDelete && (
                <CarouselDeleteButton
                  onClick={() => handleClickDelete(index)}
                  tabIndex={currentIndex === index ? 0 : -1}
                />
              )}
            </div>
          ))}
// ...

carousel에서 좌우로 넘길 수 있는 버튼을 추가하여 키보드 및 스크린 리더로도 좌우로 넘길 수 있도록 변경하였습니다.
tabIndex={currentIndex === index ? 0 : -1} 를 사용한 이유는, 현재 보이는 캐러셀이 아닌 부분의 버튼들은 접근할 수 없도록 하기 위함입니다.
좌우 button을 사용하는 것 외에도, 키보드 화살표 좌 우 버튼을 통해서도 사진을 넘길 수 있습니다.

tab과 button을 이용하여 carousel을 사용하는 영상

2025-01-30.4.57.42.mov

좌우 화살표를 이용하여 carousel을 사용하는 영상

2025-01-30.5.34.15.mov

5. 계좌등록 - 은행선택 과정에서 키보드 및 스크린리더를 사용할 수 없는 문제

// EditAccountView.tsx
// ...
          <Input
            labelText="은행"
            placeholder="은행을 선택해주세요"
            value={bankName ?? ''}
            errorText={null}
            autoFocus={false}
            readOnly
            onFocus={() => setIsBottomSheetOpen(true)}
          />
// ...

기존에 onClick prop으로 있던 setter를 onFocus로 변경함으로써 클릭 뿐 아니라, 키보드 및 스크린 리더로도 bottomSheet를 열수 있도록 하였습니다.
또한, 열린 bottomSheet를 다시 닫기 위해서 닫는 버튼을 추가하였습니다.

바텀시트가 열린 후, 바텀시트 내부에서 tab이 순환하도록 focusTrap을 구현하였습니다.

// BankSelectModal.tsx
// ...
  useEffect(() => {
    if (!isBottomSheetOpened) return;

    const focusableElements = modalRef.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
    );
    const firstFocusable = focusableElements?.[0] as HTMLElement;
    const lastFocusable = focusableElements?.[focusableElements.length - 1] as HTMLElement;

    const handleTabKey = (e: KeyboardEvent) => {
      if (e.key !== 'Tab') return;

      if (e.shiftKey) {
        if (document.activeElement === firstFocusable) {
          e.preventDefault();
          lastFocusable?.focus();
        }
      } else {
        if (document.activeElement === lastFocusable) {
          e.preventDefault();
          firstFocusable?.focus();
        }
      }
    };

    const handleFocusChange = () => {
      const isModalElement = Array.from(focusableElements ?? []).some(element => element === document.activeElement);

      if (!isModalElement) {
        (focusableElements?.[1] as HTMLElement)?.focus();
      }
    };

    document.addEventListener('keydown', handleTabKey);
    document.addEventListener('focusin', handleFocusChange);

    return () => {
      document.removeEventListener('keydown', handleTabKey);
      document.removeEventListener('focusin', handleFocusChange);
    };
  }, [isBottomSheetOpened]);
// ...

구현 전 (키보드 및 스크린 리더 사용 불가)

2025-01-30.5.27.00.mov

구현 후 (키보드 사용)

2025-01-30.5.28.31.mov

Uploading 화면 기록 2025-01-30 오후 5.29.22.mov…

참고 사항

해당 작업을 진행 중 bottomSheet의 접근성과 사용성을 향상시킬 수 있는 방법이 있을 것 같아
시간이 나면 이를 마저 적용시켜보도록 하겠습니다.
또한 작업을 하다 생각난 것인데, 우리는 모바일 퍼스트이다보니 키보드 접근성을 높은 우선순위로 생각했어야 하나 하는 생각이 드네요....
이런 작업들을 토대로 스크린리더 또한 시도해 보고자 합니다~!
서로 연관있는 것들이 많아 함께 작업하다 보니 변경사항이 너무 커져버렸네요....
태스크를 나눠서 작업하는 것도 굉장히 중요하고 어려운 것 같습니디...... 으아악

github-actions · 2025-01-30T08:39:47Z

Test Results

135 tests 135 ✅ 7s ⏱️
25 suites 0 💤
25 files 0 ❌

Results for commit 25f180b.

github-actions · 2025-01-30T08:40:03Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-xxtijcumey.chromatic.com/

jinhokim98

고생 많았습니다~ 덕분에 키보드 접근성이 상당히 높아졌네요!

Amplitude 2024.10~11월 2달 간 기기 분석을 보면 Mac OS 33.3%, window 14.3%로 의외로 데스크탑 유저가 꽤 있음을 확인할 수 있어요. (우리 지분일지 모르겠네요ㅋㅋ)

만일 7기 유저를 유치하고도 이 수치가 비슷하게 나온다면 실제 유저가 데스크탑 환경에서도 많이 사용한다는 의미이니 키보드 접근성을 높이는 것도 사용자 경험에 도움이 될 것이라고 생각합니다!

코멘트 몇 가지 남겨놨는데 시간 될 때 확인해주세요!

jinhokim98 · 2025-01-31T06:35:14Z

client/.storybook/preview.tsx

+                  font-family: 'Pretendard', sans-serif;
+                }
+              `,
+              GlobalStyle,


스토리북에도 글로벌 스타일을 적용하기 위한 것인거죠? 원래 안 되어있었군요...;; 몰랐네
적용 감사합니다~

그르게용.... 그때 폰트 적용시킨다고 폰트만 넣어놓은 것 같아요~!

jinhokim98 · 2025-01-31T06:40:11Z

client/src/GlobalStyle.ts

+  button:focus-visible {
+    outline: 2px solid ${COLORS.primary};
+    outline-offset: 2px;
+    opacity: 1;
+  }


버튼 색이 primary일 때 같은 색이 outline으로 보여서 focus가 보이지 않을까 생각했었는데 아주 잘 보이는군요
focus가 갈 때 애니메이션도 적용이 되네요! (신기)

지금 이부분이 살짝 애매한게, 우리가 만든 Button의 경우는 transition 속성이 있어서, 애니메이션이 생기는데, 버튼이 아니라 href, tabIndex 속성을 가지고 있는 태그들이나 다른부분에는 그렇지 않다는 것이죠........
focus-visible 안에 transition을 none으로 넣으면 되려나 모르겠네요!
통일성을 유지하려면 모두 애니메이션을 넣거나 빼거나 해야할 것 같아요
둘 중 어느게 나을 것 같나요?

오호... 통일성에 대해서는 생각 못 해봤네요. 저는 모든 요소에 애니메이션을 넣는 것보다는 빼는 것이 더 낫다고 생각합니다.

cc9dfb0

저도 비슷한 의견입니다~ 바로바로 트래킹 할 수 있도록 애니메이션 제거했어요~!

jinhokim98 · 2025-01-31T06:48:02Z

client/src/components/Design/components/Carousel/Carousel.stories.tsx

+Carousel 컴포넌트는 이미지들을 슬라이드 형태로 보여주는 컴포넌트입니다.
+
+### 주요 기능
+- 이미지 슬라이드 기능
+- 드래그로 이미지 전환 가능
+- 이미지 삭제 기능 (선택적)
+- 이미지 인디케이터
+- 좌우 이동 버튼
+
+### 사용 예시
+\`\`\`jsx
+<Carousel 
+  urls={[
+    'image1.jpg',
+    'image2.jpg',
+    'image3.jpg'
+  ]}
+  onClickDelete={(index) => handleDelete(index)} // 선택적
+/>


요렇게 적으면 보이는군요.
설명을 자세히 적어주시고 아래 예시로 드래그 테스트, 방향키 테스트를 해볼 수 있어서 너무 좋은 것 같아요.

나중에 제가 만든 컴포넌트도 설명을 추가 해놓으면 좋을 것 같다는 생각이 드네요! 레퍼런스 감사합니다

어느정도 컴포넌트들 리팩토링을 진행하면서 스토리북들을 세세하게 작성해볼 생각입니다~!

jinhokim98 · 2025-01-31T06:51:10Z

client/src/components/Design/components/Carousel/Carousel.style.ts

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: inset(0 round 1rem);
-  max-width: calc(768px - 4rem);
+  width: ${parentWidth ? `calc(${parentWidth}px - 4rem)` : 'calc(430px - 4rem)'};


요기 내부 430px은 카드의 width일까요?

여기 부분 버그 하나 발견해서 영상 남깁니다!

2025-01-31.15-51-25.mp4

캐러셀을 마우스로 클릭 시 width가 재조정되는 버그가 있어요!
제 추측에는 ref가 초기에 null이었다가 ref.current.parentElement가 인식된 후에 parentWidth를 얻어오게 돼서 이런 문제가 일어나는 것 같아요!

저도 Tabs 컴포넌트를 만들면서 초기에 indicator background가 채워지지 않는 이슈가 있었는데 ResizeObserver를 사용해서 해결한 경험이 있어서 공유해봅니다!

tab width 관련 코드

useEffect에서 ref current가 존재할 때 resize observer를 생성하고 observe를 실행해서 resize observer가 크기 변화를 감지하면 resize observer callback을 실행해서 tabWidth를 설정하는 방식입니다!
요렇게 설정하니 처음 렌더링 할 때부터 특정 엘리먼트의 width를 가져올 수 있었어요!

일단, 430px 로 설정해 준 이유는, 만약 parentWidth가 없을 때 초기값을 설정해 주려고 한 것인데, 대부분의 모바일 해상도가 430일 것이라고 생각해서 주어준 값이었습니다.

또한, 버그 관련하여 좋은 인사이트를 남겨 주신것도 확인했습니다~! ResizeObserver를 사용하는 방법이 있었군요.
일단 노티주신 버그에 관해서는 ref로 width값을 받기 때문에, 재렌더가 되지 않아서 반영이 되지 않는 문제였네요 ㅜㅜ
parentWidth를 ref가 아니라 state로 변경하여 해결했습니다~!

또한, 쿠키가 얘기해 준 것 처럼, 별도의 hook으로 분리한 뒤, 16ms의 리사이즈 이벤트에 대한 쓰로틀을 적용해 주었습니다.
16ms 쓰로틀을 적용한 이유는, 초당 수백번의 resize 이벤트가 발생할 수 있는데, 이벤트를 줄이면서 대부분의 기기에서 자연스러워 보일 수 있도록 60fps 주사율에 맞추기 위함이었습니다. (1000 ms / 60 frame = 16 ms/frame)

// useParentWidth.ts // ... export const useParentWidth = ({elementRef, delay = 16}: UseParentWidthProps) => { const [parentWidth, setParentWidth] = useState<number>(0); const count = useRef(0); useEffect(() => { const handleResize = throttle(() => { if (elementRef.current) { const parentElement = elementRef.current.parentElement; setParentWidth(parentElement?.clientWidth ?? 0); console.log(count.current); } }, delay); handleResize(); window.addEventListener('resize', handleResize); return () => { handleResize.cancel(); window.removeEventListener('resize', handleResize); }; }, [elementRef, delay]); return parentWidth; };

쓰로틀링까지 적용 좋아요! 60frame까지 아주 디테일합니다👏
근데 throttle을 loadsh 라이브러리를 사용한 것으로 보이는데 package.json dependencies에 반영이 되어있지 않은 것 같아요. 확인 부탁드릴게요!

aaa3755

기초적인 실수를...

jinhokim98 · 2025-01-31T07:08:46Z

client/src/components/Design/components/Carousel/Carousel.style.ts

@@ -93,3 +102,17 @@ export const indicatorStyle = ({index, currentIndex, theme}: IndicatorStyleProps
  transition-timing-function: cubic-bezier(0.7, 0.62, 0.62, 1.16);
  content: ' ';
 `;
+
+export const changeButtonStyle = (direction: Direction) => css`


자세히 보니깐 여기는 css 백틱 방식이었네요!
크게 중요하진 않다고 생각하지만 객체 형태로 사용하지 않은 특별한 이유가 있을지.. 궁금합니다!

그냥 처음에 다른 부분도 백틱으로 되어있었어서 백틱으로 사용했습니다
리터럴로 사용할때와 객체로 사용할 때 차이점이 존재하나요?

엇 그런가요? 저는 우리 프로젝트 내에서 ~~.style.ts 객체 형태를 좀 더 많이 본 것 같아서요..
저는 입력할 때 객체 형태는 자동 완성을 해주는 것도 있고 객체 형태를 많이 본 것 같아서 통일성 측면에서 질문 드렸습니다! 사실 큰 상관은 없다고 생각해요

뭔가 cursor 자동완성을 사용하다보니... 객체든 백틱이든 상관없이 사용하고 있었네요 ㅜ

jinhokim98 · 2025-01-31T07:28:48Z

client/src/components/Design/components/Icons/Svg.tsx

@@ -36,13 +36,13 @@ const Svg: React.FC<SvgProps> = ({children, color, size, width, height, directio
  const getRotation = () => {
    switch (direction) {
      case 'up':
-        return 180;
+        return '180deg';


브라우저 별로 정말 다르네요... 어떤 브라우저가 이상한걸까요?ㅋㅋㅋ
해결이 되어서 다행입니다~ 이런 경험들을 정리해서 토다리의 크로스 브라우징 해결 경험으로 만들어가도 좋을 것 같아요!

그냥 다 손잡고 통일했으면...

jinhokim98 · 2025-01-31T07:30:10Z

client/src/components/Design/components/Icons/Svg.tsx

-        transform={`rotate(${getRotation()})`}
+        style={{transform: `rotate(${getRotation()})`}}


그냥 transform으로 넣어줄 때와 style로 감싸서 transform을 실행할 때, 두 가지 경우가 어떤 차이가 있어서 바꾸셨는지 궁금합니다!

transform attribute는 svg tag 내부의 attribute 이고, style attribute는 일반적인 css 와 다양한 호환성을 가지고 있어요
따라서 tranform attribute는 어느정도 표준인 style attribute와 다르게 웹 브라우저마다 호환성이 다르더라구요,
이에 대해서 발생하는 다른 문제점들도 있을까 싶어, style attribute를 사용했어요~

이것도 브라우저 호환성 이슈였군요... 좋습니다 설명 감사해요

jinhokim98 · 2025-01-31T07:31:03Z

client/src/components/EditAccountPageView.tsx

@@ -46,6 +47,13 @@ const EditAccountPageView = ({
    navigate(redirectUrlOnSubmit);
  };

+  const handleCloseBottomSheet = () => {
+    setIsBottomSheetOpen(false);
+    if (document.activeElement?.tagName !== 'BODY') {


여기 BODY는 body 태그를 의미하는 것이 맞을까요!?

넵 맞습니다~!

jinhokim98 · 2025-01-31T07:32:52Z

client/src/components/EditAccountPageView.tsx

@@ -68,9 +76,10 @@ const EditAccountPageView = ({
            errorText={null}
            autoFocus={false}
            readOnly
-            onClick={() => setIsBottomSheetOpen(true)}
+            onFocus={() => setIsBottomSheetOpen(true)}


확실히 focus 될 때 보여주니깐 키보드로도 쉽게 열 수 있네요!
모바일에서도 터치할 때 focus되니깐 데스크탑, 모바일 두 환경에서 모두 편하게 사용할 것 같아요!

jinhokim98 · 2025-01-31T07:34:07Z

client/src/components/Modal/BankSelectModal/BankSelectModal.tsx

+    const focusableElements = modalRef.current?.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+    const firstFocusable = focusableElements?.[0] as HTMLElement;
+    const lastFocusable = focusableElements?.[focusableElements.length - 1] as HTMLElement;
+


오 Focus trap까지... 이거 놓치고 있었는데 적용 감사합니다~
나중에 Dropdown 컴포넌트에 참고할 수 있을 것 같아요!!

github-actions · 2025-02-01T07:00:57Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-dddhuhcspf.chromatic.com/

github-actions · 2025-02-01T07:17:50Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-xlybozwtjp.chromatic.com/

github-actions · 2025-02-01T07:26:25Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-vunxzfkklr.chromatic.com/

github-actions · 2025-02-01T08:51:23Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-tgplxmtbgd.chromatic.com/

github-actions · 2025-02-03T18:36:21Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-ozazplxnts.chromatic.com/

github-actions · 2025-02-03T18:40:30Z

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-wdllrtbjap.chromatic.com/

soi-ha

웹 접근성을 지키기 위해 개선해주신 부분 잘 확인했습니다!
토다리가 한 것을 보니 저도 잊혀졌던 웹 접근성 개선하기 task가 떠오르네요... 다시 시도해보는 걸루..

* fix: storybook에 globalStyle 적용 * fix: a, button tag에 focus-visible 적용 * style: focus:visible borderRadius 제거 * fix: IOS에서 svg.tsx의 rotation이 제대로 작동하도록 변경 * fix: globalStyle opacity 변경 * feat: Carousel component 접근성 개선과 반응형 대응 및 버그 수정 * fix: BottomSheet 관련 키보드 접근성 고려하여 변경 * style: lint 적용 * fix: focus-visible 속성을 더 다양한 element들에 적용 * fix: Top component tab index 제거 * style: lint 적용 * fix: useParentWidth hook으로 분리 * fix: carousel aria-live 속성 추가 * fix: Carousel 내부 버튼들에 aria 속성 추가 * style: lint 적용 * fix: 필요없는 주석 제거 * fix: focus-visible transition 제거 * chore: lodash 설치

Todari added 11 commits January 28, 2025 17:03

fix: storybook에 globalStyle 적용

6f44cfe

fix: a, button tag에 focus-visible 적용

6e4ab02

style: focus:visible borderRadius 제거

e606497

fix: IOS에서 svg.tsx의 rotation이 제대로 작동하도록 변경

eb33f0f

fix: globalStyle opacity 변경

6bc1842

feat: Carousel component 접근성 개선과 반응형 대응 및 버그 수정

6dd0778

fix: BottomSheet 관련 키보드 접근성 고려하여 변경

104caa0

style: lint 적용

28a174f

fix: focus-visible 속성을 더 다양한 element들에 적용

943fdd9

fix: Top component tab index 제거

339bea4

style: lint 적용

25f180b

Todari added 🖥️ FE Frontend 🚧 refactor refactoring labels Jan 30, 2025

Todari added this to the v3.2.0 milestone Jan 30, 2025

Todari requested review from pakxe, soi-ha and jinhokim98 January 30, 2025 08:37

Todari self-assigned this Jan 30, 2025

jinhokim98 changed the base branch from main to fe-dev January 30, 2025 10:47

jinhokim98 approved these changes Jan 31, 2025

View reviewed changes

fix: useParentWidth hook으로 분리

d544385

Todari added 2 commits February 1, 2025 16:15

fix: carousel aria-live 속성 추가

caa5139

fix: Carousel 내부 버튼들에 aria 속성 추가

34ad788

style: lint 적용

ed7fdff

fix: 필요없는 주석 제거

f52b860

fix: focus-visible transition 제거

cc9dfb0

chore: lodash 설치

aaa3755

soi-ha approved these changes Feb 4, 2025

View reviewed changes

Todari merged commit 652d17d into fe-dev Feb 5, 2025
2 checks passed

Todari deleted the feature/#982 branch February 5, 2025 06:31

Todari mentioned this pull request Feb 5, 2025

[FE] v3.2.0 배포 #994

Merged

		transform={`rotate(${getRotation()})`}
		style={{transform: `rotate(${getRotation()})`}}

[FE] 컴포넌트 접근성 검수 (Carousel, BottomSheet) #984

[FE] 컴포넌트 접근성 검수 (Carousel, BottomSheet) #984

Conversation

Todari commented Jan 30, 2025

issue

구현 목적

1. GlobalStyle에 focus-visible 이 존재하지 않음

2. IOS 환경에서 SVG Icon component의 direction이 제대로 적용되지 않는 문제

3. Carousel component가 768px 이상의 경우에서 제대로 드래그 되지 않는 문제

4. Carousel component를 드래그 및 터치무브로밖에 사용할 수 없는 문제

5. 계좌등록 - 은행선택 과정에서 키보드 및 스크린리더를 사용할 수 없는 문제

구현 사항

1. GlobalStyle에 focus-visible 이 존재하지 않음

2. IOS 환경에서 SVG Icon component의 direction이 제대로 적용되지 않는 문제

3. Carousel component가 768px 이상의 경우에서 제대로 드래그 되지 않는 문제

4. Carousel component를 드래그 및 터치무브로밖에 사용할 수 없는 문제

5. 계좌등록 - 은행선택 과정에서 키보드 및 스크린리더를 사용할 수 없는 문제

참고 사항

github-actions bot commented Jan 30, 2025

Test Results

github-actions bot commented Jan 30, 2025

jinhokim98 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Todari Feb 1, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jinhokim98 Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 1, 2025

github-actions bot commented Feb 1, 2025

github-actions bot commented Feb 1, 2025

github-actions bot commented Feb 1, 2025

github-actions bot commented Feb 3, 2025

github-actions bot commented Feb 3, 2025

soi-ha left a comment

Choose a reason for hiding this comment

Todari Feb 1, 2025 •

edited

Loading

jinhokim98 Jan 31, 2025 •

edited

Loading