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.

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

Accordions don't work via mouse on devices that support both touch and mouse #1993

Closed
paultag opened this Issue Jun 25, 2017 · 10 comments

Comments

Projects
None yet
6 participants
@paultag
Copy link

paultag commented Jun 25, 2017

https://standards.usa.gov/components/form-templates/

The code accordions aren't expanding anymore - I know there were some new releases, this seems to have broken since

@wslack

This comment has been minimized.

Copy link
Collaborator

wslack commented Jun 26, 2017

Hmmm. I had the same issue a few months ago but it was fixed in uswds/uswds-site#279 and the accordions are working just fine for me now on Chrome. Have you tried clearing cache?

@donjo

This comment has been minimized.

Copy link
Contributor

donjo commented Jun 26, 2017

@paultag they seem to be working for me too. I'd try clearing the cache as suggested but if that doesn't work, let us know what browser + operating system you're using and check to make sure your browser isn't blocking javascript resources.

@paultag

This comment has been minimized.

Copy link

paultag commented Jun 26, 2017

Still broken after uninstalling and re-installing both Chrome and Firefox. I'm using GNU/Linux, but that shouldn't matter - I'm using Chrome Version 59.0.3071.115 (Official Build) (64-bit).

I'm fine closing this if it's just me

@wslack

This comment has been minimized.

Copy link
Collaborator

wslack commented Jun 26, 2017

So weird though! You see this in the code right? <button class="usa-accordion-button" aria-controls="code-text-input" aria-expanded="true">Code</button>

@toolness

This comment has been minimized.

Copy link
Contributor

toolness commented Jun 30, 2017

I'm curious if this might be related to #1999, which involves accordions and/or menus not working and is specific to Windows 7/8. Browser bugs specific to operating systems are unusual but sometimes happen, especially with new-ish platform features, e.g. position: sticky at 18F/calc#1455 (comment). I'm not familiar enough with our accordion code to have any hunches, though.

@mjoyce91

This comment has been minimized.

Copy link

mjoyce91 commented Jul 2, 2017

This is also not working for me on Windows 10 with Chrome 59.0.3071.115 and Opera 46.0.2597.32. Works in Microsoft Edge. Also, the mobile responsive header/menu button does not open as well.

@yowill yowill added this to the July 4th Sprint milestone Jul 5, 2017

@toolness

This comment has been minimized.

Copy link
Contributor

toolness commented Jul 6, 2017

Thanks especially to the efforts of James Frankowski, I think we've zeroed-in on at least one cause of this problem: our event-handling code is "Apple-centric" in that it's making the assumption that a device is either touch-based or has a mouse, but can't be both. In src/js/events.js:

module.exports = {
  CLICK: ('ontouchstart' in document.documentElement)
    ? 'touchstart'
    : 'click',
};

This CLICK symbol is used in several places throughout the code to attach event handlers, and it's essentially saying, "if the user's device supports touch, respond to ontouchstart events, otherwise respond to click events". This is fine for Apple devices which only support one or the other, but it means that on non-Apple devices which support both, such as the Microsoft Surface Pro, users will only be able to interact with some USWDS components using their touchscreens.

@mjoyce91 and @paultag -- do either of your systems have touchscreens? If so, does tapping on the accordions work? If not, could you open up your JS console and type the following:

'ontouchstart' in document.documentElement

If the console prints out true, then this is definitely our culprit!

Again, huge thanks to James Frankowski for doing much of the detective work on this.

@paultag

This comment has been minimized.

Copy link

paultag commented Jul 6, 2017

Can confirm - I have a touch screen, touching the bar works, clicking does not

🇺🇸

@mjoyce91

This comment has been minimized.

Copy link

mjoyce91 commented Jul 6, 2017

I won't have access to the the computer I experienced this with until later today, but it does have a touch screen.

update: returned true.

@toolness toolness changed the title standards.usa.gov accordions are borked Accordions don't work via mouse on devices that support both touch and mouse Jul 6, 2017

@wslack

This comment has been minimized.

Copy link
Collaborator

wslack commented Jul 18, 2017

What a bug. Good job @toolness.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment