style: add accessibility design by state in steps

[yolophg]

Checklist before merging

• Link an issue with the pull request
• Ensure no errors or warnings on the browser console
• Avoid additional major pushes after approval (if necessary, request a new review)

[yolophg]

@nhistory 세환님, 웹접근성 디자인 작업 마무리를 위해 몇가지 컨펌 받고 싶은 사항이 있습니다!
피그마 댓글은 참고 이미지를 넣고 설명드리기에는 불편하기도 하고 히스토리 공유차원에서 여기에 남겨둡니다. 피그마에도 해당 위치에 질문 코멘트 달아뒀으니 답변은 편하신 곳으로 해주시면 감사드리겠습니다 :)

1. 1번 스크린샷과 같이, focus나 focus-visible 상태일 때, 위 아래와 양쪽 padding이 적용되기를 의도하신 걸까요? 왜냐하면, 작업해주신 디자인대로 위아래 padding이 들어갈 경우, 해당 상태일 때 디자인이 2번 스크린샷과 같이 들쭉날쭉해지는 현상이 생겨 padding도 같이 적용을 해야할지 말아야할지에 대한 부분을 확인받고 싶습니다!

[1번 스크린샷]

[2번 스크린샷]

2. hover 상태일 때, font-weight: bold인데, underline weight도 같이 두꺼워져야할 것 같은데, 몇 px로 적용해야할까요? 스크린샷과 같이, 현재 3px로 적용해놓은 상태이니 참고 부탁드립니다.

3. 이건 웹접근성과는 별개로 기본 디자인과 관련된 질문인데, 현재 피그마에서 text와 underline 사이에 명확한 gap 수치를 확인할 수가 없어서 해당 gap을 몇 px로 주면 될지도 같이 확인 부탁드립니다. 현재 3px로 적용해놓은 상태입니다. (위 2번 스크린샷 참고해주시면 되겠습니다)

[nhistory]

@yolophg 말씀하신 대로 패딩을 주면 텍스트 디자인에 녹아들기가 어려울 것 같네요 ㅜ
아래 캡쳐된 이미지의 박스를 피그마 프로젝트에서 확인하실 수 있을거에요.
padding은 0으로 하고 border-radius: 5px로 수정해주시면 텍스트에 잘 들어가지 않을까 생각합니다.

모바일에서는 outline을 2px로 조정해주시면 아래 이미지와 같이 주변 텍스트와 잘 어울릴 것 같습니다.

[nhistory]

@yolophg 아 그리고 언더라인 스타일은 피그마에서 폰트에 언더라인을 추가한 형태로 되어 있거든요.
혹시 링크 텍스트에

text-decoration: underline

속성을 추가하면 bold 스타일이 함께 더해지고, 간격도 자동으로 조절될 것 같은데 어떻게 생각하시나요?

[yolophg]

@yolophg 말씀하신 대로 패딩을 주면 텍스트 디자인에 녹아들기가 어려울 것 같네요 ㅜ 아래 캡쳐된 이미지의 박스를 피그마 프로젝트에서 확인하실 수 있을거에요. padding은 0으로 하고 border-radius: 5px로 수정해주시면 텍스트에 잘 들어가지 않을까 생각합니다.

모바일에서는 outline을 2px로 조정해주시면 아래 이미지와 같이 주변 텍스트와 잘 어울릴 것 같습니다.

해당 부분 적용 완료되었습니다 :)

[yolophg]

@yolophg 아 그리고 언더라인 스타일은 피그마에서 폰트에 언더라인을 추가한 형태로 되어 있거든요. 혹시 링크 텍스트에

text-decoration: underline

속성을 추가하면 bold 스타일이 함께 더해지고, 간격도 자동으로 조절될 것 같은데 어떻게 생각하시나요?

@nhistory
넵, 초반에 그렇게 작업했었는데, 이게 받침이 없으면 참고 이미지 1 처럼 언더라인에 글자가 딱 달라붙더라고요! 그래서 피그마 디자인과 좀 달라져서 현재 코드 보시면, 코드 1 과 같이 text-underline-offeset으로 글자와 언더라인간의 간격을 지정해주고 있었어요!
참고 이미지 1)


코드 1)

      a {
        text-decoration: underline;
        text-underline-offset: 3px;
      }

그리고, hover시 굵어지는 경우에도 underline의 굵기는 아래 참고 이미지 2 처럼 크게 전후 차이가 없어서, 별도로 제가 코드 2 와 같이 굵기 옵션을 추가해주고 있었습니다!

참고 이미지 2)

• hover 전

• hover 후

코드 2)

        text-decoration: underline 3px;

그래서 제가, 여기서 2-3번과 같은 질문을 드리게 됐었습니다!

[nhistory]

@yolophg 넵 자세한 설명 감사드립니다.

text underline 스타일은 현재 작업하신 디자인이 피그마 디자인과 잘 부합되어서 그대로 머지되어도 좋을 것 같아요.

제가 방금 헬레나님 브랜치를 로컬에서 돌리다 보니 focus-visible 박스가 아래 이미지처럼 약간 오른쪽으로 치우친 것처럼 보이네요.

예전 코맨트에서 공유해주신 이미지와는 다르게 보여서 혹시 최신 코드 커밋이 아직 안되서 그런건지 확인 부탁드립니다.

그리고 hover 동작에서 trasition 200ms 애니메이션이 추가되면 좋을 것 같습니다.

[yolophg]

@yolophg 넵 자세한 설명 감사드립니다.

text underline 스타일은 현재 작업하신 디자인이 피그마 디자인과 잘 부합되어서 그대로 머지되어도 좋을 것 같아요.

제가 방금 헬레나님 브랜치를 로컬에서 돌리다 보니 focus-visible 박스가 아래 이미지처럼 약간 오른쪽으로 치우친 것처럼 보이네요.

예전 코맨트에서 공유해주신 이미지와는 다르게 보여서 혹시 최신 코드 커밋이 아직 안되서 그런건지 확인 부탁드립니다.

그리고 hover 동작에서 trasition 200ms 애니메이션이 추가되면 좋을 것 같습니다.

@nhistory
오른쪽으로 치우쳐진 부분, 인라인으로 안들어가있던 문제여서 inline-block 추가해주었고, transition 200ms도 추가하여 아래와 같이 반영하였으니 한 번 확인 부탁드립니다~

오른쪽으로 치우쳐진 부분 해결 스크린샷)

hover시 transition 스크린 레코딩)
https://github.com/user-attachments/assets/229b9400-88b0-4e5b-9e99-8147c8e5c077

[nhistory]

잘 수정된 것 같아요. 수고 많으셨습니다!

[SamTheKorean]

고생하셨습니다!