Skip to content

Prevent skip links from overlapping header#30897

Merged
mdo merged 1 commit intomainfrom
master-fod-skiplinks-theming
Jul 13, 2020
Merged

Prevent skip links from overlapping header#30897
mdo merged 1 commit intomainfrom
master-fod-skiplinks-theming

Conversation

@ffoodd
Copy link
Copy Markdown
Contributor

@ffoodd ffoodd commented May 26, 2020

Here it is, after #30073 discussions: I got back the kind of banner that appeared previously, only aligning skip-links to the left.

As a bonus (feel free to discuss it, of course), I enhanced progressively the whole thing by making all skip links appear together when :focus is within the container.

And to stay consistent with #30866 I used utilities, seems legit in that case.

Preview: https://deploy-preview-30897--twbs-bootstrap.netlify.app/

Fixes #30491

@ffoodd ffoodd requested review from MartijnCuppens, XhmikosR and mdo May 26, 2020 08:42
@ffoodd ffoodd requested a review from a team as a code owner May 26, 2020 08:42
@XhmikosR
Copy link
Copy Markdown
Member

Will this solution work for the supported browsers in v4-dev too? Because IE is supported in v4-dev.

@ffoodd
Copy link
Copy Markdown
Contributor Author

ffoodd commented May 26, 2020

Yes it will, it'll simply work as it did previously: displaying links one by one, at the same place.

IE11 and other unsupporting browsers will simply ignore the :focus-within rule.

@XhmikosR
Copy link
Copy Markdown
Member

OK, cool, then I'll wait for the other to have a look and if this lands, I'm going to backport it to v4-dev.

@mdo mdo changed the base branch from master to main June 16, 2020 19:34
Copy link
Copy Markdown
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

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

Looks great!

@XhmikosR XhmikosR force-pushed the master-fod-skiplinks-theming branch from 0d80974 to b5ba395 Compare July 13, 2020 18:59
@mdo mdo merged commit cb1eee1 into main Jul 13, 2020
@mdo mdo deleted the master-fod-skiplinks-theming branch July 13, 2020 19:36
@XhmikosR
Copy link
Copy Markdown
Member

@ffoodd can you backport this and the previous skip links PR if it applies to v4-dev? We have it in the v4-dev-next project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Review skip links theming

3 participants