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

fix: remove 1px line from gatsby-announcer on 100vh pages #20781

Merged
merged 1 commit into from
Jan 23, 2020

Conversation

madalynrose
Copy link
Contributor

Description

The 1px height style on the gatsby-announcer div adds a 1px line to the bottom of 100vh pages. We want the announcer element to be visually hidden on the page, and have followed best practices from WebAIM.

width:1px; height:1px; overflow:hidden; tells the browser to make the element 1px by 1px in size and to visually hide everything that does not fit into these dimensions. While this is a likely a little overkill and can probably be omitted in most circumstances, there are a few instances where positioning may be disabled, but all other styles remain enabled. In this case, the element will remain in its original position, but will only take 1 pixel of space.

To remove the line at the bottom of 100vh pages, we've added top: 0 to the list of styles for the announcer element.

Related Issues

Fixes #20728

@madalynrose madalynrose requested a review from a team as a code owner January 22, 2020 14:56
@madalynrose madalynrose self-assigned this Jan 22, 2020
Copy link
Contributor

@pieh pieh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Thanks!

@pieh pieh changed the title fix 1px line from gatsby-announcer on 100vh pages fix: remove 1px line from gatsby-announcer on 100vh pages Jan 22, 2020
@sidharthachatterjee sidharthachatterjee added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Jan 23, 2020
@gatsbybot gatsbybot merged commit 3880394 into master Jan 23, 2020
@delete-merged-branch delete-merged-branch bot deleted the fix-1px-announcer-display branch January 23, 2020 14:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bot: merge on green Gatsbot will merge these PRs automatically when all tests passes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

gatsby-announcer div introduced in v2.18.25
6 participants