Comments (7)
Noted! Though, as our library docs mention, any and all valid SVG attributes you add to an icon will be applied to the rendered DOM node, so the real solution for you to just add that attribute to the icon yourself. Our title
fix was specifically a convenience to address <svg>
elements not respecting this attribute in the same way that HTML elements do, IE will not show a native tooltip on hover.
<House size={32} aria-label="An icon of a house" />
This will do you right. If you want both a tooltip and aria-label
, add both, using alt
for the title. Working example.
from react.
That's a good shout-out. We'll add this to the upcoming 2.0 release. Thanks @brandonleboeuf!
from react.
Thank you!
I think having the alt
prop makes it feel like an <img>
rather than an<svg>
element, which would also make me think that the alt text would be all that's needed vs adding the aria-label
?
It would be nice to have aria-label? added to Props section of the readme.md so that it eliminates that confusion since the docs currently state that the alt prop will "add accessible alt text to an icon".
from react.
This is good by me 👍
from react.
Wait, it looks like this attribute is for use when the element is labeled by visible text, which is not the case with icons. Are you sure there is an accessibility concern? I am pretty sure the <title>
element achieves the desired effect for screen readers.
from react.
Good catch @rektdeckard ! I did mean aria-label
, not aria-labelledby
.
It is needed, as the icons are currently being skipped by the screen reader, even when there is something passed via the phosphor alt prop. As a work around, I have been adding a wrapper div with the aria-label around any phosphor icon that needs to be read by the screen reader.
From MDN on the title not being read by screen readers: "Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the <title> element."
Though, looking at aria-labelledby, it does state to use aria-label
instead if there is no visible text to reference, as you pointed out.
from react.
I am a bit confused by the resolution here. What is the point of the alt
prop if it's not to provide an accessible label to screen readers? 🤔 I feel pretty strongly that it should set aria-label
on the <svg>
, not a <title>
(which is accessible in some browsers but not all, e.g. Safari based on my tests). Would you please reconsider @rektdeckard? 🙏 Happy to submit a PR.
from react.
Related Issues (20)
- @phosphor-icons/react doesn't have support for modules, only CommonJS HOT 5
- PhosphorIcon 2.0.9 - require() of ES modules is not supported HOT 7
- Error 504 (Gateway Timeout) when using icon component HOT 1
- Jest test fails if files are imported from `/dist` folder HOT 10
- Cannot read properties of undefined (reading 'createContext') HOT 5
- Could not find a declaration file when using SSR HOT 2
- SSR Components missing default size="1em"
- SSR component types are not resolving
- allow to add Contributing.md file.
- Importing icons from `@phosphor-icons/react/dist/ssr` renders the icons, but gives issues in the editor HOT 4
- TypeError: Cannot create property 'displayName' on number 'Infinity' HOT 7
- Unble to dynamic import icons .mjs extensions HOT 9
- Icon instance className overwrites context className HOT 8
- New Twitter (x.com) icon? HOT 1
- Cannot find package on node 20 HOT 5
- ./node_modules/@phosphor-icons/react/dist/lib/context.mjs Can't import the named export 'createContext' from non EcmaScript module (only default export is available) HOT 2
- UnhandledRejection Error: Cannot Find React Package HOT 15
- 'use client' in client icons and IconContext
- React warning after update to 2.1.4
- Issue updating past 2.1.3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.