"When is it 'wrong' to put tabindex=0 on non-interactive content?" Answer: Always. It's referenced in MDN documentation as well. Not that I don't agree with you however: interactive elements shouldn't be focusable.
- Should tabindex only be declared on interactive element?
- What is an example of when using the Tabindex attribute can cause problems?
- What is the difference between Tabindex 0 and Tabindex =- 1?
Should tabindex only be declared on interactive element?
You do not need to declare tabindex on a child element, provided its parent element is an interactive element. An example of this would be a span element nested inside of a button : The presence of the tabindex attribute in this code example would affect the order of interactive elements in an illogical way.
What is an example of when using the Tabindex attribute can cause problems?
Accessibility concerns
Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using a <div> element to describe a button, instead of the <button> element.
What is the difference between Tabindex 0 and Tabindex =- 1?
tabindex= "0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page. tabindex= "-1" removes the element from the navigation sequence, but can be made focusable using javascript.