CODEWITHSUNDEEP
angularsvgcheckboxfocus
BlueCat
BlueCat

Reputation: 763

Make svg non-focusable in IE 11 (Angular, MdCheckbox)

I have some checkboxes but I always have to tab twice to get to the next checkbox instead of tabbing just once (problem appears only in IE). The problem is, that the svg inside of the checkbox gets focused after i tab once. I've already googled this and the solution I found was: make svg non-focusable with focusable="false"

But I can't do this actually because I'm using Angular 4 and I'm just using my checkbox by the <mdCheckbox> tag.

So I don't have directly access to the svg-tag inside of the checkbox. Now I could change the materials.js file. There I could set the svg inside of the mdCheckbox component to non-focusable but the problem is, that we don't commit the materials.js in our project. We always generate these Angular files anew when we work on our project, so the material.js file will always be overwritten.

So I can't change the materials.js file but I also have kinda no access to the svg because I'm simply just using the <mdCheckbox> tag.

Any suggestion how I could make the svg non-focusable?

Upvotes: 0

Views: 416

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657376

You might be able to address it with SVG

svg{pointer-events:none;}

(See also https://stackoverflow.com/a/39919144/217408)

You can also try tabindex="-1" but it doesn't seem to be supported yet in IE.

Upvotes: 1

Related Questions