Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Bug: Using a label with the Icon component is invalid HTML #834

Closed
anastasialanz opened this issue Nov 29, 2022 · 0 comments · Fixed by #893 or #1012
Closed

Bug: Using a label with the Icon component is invalid HTML #834

anastasialanz opened this issue Nov 29, 2022 · 0 comments · Fixed by #893 or #1012
Assignees
@anastasialanz
Labels
bug Something isn't working low low priority

Comments

@anastasialanz
Copy link
Contributor

anastasialanz commented Nov 29, 2022 •
edited
Loading

Steps to reproduce

  1. Use the Icon component with type="external-link" and a label prop:
    <Icon type="external-link" label={"opens in a new window"} />
    You will see this rendered HTML:
<span aria-hidden="false" class="Icon Icon--external-link">
  <div class="Offscreen">opens in a new window</div>
  <svg xmlns="http://www.w3.org/2000/svg" overflow="visible" preserveAspectRatio="none" viewBox="0 0 24 24" 
  height="24" width="24">...</svg>
</span>
  1. Paste the rendered HTML into https://validator.w3.org/nu/#textarea for validation

Screen Shot 2022-11-29 at 2 48 59 PM

Expected Behavior

The offscreen label should be a span element.

Actual Behavior

The offscreen label is a div. div elements are not allowed as children of span elements.

Version

Latest canary
@anastasialanz anastasialanz added the bug Something isn't working label Nov 29, 2022
@anastasialanz anastasialanz self-assigned this Nov 29, 2022
@anastasialanz anastasialanz mentioned this issue Feb 14, 2023
Merged
5 tasks
@anastasialanz anastasialanz linked a pull request Feb 14, 2023 that will close this issue
fix: use a span instead of div for offscreen text #893
Merged
5 tasks
@anastasialanz anastasialanz added the low low priority label Feb 14, 2023
anastasialanz added a commit that referenced this issue Feb 14, 2023
@anastasialanz
fix: use a span instead of div for offscreen text (#893)
f7bc1da 
div elements are not allowed as a child of button or span elements.

Fixes #834
This was referenced Mar 21, 2023
Closed
Closed
@scurker scurker mentioned this issue Mar 30, 2023
Closed
This was referenced Apr 4, 2023
Closed
Closed
Closed
Merged
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@anastasialanz anastasialanz

Labels
bug Something isn't working low low priority
Projects
None yet
Milestone
No milestone
1 participant
@anastasialanz