chore(icon): Remove clickable prop and set icons as decorative by default #2181
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
talkor
requested changes
Jun 26, 2024
| iconType = IconType.SVG, | ||
| iconSize = 16, | ||
| ignoreFocusStyle = false, | ||
| tabindex: externalTabIndex, | ||
| ariaHidden, | ||
| ariaHidden = true, |
| @@ -31,13 +31,13 @@ export const Overview = { | |||
| }; | |||
|
|
|||
| export const VibeIcon = { | |||
| render: () => <Icon iconType={Icon.type.SVG} icon={Bolt} iconLabel="my bolt svg icon" iconSize={16} />, | |||
There was a problem hiding this comment.
aria-label shouldn't be added for non-interactive elements, right? I wonder why has it been added here in the first place
| <Icon | ||
| clickable={false} | ||
| icon={DropdownChevronRight} | ||
| iconLabel={iconLabel} |
There was a problem hiding this comment.
Though it's not clickable, it has a functionality, it's the arrow for the submenu, I think it should remain since it will imply that it opens the submenu. So I think that the aria-label should remain nevertheless
| @@ -137,7 +137,7 @@ describe("TextField Tests", () => { | |||
| ); | |||
| }); | |||
|
|
|||
| const icon = queryByLabelText(iconNames.primary); | |||
| const icon = queryByTestId("icon"); | |||
Co-authored-by: Tal Koren <talko@monday.com>
talkor
reviewed
Jun 30, 2024
| @@ -54,18 +54,6 @@ const AttentionBox: React.FC<AttentionBoxProps> & { | |||
| "data-testid": dataTestId, | |||
| closeButtonAriaLabel = "Close" | |||
| }) => { | |||
| const iconLabel = useMemo(() => { | |||
There was a problem hiding this comment.
So this was redundant in terms of a11y?
| @@ -118,7 +116,6 @@ const TextField: VibeComponent<TextFieldProps, unknown> & { | |||
| inputAriaLabel, | |||
| searchResultsContainerId = "", | |||
| activeDescendant = "", | |||
| iconsNames = EMPTY_OBJECT, | |||
There was a problem hiding this comment.
Is this a prop? What is this for?
There was a problem hiding this comment.
If it is and is redundant it should be also documented, and make sure it doesn't have UX implications
| @@ -69,12 +69,11 @@ exports[`Dropdown renders correctly snapshot driver should open menu on click if | |||
| class="dropdown-indicator css-1pxbrck-indicatorContainer" | |||
| > | |||
| <svg | |||
| aria-hidden="false" | |||
| class="icon clickable" | |||
| aria-hidden="true" | |||
YossiSaadi
force-pushed
the
vibe3
branch
2 times, most recently
from
eef274f
to
7b7affe
Compare
This pull request was closed.
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.
https://monday.monday.com/boards/3532714909/views/80492480/pulses/6887644148