Can we remove the border of an HTML element on click? But keep the border on focus

Question

I am working on a project,with Web accessibility in mind.

Code:

function removeBorder(){
li=document.getElementById("link");
li.classList.add(".remove")
}

body{
  background:#dddddd;
}
p:focus{
  border:1px solid red;
}
li{
  list-style-type:none;
  font-size:1rem
  padding:30px;
}
a{
text-decoration:none;
}
a:focus{
  border:1px solid red;
  border-radius:2px;
}

a:hover{
  background:orange;
}
.remove{
border:none;
}

<html>
  <head>Borders
  </head>
  <body>
  <p tabindex="0">
  Click one the page. Then use TAB to navigate the list items</p>
<ul aria-role="list">
  <li  aria-role="listitem"><a id="link" onclick="removeBorder()" tabindex="0" href="#">Item One</a></li>
 <li  aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Two</a></li>
  <li aria-role="listitem"><a tabindex="0"  onclick="removeBorder()"  href="#">Item Three</a></li>
 </ul>  
  
  </body>
 
</html>

I have two groups of users.

1.Normal users

When I hover over the elements,in this case 'li' I see a background color of orange.

Problem: When I click on the element there is a red border.

Is there a way we can have borders only when focused with tab and not not when clicked? How do i remove the borders when i clicked?

2.Keyboard only Users

No problem when we are focusing with tab,the borders show red as expected.

the class is added without the dot `li.classList.add("remove")` — hawks, Mar 12 '20 at 15:06
@ajuni880 didn't work. I console logged the var li. It's selecting the right one. But,the class is not added — wick3d, Mar 12 '20 at 15:18
@jmargolisvt I think i must rephrase my question to "How do i differentiate between a focus/or keyup event and a click event?" So,we are basically waiting for a "keyup" event and checking with "TAB". Focusing and clicking are different actions and should perform differently. But when we Click something we are actually focusing it right? Thank you for directing me to the right place. — wick3d, Mar 12 '20 at 15:25

score 1 · Accepted Answer · answered Mar 12 '20 at 15:30

function removeBorder(){
li=document.getElementById("link");
li.classList.add(".remove")
}

body{
  background:#dddddd;
}
p:focus{
  border:1px solid red;
}
li{
  list-style-type:none;
  font-size:1rem
  padding:30px;
}
a{
text-decoration:none;
}
a:focus:hover{
  border:1px solid red;
  border-radius:2px;
}

a:hover{
  background:orange;
}
.remove{
border:none;
}

<html>
  <head>Borders
  </head>
  <body>
  <p tabindex="0">
  Click one the page. Then use TAB to navigate the list items</p>
<ul aria-role="list">
  <li  aria-role="listitem"><a id="link" onclick="removeBorder()" tabindex="0" href="#">Item One</a></li>
 <li  aria-role="listitem"><a tabindex="0" onclick="removeBorder()" href="#">Item Two</a></li>
  <li aria-role="listitem"><a tabindex="0"  onclick="removeBorder()"  href="#">Item Three</a></li>
 </ul>  
  
  </body>
 
</html>

You should add focus and hover in the same time, it works.

Removes the border when focused with tab,that's not what I want,it was there before. But it did add the class. So,the border is removed after clicking.That is what I wanted but I want the border back when tabbed. Is there a way to achieve both at the same time? I don't get it. — wick3d, Mar 12 '20 at 15:43

Can we remove the border of an HTML element on click? But keep the border on focus

1 Answers1