ngx-extended-pdf-viewer
ngx-extended-pdf-viewer copied to clipboard
stephanrauh
Icons not visible on high contrast mode
Describe the bug The Icons in the Toolbar are not visible in high contrast mode in our application, this bug is not on the demo page and not in the Mozilla pdf.js demo, this is just a question if this get's fixed by updating angular & ngx extended pdf viewer to a more current version. So this is not a really a bug I just am curious if there is anything we can do to resolve this bug without the need of updating angular / pdf viewer.
Version info
- Angular 15
- NGX-Extended-Pdf-Viewer: 18.1.14
Demonstration of the problem We have a custom toolbar and the component is reusable, this is how we use it:
This vests that view:
Using the code from the demo page:
Vests this view:
Someone thought it's a good idea to make every element black by default through the *{} selector in CSS, so you can delete this
Funny enough I found out that the draw editor icon is not visible on your pdfviewer demo page, but is visible in the pdf.js demo (only in high contrast mode), this error also occurs in our project
In version 19.5.0, the icons weren't rendered not at all. I've fixed this in version 19.5.1. So let me double-check: you do see the icons unless you activate high-contrast mode?
Generally speaking, I believe accessibility is important, so I'm always happy when someone opens a ticket to improve it. I'm too busy to test accessibility actively, so I reluctantly rely on the community to nudge me into the right direction. In other words, thank you for opening this ticket!
I do see the icon, but when activating high-contrast mode it disappears, this holds true on my end and on your pdf viewer preview page, on Mozilla's pdf.js preview this is fixed, the "draw" icon is visible there.
This is a windows specific feature afaik, just search in the searchbar for High / High Contrast
At the moment, I don't have a Windows machine. I think that'll change in roughly four weeks, but until then, I have to let you down. I hate that, but there's nothing I can do about it.
On the other hand, I believe (or hope?) it's just a stupid CSS issue. You should be able to override the offending CSS rule in your global styles.(s)css file, and once you've managed to solve the issue that way, you can either send me a pull request or send me your workaround. I know I'm nasty - you're asking for help and me answer is "do it yourself!", so I ask you to bear with me. On the plus side, that's the beauty of open source development: you're sitting in the driver seat. OK, let's stick to the truth: I'm sitting in the driver seat, but you're an important copilot, and I'm listening to you!
I have played around a little, by adding:
fill = currentColor;
to the SVG which sits inside the button element
id="primaryEditorInk"
so all other svgs have a path with the attribute fill="currentColor" but this one doesn't have it
After adding the draw icon appears in the same color as all the other icons in both, the normal contrast and the high contrast mode
Awesome, thanks! Most likely, I'm going to publish the next version after Pentecost, so I'm afraid you have to wait a short while. Apart from that, consider it done!
Actually, I've found the button missing the fill property. Please check my latest commit. Does it look sensible to you?
I intend to publish the bug fix this week-end. That's probably before you've got an opportunity to double-check it, but even so, thanks for your patience. It took a while to solve the issue!