lightHouse 웹 접근성 93점을 98점으로 올렸음 #701
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
⚡️ Lighthouse report!
|
inyeong-kang
approved these changes
Oct 3, 2023
| border-radius: 4px; | ||
|
|
||
| width: ${({ progress }) => `${progress}%`}; | ||
| width: ${({ $progress }) => `${$progress}%`}; |
| @@ -61,3 +51,8 @@ export const HiddenButton = styled.button` | |||
| export const HiddenLink = styled(Link)` | |||
| position: absolute; | |||
| `; | |||
|
|
|||
| export const HiddenList = styled.li` | |||
| export default memo(function Post({ postInfo, isPreview }: PostProps) { | ||
| const Post = forwardRef(function Post( | ||
| { postInfo, isPreview }: PostProps, | ||
| ref: ForwardedRef<HTMLLIElement> |
| @@ -29,7 +29,10 @@ interface PostProps { | |||
| isPreview: boolean; | |||
| } | |||
|
|
|||
| export default memo(function Post({ postInfo, isPreview }: PostProps) { | |||
| const Post = forwardRef(function Post( | |||
There was a problem hiding this comment.
forwardRef 가 이런식으로 사용하는거군요!
react는 흥미로운 메서드가 정말 많네요🤔
새롭게 알아갑니다👍😃
(아래는 공식문서로 찾아본 내용)
DOM 노드를 상위 구성 요소에 노출
기본적으로 각 구성 요소의 DOM 노드는 비공개입니다. 그러나 때로는 DOM 노드를 상위 노드에 노출하는 것이 유용할 때도 있습니다. 예를 들어 DOM 노드에 초점을 맞추도록 허용하는 것입니다.
저도 동의합니다,, 최소 기준치를 넘은거 정도도 괜찮다고 생각해요. 사실 대비가 명확한 UI는 계속 보면 눈이 피로해지더라구요.. 권장 기준을 반드시 준수하지는 않아도 될 것 같습니다! fe-리뷰완 |
chsua
approved these changes
Oct 3, 2023
| <Post isPreview={true} postInfo={post} /> | ||
| </div> | ||
| ); | ||
| return <Post key={post.postId} ref={targetRef} isPreview={true} postInfo={post} />; |
| <S.HiddenButton | ||
| onClick={focusTopContent} | ||
| aria-label="스크롤 맨 위로가기" | ||
| ></S.HiddenButton> |
There was a problem hiding this comment.
사소한 부분이지만 아래처럼 self-closing tag로 작성해도 좋을 것 같아요!
<S.HiddenButton
onClick={focusTopContent}
aria-label="스크롤 맨 위로가기"
/ >| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| > li { |
There was a problem hiding this comment.
사용처로 코드를 이동시키니 이해가 훨씬 잘 되네요bb
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔥 연관 이슈
close: #700
📝 작업 요약
라이트 하우스 웹 접근성 점수를93점에서 98점으로 올림
⏰ 소요 시간
1시간
🔎 작업 상세 설명
이전의 점수 기록은 해당 이슈에 정리 해놓았습니다
#700
🌟 논의 사항
웹 접근성에서 우리 색이 자꾸 대비가 낮다고 하는데 저는 무시하고 싶어요 얘네들이 권장하는 색까지 대비를 해보았더니 너무 안이쁘더라구요
대비 색 해볼수 있는 사이트
https://dequeuniversity.com/rules/axe/4.7/color-contrast