CODEWITHSUNDEEP
javascripthtmlcssfocusaccessibility
Millhorn
Millhorn

Reputation: 3166

How to add focus to an anchor that doesn't have an href?

I have a large site and there are hundreds of anchor tags that don't have href attributes attached. Rather than take the risky step of doing a search/replace and adding href="#", I'd prefer to target them using CSS. I'm trying to apply a focus state to those, but it's proving difficult. I'm using the following :not([href]) to target those non-href links, but I can't seem to get focus on it.

/* Duru Sans */
@import url("https://fonts.googleapis.com/css2?family=Duru+Sans&display=swap");
/*resets*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: "Duru Sans", sans-serif;
  font-size: 16px;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 60vh;
}

a {
  text-decoration: none;
}
a.custom-bttn-anim:not([href]), a.custom-bttn-anim {
  align-items: center;
  border: 0;
  border-radius: 4px;
  box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.062rem;
  font-weight: 700;
  justify-content: center;
  min-width: 185px;
  outline: 0;
  padding: 1.25rem 0;
  position: relative;
  text-transform: none;
  transition: all 0.2s ease;
}
a.custom-bttn-anim:not([href]):hover, a.custom-bttn-anim:hover {
  box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.08);
}
a.custom-bttn-anim:not([href]):before, a.custom-bttn-anim:before {
  content: "";
  position: absolute;
  border: solid 0px #005fec;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  opacity: 0;
  transition: all 0.2s ease;
  border-radius: 4px;
  filter: blur(4px);
}
a.custom-bttn-anim:not([href]):focus-visible:before, a.custom-bttn-anim:focus-visible:before {
  content: "";
  position: absolute;
  border: solid 2px #005fec;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  opacity: 1;
  filter: blur(0px);
}
a.custom-blue-bttn {
  background: #005fec;
  color: white;
}
a.custom-bttn-anim .bttn-txt {
  color: inherit;
  font-weight: inherit;
  display: inline-block;
  transform: translateX(0.625rem);
  transition: transform 0.2s;
}
a.custom-bttn-anim .learn-more-arrow {
  height: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
a.custom-bttn-anim:hover .bttn-txt {
  transform: translate(0px);
  transition: transform 0.2s;
  margin-right: 0.3rem;
}
a.custom-bttn-anim:hover .learn-more-arrow {
  opacity: 1;
  transition: opacity 0.2s, transform 0.2s;
}
<div class="container">
  <a class="custom-bttn-anim custom-blue-bttn light" href="#">
    <span class="bttn-txt">Small business</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
  </a>

  <a class="custom-bttn-anim custom-blue-bttn light">
    <span class="bttn-txt">Small business</span>
    <img src="https://nextivaweb.imgix.net/icons/Arrow-Right-Hover-Animation_white.svg" alt="right arrow icon" class="learn-more-arrow">
  </a>
</div>

Upvotes: 0

Views: 2216

Answers (1)

Josh
Josh

Reputation: 4322

Anchor elements without an href attribute are not focusable by default.

You can make them focusable with the tabindex attribute, although I'm not sure that's any better for you than adding href="#".

Example:

<a tabindex="0">
    <!-- other stuff -->
</a>

You could even use some JavaScript to add the attributes dynamically:

document.querySelectorAll("a:not(a[href])").forEach(element => {
    element.setAttribute("tabindex", "0")
});

If the empty anchor tags don't navigate to a URI, then this configuration will likely be confusing for people using assistive technology, and a button with an attached event handler might be a more appropriate choice.

Upvotes: 1

Related Questions