Enhance accessibility of icons #1310
Conversation
🦋 Changeset detectedLatest commit: 9e8bde6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
||
| const pipe = (...fn: Function[]) => (arg: any) => fn.reduce((acc, cur) => cur(acc), arg) | ||
|
|
||
| export function createIconLabel(svgName: string): string { |
There was a problem hiding this comment.
svgr에 의해 생성되는 컴포넌트명을 적절한 라벨로 변경하는 함수.
Most icons or icon systems come with no accessibility built-in. For example, the same visual cross icon may in fact mean "close" or "delete". This component lets you give meaning to icons used throughout your app.
https://www.radix-ui.com/docs/primitives/utilities/accessible-icon#accessibility
아이콘의 형태와 다르게 실제 의미가 무엇인지를 라벨로 제공하면 더욱 좋지만, 현재 별도의 아이콘 메타데이터를 제공하고 있지 않아 절충안으로 아이콘 이름을 라벨로 지정했습니다.
Chromatic Report🚀 Congratulations! Your build was successful! |
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## next-v1 #1310 +/- ##
===========================================
+ Coverage 78.18% 78.21% +0.02%
===========================================
Files 294 293 -1
Lines 3796 3801 +5
Branches 838 838
===========================================
+ Hits 2968 2973 +5
Misses 545 545
Partials 283 283
... and 4 files with indirect coverage changes Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report in Codecov by Sentry. |
| @@ -223,7 +223,7 @@ describe('Tabs', () => { | |||
| const { getByRole } = renderTabs() | |||
| const tabItem1 = getByRole('tab', { name: TAB1 }) | |||
| const tabItem2 = getByRole('tab', { name: TAB2 }) | |||
| const tabAction = getByRole('link', { name: ACTION1 }) | |||
There was a problem hiding this comment.
안좋은 케이스. ${ACTION1} Open In New Window 같은 방식으로 라벨이 만들어짐. 이런 경우는 아이콘이 장식 요소로 사용되기때문에 그냥 hidden되는 편이 낫습니다.
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue <!-- Please link to issue if one exists --> <!-- Fixes #0000 --> - Fixes #2199 ## Summary <!-- Please brief explanation of the changes made --> - 아이콘만 있는 `AlphaIconButton` 컴포넌트를 구현합니다. ## Details <!-- Please elaborate description of the changes --> - 스타일은 버튼 컴포넌트에서 거의 그대로 가져왔습니다.#2180 까지는 복붙으로 구현한 후에 후속작업에서 버튼 컴포넌트의 스타일을 background-color, color, hover effect 별로 믹스인으로 분리하고 이를 재사용하는 형태로 리팩토링할 예정입니다. - 아이콘만 있는 경우 접근성을 위해 적절히 라벨을 주는 것이 필요합니다. 이를 위해서 (i) hidden text 를 주는 방법 (ii) aria-label 을 주는 방법 등이 있는데, hidden text 를 주면 문제가 발생한 경우가 있기도 하고 aria-label 을 주는 것이 간편해보여서 이 방법으로 하려고 합니다. ([#](#1310)). 다만 aria-label을 required로 해야할 지는 의문입니다. 다른 라이브러리를 찾아보니 라이브러리마다 다른 부분이기도 하고, 베지어에서는 접근성 관련 속성을 required로 한 적이 없어서 optional이 좋겠다는 생각입니다. - `IconButtonStyleVariant`, `IconButtonColor` 타입을 export 할 필요는 없는 것 같아서 하지 않았습니다. 이전에는 enum으로 사용하고 있어서 export 해야만 했는데 현재는 그렇지 않아서 `IconButtonProps['variant']` 처럼 사용하는 것이 가능합니다. 이거는 V2 컴포넌트 전반적으로 컨벤션이 맞춰지면 좋을 것 같아서 의견 부탁드립니다. (@sungik-choi) ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://www.sarasoueidan.com/blog/accessible-icon-buttons/ - https://v2.chakra-ui.com/docs/components/icon-button#usage - https://primer.style/components/icon-button/react/alpha#iconbutton
Self Checklist
CODEOWNERSfile.Related Issue
Fixes #369
Summary
아이콘의 접근성을 개선합니다.
Details
Icon의 루트는 svg가 아니라 React.Fragment가 됩니다.Breaking change or not (Yes/No)
No
References