-
Notifications
You must be signed in to change notification settings - Fork 7
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.
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
[접근성개선] 스크린 리더가 태그 등록 메시지 안내 #727
Merged
Merged
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
bb91b6a
feat(ScreenReaderScript): 스크린 리더 스크립트 컴포넌트 생성
vi-wolhwa fcd4aa7
refactor(TagInput): 스크린리더가 태그 등록 메시지를 읽도록 개선
vi-wolhwa df0f3e6
refactor(src): ScreenReader 기능을 컴포넌트에서 훅으로 변경
vi-wolhwa bbf8693
refactor(src): 스크린리더 요소를 RouterProvider 밖으로 이동
vi-wolhwa 0bcc07b
refactor(ScreenReaderOnly): ScreenReader 컴포넌트명 변경
vi-wolhwa File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
frontend/src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
const ScreenReaderOnly = () => ( | ||
<div | ||
id='screen-reader' | ||
aria-live='polite' | ||
aria-hidden='true' | ||
style={{ | ||
position: 'absolute', | ||
width: '1px', | ||
height: '1px', | ||
margin: '-1px', | ||
padding: '0', | ||
border: '0', | ||
overflow: 'hidden', | ||
clip: 'rect(0, 0, 0, 0)', | ||
whiteSpace: 'nowrap', | ||
wordWrap: 'normal', | ||
}} | ||
/> | ||
); | ||
|
||
export default ScreenReaderOnly; |
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
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { useCallback } from 'react'; | ||
|
||
export const useScreenReader = () => { | ||
const updateScreenReaderMessage = useCallback((message: string) => { | ||
const element = document.getElementById('screen-reader'); | ||
|
||
if (element) { | ||
element.setAttribute('aria-hidden', 'false'); | ||
element.textContent = message; | ||
|
||
setTimeout(() => { | ||
element.setAttribute('aria-hidden', 'true'); | ||
element.textContent = ''; | ||
}); | ||
} | ||
}, []); | ||
|
||
return { updateScreenReaderMessage }; | ||
}; |
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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
한 페이지에 screen-reader 라는 id를 가진 DOM요소가 한 개 이상 있다면 메시지가 중복으로 읽히지 않을까라는 우려가 들긴 하네요..! 혹시 해당 부분 테스트가 완료 되었나요?!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
한 화면에 동일한 id를 갖는 요소는 존재할 수 없으니, 개발자의 실수로 생성했다면 에러가 나지 않을까 생각합니당
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
document.getElementById() 메소드는 첫 번째로 찾은 요소만 반환하기 때문에 에러가 날 일은 없을 듯 싶습니다..! 다만 원하는대로 동작하게 하기 위해서는 올바르게
<ScreenReader />
를 찾을 수 있도록 다른 곳에서 id 사용에 유의해야겠네요..!!덧붙여 혹시 조금 더 리액트스럽게 ref 를 사용해보는 방향은 어떨까요?