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.

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

TS Server does not recognise title prop for loaded inline SVG components #9609

Closed
7 tasks done
axmmisaka opened this issue Dec 3, 2023 · 1 comment · Fixed by #9612
Closed
7 tasks done

TS Server does not recognise title prop for loaded inline SVG components #9609

axmmisaka opened this issue Dec 3, 2023 · 1 comment · Fixed by #9612
Labels
bug An error in the Docusaurus core causing instability or issues with its execution

Comments

@axmmisaka
Copy link
Contributor

axmmisaka commented Dec 3, 2023

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I'm using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn clear command.
  • I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
  • I have tried creating a repro with https://new.docusaurus.io.
  • I have read the console error message carefully (if applicable).

Description

This issue does not impact the functionality of Docusaurus, but it does impact the developing experience.

For accessibility one might need to set the "title" tag for imported inline SVG React components. Docusaurus has SVGR loader configured such that it will accept a prop named "title", but this is not reflected in the type definition and TS server will complain.

image

I have a fix here which I will be happy to open a PR should this hacky solution to be correct, yet I don't know if there are less hacky ways to fix this issue, or if SVGR is the party to blame...

Reproducible demo

No response

Steps to reproduce

  1. Fork a new website on docusaurus.new
  2. Change <Svg className={styles.featureSvg} role="img" /> to be <Svg className={styles.featureSvg} role="img" title="Cool Dinosaur" />

Expected behavior

TS server will not complain about anything, and the site builds correctly

Actual behavior

TS server is unhappy and shows that

Type '{ className: string; role: "img"; title: string; }' is not assignable to type 'IntrinsicAttributes & SVGProps<SVGSVGElement>'.
  Property 'title' does not exist on type 'IntrinsicAttributes & SVGProps<SVGSVGElement>'.

Your environment

  • Docusaurus version used: 3.0.1
  • Environment name and version (e.g. Chrome 89, Node.js 16.4): TS Version 5.2.2 w/ VS Code 1.84
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

  • I'd be willing to fix this bug myself.
@axmmisaka axmmisaka added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Dec 3, 2023
@Josh-Cena
Copy link
Collaborator

Your change looks good to me. PR welcome.

@slorber slorber removed the status: needs triage This issue has not been triaged by maintainers label Dec 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug An error in the Docusaurus core causing instability or issues with its execution
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants