Text intended for screen readers is being displayed #5296
Description
Theme version and system environment
- Minimal Mistakes version: 4.27.2
- Ruby gem or remote theme version: Unknown
- Jekyll version: Unknown
- Git repository URL: https://github.com/MScottBlake/mscottblake.github.io
- URL to the page with the problem: https://macadminmusings.com/blog/inclusivity/automation/inclusive-language-in-software/ (also https://mmistakes.github.io/minimal-mistakes/)
- Operating system: All
- Browser version: Google Chrome 138.0.7204.169
What happened?
When you hover over span tags with the sr-only class such as permalink icons or copy code icons, the span is visible. For instance, permalink icons have this accompanying span <span class="sr-only">Permalink</span>. The "Permalink" text should not be displayed in a normal browser and should only be visible to screen readers. This is happening on all unmodified installs.
Expected behavior
When you hover over span tags with the sr-only class, the span should not be visible.
Steps to reproduce the behavior
Use the mmistakes/minimal-mistakes theme.
Other
Adding this to the CSS will fix the issue.
.sr-only {
position: absolute;
margin: -1px 0 0 -1px;
padding: 0;
display: block;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
outline: 0;
}