Fix anchor tag styling on Firefox#1361
Conversation
| a:focus:not(:focus-visible) { | ||
| outline: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
Let's move this to the bottom of the file under a section called Browser specific like the Screen specific section we have right now, and then recompile the assets with php artisan mix:install & php artisan winter:util compile less.
|
@LukeTowers Hey, so here is the update. I'll write this down in the google doc, but I think I was a little thrown off by the fact that I have to include the compiled css in the commit. I am not sure if this is already in the docs but maybe in the contributing.md it could be worth it to put a little excerpt about that fact that you have to stage the compiled css. I know it says not to mess with it directly, but I didn't intuit that you also have to commit it. I am also wondering: some of the config files got updated when I first 'built' the project, do you guys always just stage the specific files that you made changes to, or is there some config I add to my .gitconfig or something that will avoid commiting instance specific changes, like the package.json or something of that nature? |
|
@IsaiahPaget the .gitignore for core development is kind of tricky, as the values we'd use for core development (i.e. tracking changes in modules, ignoring instance-specific files like package.json, the lock files, etc) is different from the gitignore that we need to ship to our end users (i.e. people that consume the I haven't looked into doing that at all but if that's something you'd be interested in investigating that'd be very helpful 😄 |
I have added some CSS to fix this bug: #1247.
The issue was that, in Firefox only, clicking on an anchor tag would show an accessibility outline. This should only happen when navigating with the keyboard. To better align the behavior with Chrome, I added CSS that targets all anchor tags that are :focus but not :focus-visible, and sets their outline to none. But only if the browser is Firefox.
This means the outline will not appear unless the user is navigating with a keyboard. This improves the visual experience, without breaking any existing features, it only affects anchor tags and is purely a visual adjustment.
I figured I'd put this in the layout.less file because this seems like the most global file, I am not sure if this is the best place, happy to make changes as seen fit.
I initially thought this change would be simple and quick, but it took me a second to trace where all the CSS was coming from. Factoring in the time spent learning this small part of the codebase, I figured it would take me the better part of an afternoon, and that's about how long it took me.