Path: csiph.com!.POSTED.194-73-239-109.cust.centrio.cz!not-for-mail
From: Cezary Tomczyk <cezary.tomczyk@gmail.com>
Newsgroups: comp.lang.javascript
Subject: Re: Having to click TWICE for event
Date: Wed, 25 Jan 2017 09:32:16 +0100
Organization: csiph.com Internet News Service
Message-ID: <o69nqh$1pbj$1@csiph.com>
References: <508acb43-edf6-446c-9f3e-ec2ebd7979cb@googlegroups.com> <o64h6a.9co.1@mid.maikkoenig.de> <e61763a8-65f3-4241-a37f-f9b789d25342@googlegroups.com> <o6612n.998.1@mid.maikkoenig.de> <14f9d324-b305-499b-a9f4-dcc4729413ce@googlegroups.com> <77c28034-be7c-4ac6-a967-6d93c83d18a5@googlegroups.com> <o68e5f$onm$1@csiph.com> <18e749d1-3689-4f2d-8dd1-79b6ec4e5d3e@googlegroups.com>
Mime-Version: 1.0
Content-Type: text/plain; charset=utf-8; format=flowed
Content-Transfer-Encoding: 7bit
Injection-Date: Wed, 25 Jan 2017 08:32:18 +0000 (UTC)
Injection-Info: csiph.com; posting-host="194-73-239-109.cust.centrio.cz:109.239.73.194"; logging-data="58739"; mail-complaints-to="admin@kev009.com"
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:45.0) Gecko/20100101 Thunderbird/45.6.0
In-Reply-To: <18e749d1-3689-4f2d-8dd1-79b6ec4e5d3e@googlegroups.com>
Xref: csiph.com comp.lang.javascript:32328

On 25/01/2017 08:00, bit-naughty@hotmail.com wrote:
> On Tuesday, January 24, 2017 at 2:41:24 PM UTC-6, Cezary Tomczyk wrote:
>> On 24/01/2017 19:27, Ram Tobolski wrote:
>>>> And then how do you code the link?
>>>
>>> Hi. You don't need the link (<a>), just the <div>. You are registering a listener to clicks on the <div>
>>
>> That's not a good idea as the <div> itself is not focusable and the user
>> will not be able to reach this button using keyboard. Except when you
>> add attribute tabindex="0", but I'd rather not use <div> with click
>> event instead use natively focusable <a> HTML element.
>
>
> ...and what would the code look like? <a href=something id=something> ? That doesn't look right...?

<a> should works fine. However, seems <a> here is meant to be a button 
so I think you can consider here to use <button> instead.

<button id="openPopUp">Open popup</button>

var openPopUpButton = document.getElementById('openPopUp');

function openPopUp(event) {
     if (typeof event.preventDefault === 'function') {
         event.preventDefault();
     }

     // Code that opens pop up here
}

openPopUpButton.addEventListener('click', openPopUp);

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/
https://www.aslint.org/ - Accessibility linting tool