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.

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

Multi-Thumb Slider: Top of thumb slider's ring on hover is missing #3174

Open
howard-e opened this issue Nov 18, 2024 · 2 comments
Open

Multi-Thumb Slider: Top of thumb slider's ring on hover is missing #3174

howard-e opened this issue Nov 18, 2024 · 2 comments
Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern

Comments

@howard-e
Copy link
Contributor

There's a visual glitch with the ring on hover element around the thumb slider on the deployed environment. Being that the ring shown around the min and max thumb slider is slightly cut off at the top on hover. Example image below:
screenshot showing ring around thumb slider being cut off at top

Opening just the slider-multithumb.html file shows that all of the ring is properly shown. Example image below:
screenshot showing ring around thumb slider is accurately represented

Looking through the code, it seems the y attribute being set for minSliderFocusNode and maxSliderFocusNode should be a minimum value of 2. But in the deployed environment, this gets calculated to a value of -4. Opening the slider-multithumb.html file, it gets calculated to 3.

Originally posted by @howard-e in #3172 (review)

@howard-e howard-e added the bug Code defects; not for inaccurate prose label Nov 18, 2024
@mcking65 mcking65 added the Example Page Related to a page containing an example implementation of a pattern label Nov 19, 2024
@a11ydoer
Copy link
Contributor

@jongund can you kindly to look into this issue and work on it?

@css-meeting-bot
Copy link
Member

The ARIA Authoring Practices (APG) Task Force just discussed Issue 3174 - Multi-Thumb Slider missing top of thumb slider's ring on hover.

The full IRC log of that discussion <jugglinmike> Topic: Issue 3174 - Multi-Thumb Slider missing top of thumb slider's ring on hover
<jugglinmike> github: https://github.com//issues/3174
<jugglinmike> howard-e: To summarize: I don't presume to understand all the calculations for the dimensions. The "ring" it produces currently renders perfectly on the preview. When it moves to the production, though, the context changes in ways that impact the appearance. There, the top of the ring is occluded
<lola> I thought this was a design choice lol
<jugglinmike> howard-e: I think there needs to be a minimum for the "y" value. It goes negative in production
<jugglinmike> howard-e: As for the severity: this is a very small visual glitch. It doesn't impact much.
<jugglinmike> howard-e: I think it could be rolled into the current pull request, but I don't know the implications of such a change for the work which has already been reviewed
<jugglinmike> howard-e: That's why I think this might make more sense as a follow-up patch
<jugglinmike> Matt_King: If it's kind of a minor visual thing... It sounds a little weird, but it seems like the most important decision is to worry about this later
<jugglinmike> Matt_King: It sounds like an issue that jon might want to work on since he wrote the CSS. He's probably in the best position to recognize any potential side-effects
<jugglinmike> Matt_King: I think I'd like to bring this up during a meeting where jon is present
<lola> Q+
<jugglinmike> Matt_King: I don't want to assign it to jon in his absence
<jugglinmike> Jem: Could you reach out to jon and ask if he would be comfortable being assigned to the issue? That way it doesn't linger
<jugglinmike> Jem: How about we mention jon in the GitHub issue?
<jugglinmike> Matt_King: Even better
<jugglinmike> ack lola
<jugglinmike> lola: I approved the functional stuff for this. However, I don't have a Windows or Android device. It may need someone else for those two platforms (I tested on MacOS and iOS)
<jugglinmike> q?
<lola> https://github.com//pull/3172#pullrequestreview-2443554215
<jugglinmike> Jem: I can test on Android
<jugglinmike> Matt_King: It should work via clicking on desktop and via tapping on mobile
<jugglinmike> lola: It's generally easier to use this functionality on desktop; tapping precision on mobile leaves something to be desired for this use case
<jugglinmike> Matt_King: This is for the next publication
<jugglinmike> Jem: Got it. I'll assign myself as a reviewer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Projects
None yet
Development

No branches or pull requests

4 participants