freeCodeCamp: Code block horizontal scroll not easily scrollable by mouse for step 12 Responsive Web Design track
Describe the Issue
On step 12 of the Responsive Web Design (RWD) Certification, the code block containing the html and text “I think freecodecamp is great” is not easily scrollable horizontally by mouse. The code block’s contents are not 100% visible unless a user focuses on the code block and presses the left and right arrow keys with a keyboard. Developer tools reveal there is more html code in the code block not displaying unless scrolling by left and right arrow keys.
Affected Page
Steps to Reproduce
- Navigate to Step 12 of the RWD curriculum: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-12
- Scroll to the code block containing the html
<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p> - Try to use your mouse to scroll horizontally to the right to reveal the rest of the code, including the closing
</a>tag
Expected behavior
User should have no difficulty scrolling that code block to see the code in its entirety. User should be able to use their mouse to scroll horizontally without needing to use right and left arrow keys on their keyboard. This could be especially useful to anyone brand new to coding who may be having issues seeing the entire code and /or do not know how to fully create an anchor tag.
Screenshots
(Brave Browser)
System
- Device: Laptop (Macbook Air)
- OS: Mac
- Browser(s): Chrome, Firefox, Brave
- Version (Chrome): 117.0.5938.132 (Official Build) (x86_64)
Additional context
Issue was created on the basis that someone brand new to coding may not immediately know how to use the <a> anchor tag with just the example code alone (which looks incomplete on first sight but in fact needs to be scrolled into view). The question also raised is whether it is obvious there is more code than what the code block initially displays AND whether the user knows right away they can try scrolling horizontally and see the rest of the code. As a non-beginner who is reviewing the fundamentals, the code did not look complete to me and that is when I discovered these user experience issues.
About this issue
- Original URL
- State: open
- Created 9 months ago
- Comments: 28 (20 by maintainers)
Can you be more specific by what you mean? I see a horizontal scroll bar on the code block (and I see one in the screen snap you provided above). I am able to scroll horizontally by using my mouse. I drag the mouse pointer over the scroll bar and then hold down the left mouse button and move the mouse right/left to scroll.
I think this might be a legitimate concern. My browser does not show the horizontal scroll bar on the code example by default. I only see the scroll bar if I hover over any part of the code example box with the mouse. Granted, this is controlled by a setting in my browser. I can set it to always show scroll bars if I desire. But if anyone doesn’t have scroll bars set to show all the time then they may not recognize that the code block is scrollable and then they won’t see the hidden code. Perhaps we should add something to signal that there is more code to see?
@bbsmooth It is super simple to set up Playwright in case you want to test it.
https://joyofcode.xyz/test-your-site-in-every-browser
It might not be 100% the same as Safari on a Mac but it usually works just fine for testing.
I’ve looked into this some more and compared the fCC code blocks to the table example I linked to above and I’m still not sure why the code blocks aren’t scrolling with your mouse for macOS. The table example is using a
divfor the scrolling container while the fCC code block examples are usingpre. But they both haverole="region",tabindex="0"and an accessible name using eitheraria-labelledby(the table example) oraria-label(our code examples). They are both usingoverflow: autoon the scrolling container.Since the main difference appears to be that one is using a
divand the other is usingpre, I’ve put together some examples of both in a codepen. @ARodriguezHacks, if you, or anyone else using macOS has the time, I would appreciate it if you could test the four examples in my codepen and see which (if any) you are able to scroll with your mouse and report back. I don’t think videos are necessary, just yes/no for each one. Also, if you have both an actual mouse and a trackpad, please test with both of them.My codepen
I agree with you because even someone completely new to coding needs to be able to notice at first glance that only a portion of the code is originally visible within a code block, especially on mobile devices.
text-overflow: ellipsis;may be able to provide the signal, as shown in video below. But the property should be overwritten the valueclipwhen the code is scrolled. This is merely an idea, and I don’t know this is the best practice. Because I haven’t seen any concrete, proven examples.example: display the ellipsis in the code and remove it when scrolling (windows11 PC, Firefox)
https://github.com/freeCodeCamp/freeCodeCamp/assets/44451585/7dfd705f-63e3-4538-b04c-5833df8cb89f
Thank you for the video @ARodriguezHacks. That is very interesting. I don’t have a mac so I can’t replicate this. Perhaps someone else with a mac will be able to chime in on whether they can replicate this, or even provide a solution.
The code example isn’t doing anything special as far as scrolling is concerned. It is relying on the browser to provide the scroll bar when needed. I can tell you that I am able to use the scroll bar with a mouse on both my linux and Win11 systems with Chrome and Firefox. This leads me to believe that this is an issue specific to your mac, or maybe macs in general. But I’m not a mac person so I’m really just guessing here. I did google “macos horizontal scroll” and found a bunch of links explaining how to do horizontal scroll on macs, which sort of implies that this is/was an issue, but I have no idea if those are still relevant.
If you have the time, would you test a different page to see if you are able to horizontal scroll with your mouse?
https://cdpn.io/aardrian/debug/MWeRJWd
This is a codepen from a very well-known and reputable accessibility expert. You must narrow your browser window all the way in so that the right edge of the table gets cut-off. The table is built to horizontal scroll on purpose when you do that. Are you able to scroll the table horizontally when this happens?
Please stop and read our contributing guide.
https://contribute.freecodecamp.org/
This issue is not marked as ready for contributions or help wanted. Also, we do not assign issues.
Yes, let me try to be more specific. I am using a Macbook Air, and my mouse is actually a mouse pad. When I try to scroll over the code block to see the rest of the code, I can only do so by clicking on that section as best I can (assuming I clicked or focused on that element, because there’s no immediate indicator like an outline). Then I test to see that I did in fact select the code block by pressing down on my right and left keyboard arrows (which is when the focus outline appears).
If you notice my original screenshot, I can only see the scroll bar easily in the dev tools for Brave browser, but my new video below shows that’s not the case (for Chrome browser). This issue was tested on 3 separate browsers, the last one being Firefox. Adding these details to the issue description as well.
https://github.com/freeCodeCamp/freeCodeCamp/assets/22532097/779a4e39-bfb8-479b-8cdb-aab38a8bb5ad