Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

It's not possible to focus on label with tabIndex=0 and "for" attribute #3501

Closed
andres-kovalev opened this issue Feb 28, 2019 · 3 comments
Closed

It's not possible to focus on label with tabIndex=0 and "for" attribute #3501

andres-kovalev opened this issue Feb 28, 2019 · 3 comments
Assignees
@AlexKamaev
Labels
AREA: client STATE: Auto-locked An issue has been automatically locked by the Lock bot. TYPE: bug The described behavior is considered as wrong (bug).
Milestone
Sprint #36

Comments

@andres-kovalev
Copy link

What is your Test Scenario?

I have a radio button associated with label using "for" attribute. Label also has "tabIndex" attribute to be focused. When i click on this label using testcafe, it not became focused. But in real situation it is.

What is the Current behavior?

Currently this test always fails.

What is the Expected behavior?

When i'm clicking on this label by mouse, label became focused.

What is your web application and your TestCafe test code?

My component looks like this one

<div>
 <label for="radio" tabIndex="0">...</label>
 <input type=radio id=radio>
</div>
label {
  background: red;
  &:focus {
    outline: 0;
    background: green;  // just to check whether this component is focused
  }
}

And test case is:

const label = Selector('label');
test('...', async t => {
  await t
     .click(label)
     .expect(label.focused)
     .ok();
});

Steps to Reproduce:

  1. Run test

Workaround

When i replacing label with span, it works (but i need to check radio button by myself because "for" attribute does not work for spans).

Your Environment details:

  • testcafe version: 0.22
  • node.js version: 10.13.0
  • browser name and version: chrome 72
  • platform and version: macOS 10.13.6
@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Feb 28, 2019
@miherlosev miherlosev added TYPE: bug The described behavior is considered as wrong (bug). AREA: client labels Feb 28, 2019
@miherlosev
Copy link
Collaborator

Hi @andres-kovalev

Thank you for the detailed description. I've reproduced the problem.

For TestCafe Team
The focus event does not raise for label component when TestCafe clicks on this.

index.html

<html>
    <head>
	    <style>
		    label { background: red; }
			label:focus {background: green;outline: 0}
		</style>
	</head>
    <body>
		<div> 
			<label for="radio" tabIndex="0">...</label> <input type=radio id=radio> 
		</div>
		<span id='log'></span>
		<script>
		   var label = document.querySelector('label');
		   var log   = document.querySelector('#log');
		   
		   label.addEventListener('focus', function () {
		       log.textContent = log.textContent + 'label focused ';
		   });
		</script>
	</body>
</html>

test.js

import { Selector, t } from 'testcafe';

fixture`Login`.page('http://localhost:8080');

 const label = Selector('label'); 

 test('...', async t => { 
	await t
	    .setTestSpeed(0.1)
		.click(label);
		
});

@need-response-app need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Feb 28, 2019
@polendri
Copy link

polendri commented Mar 6, 2019

I have a similar problem which seems related: I've got a custom dropdown component that looks like this:

<div tabindex="0">
  <div>Placeholder</div>
  <div>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

On Chrome/Edge/Firefox/IE11, clicking the outer <div> focuses it, however on TestCafe in IE11, the click does not focus the div. It appears to work in TestCafe in Chrome/Edge/Firefox.

@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Mar 6, 2019
@miherlosev miherlosev removed the STATE: Need response An issue that requires a response or attention from the team. label Mar 7, 2019
@AndreyBelym AndreyBelym added this to the Planned milestone Apr 17, 2019
@miherlosev miherlosev self-assigned this Jun 11, 2019
@AlexKamaev AlexKamaev assigned AlexKamaev and unassigned miherlosev Jun 17, 2019
@AlexKamaev AlexKamaev modified the milestones: Planned, Sprint #35 Jun 17, 2019
AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue Jun 19, 2019
@AlexKamaev
label with attribute tabIndex should be focused (closes DevExpress#3501)
cf51677
@AndreyBelym AndreyBelym modified the milestones: Sprint #35, Sprint #36 Jul 1, 2019
AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue Jul 1, 2019
@AlexKamaev
label with attribute tabIndex should be focused (closes DevExpress#3501)
118a0ba
@lock
Copy link

lock bot commented Jul 11, 2019

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.

@lock lock bot added the STATE: Auto-locked An issue has been automatically locked by the Lock bot. label Jul 11, 2019
@lock lock bot locked as resolved and limited conversation to collaborators Jul 11, 2019
kirovboris pushed a commit to kirovboris/testcafe-phoenix that referenced this issue Dec 18, 2019
@AlexKamaev @kirovboris
label with attribute tabIndex should be focused (closes DevExpress#3501…
c0428c9 
…) (DevExpress#3939)
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@AlexKamaev AlexKamaev

Labels
AREA: client STATE: Auto-locked An issue has been automatically locked by the Lock bot. TYPE: bug The described behavior is considered as wrong (bug).
Projects
None yet
Milestone
Sprint #36
Development

No branches or pull requests
5 participants
@AlexKamaev @polendri @andres-kovalev @miherlosev @AndreyBelym