Elements intended only for screen readers degrade some interactions

[gibson042]

Select Topic Area

Bug

GitHub Feature Area

UI/UX

Body

The h2 elements with class "sr-only", attribute data-testid="screen-reader-heading", and [English] text content "Breadcrumbs" are intended only for screen readers, but negatively affect page interactions. For example:

1. Launch Google Chrome or Chromium (this specific scenario behaves differently in e.g. Firefox).
2. Visit a repository code file page, e.g. https://github.com/community/community/blob/main/.github/DISCUSSION_TEMPLATE/accessibility.yml
3. At the top of the main pane (i.e., the one associated with the div having attribute data-selector="repos-split-pane-content"), observe the path breadcrumbs (in this case, "community/.github/DISCUSSION_TEMPLATE/accessibility.yml"), followed by a "Copy path" button.
4. Select the full text of those breadcrumbs from the end, e.g. by starting selection at the end of the file extension (in this case, "yml") and expanding it to include the entirety of the repository name (in this case, "community").
   
   I usually do this by mouse, double-clicking on the extension and dragging the cursor over the repository name before lifting up to end the double-click.
5. Copy the selection.
6. Paste it somewhere, observing that the repository name has been prefixed—in this case, the selection is

   Breadcrumbscommunity/.github/DISCUSSION_TEMPLATE
   /accessibility.yml
   

This issue seems to occur because there is nothing separating the h2 from its following ol, and one way to fix it would be insertion of a zero-width space ​ between them (although unfortunately not a <wbr>). It would also be less relevant to me if the "Copy path" button were carried into the sticky file header that appears when scrolling down, rather than being limited to the static header visible only at the top of pane/page.

Other instances of class "sr-only" have similar effects, such as how copying the "$organizationName/$repositoryName" in the repository page context header excludes the sr-only slash, resulting in e.g. a selection of "communitycommunity".

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[cehfisher]

Thank you @gibson042 for your feedback! We will file this with our Accessibility team so that it can be reviewed and will follow-up here with any additional questions or updates. Thanks again!

[cehfisher]

Hello @gibson042 - great news, a fix was just implemented to resolve this issue! Could you take a few moments to re-test this on your end, making sure to refresh the page and/or clear your browser cache? Thanks!

[gibson042]

Thanks, that's great! Even copying the "$organizationName/$repositoryName" repository page context header content is improved, although it still does not include the slash in Chrome (e.g., the top of https://github.com/community/community copies as "community\ncommunity" rather than "community/community"). But that is very minor, and comes up about an order of magnitude less frequently... I'm comfortable with considering this issue resolved. Much appreciated!

[cehfisher]

Thank you for re-testing and providing additional details. I'll share your feedback with the accessibility team and follow up with any necessary next steps. In the meantime, I'll mark this issue as resolved 🎉