Styjun

I am modifying the UI code per our analytics teams request. All clickable elements must be either an a or button.

I've overridden the button and a styles so they do not appear to be any different. In a desktop browser they don't appear to behave differently either.

But open the chrome "device emulation" from dev tools, and you can see that the button and a elements have different behaviors. Their respective target click areas seem to be smaller, and you must directly hit the svg "X" instead of any part of the block level element.

I've tried both an a and button element. I've also recreated the issue inside of a jsfiddle.

This jsfiddle reproduces the issue (test in mobile device emulator mode in chrome) https://jsfiddle.net/8jze13t0/1/

// script.js
let i = 0;
const closeBtns = document.querySelectorAll('.close');
const clickCount = document.querySelector('.click-count');

Array.from(closeBtns).forEach(btn => btn.addEventListener('click', (e) => 
 e.preventDefault();
 i++;
 clickCount.innerText = i;
))


clickCount.innerText = i;

body 
 background: darkBlue;
 color: white;
 font-family: sans-serif;


.close 
 margin-top: 10px;
 white-space: nowrap;
 text-indent: 100%;
 overflow: hidden;
 background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4809 10.0128L19.9119 0.579492C20.0423 0.479492 20.0423 0.246029 19.9119 0.112695C19.7819 -0.020638 19.5709 -0.020638 19.4406 0.112695L10.0096 9.54564L0.578599 0.112695C0.448599 -0.020638 0.237599 -0.020638 0.107266 0.112695C-0.0227344 0.246029 -0.0227344 0.479492 0.107266 0.579492L9.53826 10.0128L0.107266 19.4457C-0.0227344 19.5794 -0.0227344 19.8128 0.107266 19.9128C0.172599 19.9795 0.257599 20.0128 0.342933 20.0128C0.428266 20.0128 0.513599 19.9795 0.578599 19.9128L10.0096 10.5128L19.4406 19.9128C19.5059 19.9795 19.5909 20.0128 19.6763 20.0128C19.7616 20.0128 19.8469 19.9795 19.9119 19.9128C20.0423 19.8128 20.0423 19.5794 19.9119 19.4457L10.4809 10.0128Z' fill='white'/%3E%3C/svg%3E");
 width: 20px;
 height: 20px;
 margin-right: 16px;
 display: block;


button 
 outline: 0;
 border: 0;
 background: none;
 padding: 0;
 font-family: inherit;
 font-style: inherit;
 cursor: pointer;

<p>
 Click Count:
 <span class="click-count">
 </span>
</p>

<p>
 First Example With `div:`
 <div class="close">
 Close me
 </div>
</p>


<p>
 Second Example With `button`
 <button class="close">
Close me
</button>
</p>

<p>
 Third Example With `a`
 <a href="#close" class="close">
Close me
</a>
</p>

Here is an screenshot of the issue (w/ annotations):

I expect to be able to click anywhere within the block level element within the mobile emulator and trigger the event handler.

Remove the text and the styles associated with it

remove these extra rules

white-space: nowrap;
text-indent: 100%;
overflow: hidden;

Also remove the text from the html, why have it if you are not going to use it

If you want the text for screenreader, you can use aria-label="whatever" on the element

<a href="whatever" aria-label="whatever label">

As soon as I removed text-indent: 100%; from the .close items, the odd behavior in mobile went away.

What is that rule attempting to do? Could padding-left work better? (I assume you are trying to avoid the text laying on top of the background image X icon)

Trying to figure out the specific question. Not sure what you want to achieve visually - although i did notice this part:

Their respective target click areas seem to be smaller, and you must
directly hit the svg "X" instead of any part of the block level
element.

Part of this is that "a" and "button" elements are what are referred to as (by default) "inline" display elements. Maybe try adding a style definition like this:

a, button 
display: block;

This should allow for the a/button elements to take up more space and have more of a clickable area then just having a clickable area that is equal to the contents inside the a/button element. You might also want to set something like this if you want to force a minimum width:

a, button 
display: block;
min-width: 100px; 

Other then that maybe providing an example of what it looked like before - or what you want it to look/behave like? This is all also assuming you aren't using any CSS framework (vanilla CSS)?

It looks like your text-indent:100% is causing that. Instead of doing that, you can remove it and make your text invisible with css like this color: rgba(0,0,0,0);. Once I made that change it seemed to make the whole surface area clickable.

If you do it that way, make sure you add color: rgba(0,0,0,0); to the hover state as well. Or you can just remove the text out of the html if that's an option.