Make icons change layout too [#1911] #1912
Open
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
nextstrain-bot
temporarily deployed
to
auspice-make-grid-full--twbgmz
victorlin
reviewed
Nov 20, 2024
Comment on lines
+37
to
+40
| <PanelsFullIcon width={22} selected={this.props.panelLayout === "full"}/> | ||
| <SidebarButton selected={this.props.panelLayout === "full"}> | ||
| <ButtonText>{t("sidebar:full")}</ButtonText> | ||
| </SidebarButton> |
There was a problem hiding this comment.
(nit)
A button nested in a clickable span is presented as two separate selectable items to a screen reader (or Vimium in my case). This is what I see on the PR review app:
By placing the icon within the button instead (and adjusting styles), the same desired effect can be achieved while maintaining a single selectable item:
<SidebarButton
selected={this.props.panelLayout === "full"}
style={{cursor: "pointer"}}
onClick={…}
>
<PanelsFullIcon width={22} selected={this.props.panelLayout === "full"}/>
<ButtonText>{t("sidebar:full")}</ButtonText>
</SidebarButton>There was a problem hiding this comment.
By placing the icon within the button instead
Yeah, I tried that, the styling got janky. I will look at it again tomorrow.
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.
Description of proposed changes
This PR adds wrapping
<span>s to the grid/full buttons in the layout sub-panel, so clicking the icons changes the layout, just like clicking the words.Related issue(s)
Closes #1911
Checklist