Im trying to make the parent element in a dropdown menu have visible focus when tabbed over for accessibility concerns. However, for some reason I do not have access to the css file so I need to make this happen with HTML. Is there even a way to do this? The code is looking something like this right now:
<li class = dropdown
class = "dropdown" data-toggle="dropdown" aria-haspopup="true">
Im sorry if this question is a little vague im not sure how to go about this
It looks that your element is currently not focusable. list elements are not focusable by default, so you should first make it focusable by adding to it tabindex="0"
<li aria-haspopup="true"
class = dropdown
data-toggle="dropdown"
tabindex="0"><!-- li content --></li>
Now you should see the browser's default focus ring. There is no option to use pseudo classes (e.g. :focus) on an inline style, so if you don't have access to the CSS file, and adding a <style> to the top of the HTML file is also not an option you can change the style attribute using inline javascript.
<li aria-haspopup="true"
class = dropdown
data-toggle="dropdown"
onfocus="this.style.outline = '2px solid red'"
onblur="this.style.outline = 'none'"
tabindex="0"><!-- li content --></li>