Accessibility issue with browser minimum font size
damien-git opened this issue · 8 comments
Do you want to request a feature or report a bug?
Bug.
What is the current behaviour?
When a user chooses a reasonable minimum font size in Firefox, labels look enormous.
This happens because of the very small font size in labelStyle, made necessary by the small viewBox for the SVG which is not configurable. It is visible with the demo with labels, which uses a 5px font size.
I was not able to reproduce that behavior with Chromium, somehow it calculate font sizes differently in this case. But it should be possible to make it work in both browsers.
What is the expected behaviour?
Font sizes given in labelStyle should match font sizes outside of the component, so that labels are rendered in the desired size when a minimum font size in chosen by users.
Steps to Reproduce the Problem
- Firefox preferences - language and appearance - advanced - minimum font size: select 12px.
- Check the label size at https://toomuchdesign.github.io/react-minimal-pie-chart/index.html?path=/story/labels--default-labels
- See how different it is when no minimum font size is selected, even though it never matches the expected minimum size visually.
Specifications
- Version: 5.0.1
- Platform: Node 12, Firefox 70
- Subsystem:
Related links:
https://stackoverflow.com/questions/55926730/how-to-override-minimum-font-size-in-firefox-affecting-text-within-svg
https://bugzilla.mozilla.org/show_bug.cgi?id=935056
It looks like this issue could have been fixed in Firefox, but was not, and is not about to be.
Hi @damien-git, thanks for documenting this issue.
How would approach this problem?
Would it be enough to provide a way of configuring the viewBox size?
I guess optional width/height parameters in pixels would do it. You could use that for the viewBox and the width/height attributes of the svg element, and then calculate coordinates accordingly.
An alternative would be to always use 1000 pixels x 1000 pixels for the viewBox instead of 100 x 100. Then the graph would usually be scaled down instead of up, and Firefox's minimum font size would not be taken into account. That might cause a compatibility issue with previous versions though, as people have been using very small font sizes instead of very large ones. Maybe you could fix the fontSize in labelStyle automatically, so that users give normal font sizes instead of small or large ones...
Hopefully fixed by #107.
@damien-git feel free to reopen if anything doesn't work as expected.
Cheers!
Thanks. This seems to work, except for an issue with cy: it is used as a percentage of the width instead of the height. For instance I have to use cy=23.28 instead of the default cy=50 when using pie dimensions 580x270.
It's a shameful bug. Let me fix it! Thanks for taking a look at it.
Hi @damien-git,
Here's the PR. If good I'm going to merge and publish tomorrow.
Cheers! ✌️
Thanks, that fixed it.