Some outline on title on navigation

[mmrath]

Describe the bug On navigation title is highlighted. Looks worse than the attached screenshot when used with bootstrap. I could not figure out what is that outline.

To Reproduce Steps to reproduce the behavior:

1. Go to private-routes example and click on profile page

Expected behavior The outline should not appear

Screenshots attached, see the outline on "Login" title

[mefechoel]

The outline is a foucus indicator. It shows which element has focus, so keyboard users know where they are at in a page. Focus indicators are critical for accessibility. If you're intersted you can read more about it here.

Svelte Navigator tries to improve accessibility in SPAs by implementing a focus management system, which focuses a relevant heading on navigation. Again, if you're interested, here is a great article, which describes how accessibility for SPAs can be improved. In fact, Svelte Navigators focus management is based upon suggestions from that study.

The dotted outline is just the browsers default style for the focus indicator. You can change it through CSS. There are some suggestions for that in the first article I've linked.

I might add some CSS to the examples in the future, to make it prettier and to give a suggestion on how to style it in an accessible way, but for now, I hope the explanation helps.

[mefechoel]

Closing because the observed behaviour is in fact the desired behaviour.

I've set up an issue to improve the documentation and examples, to better explain the behaviour and other accessibility related matters (see #11).

[mmrath]

@mefechoel accessibility is important but should this be a concern for router? Is it possible to provide some config to disable this feature or enable conditionally. I have not seen this feature in popular web apps.

[mefechoel]

@mmrath Actually I think it should be a routers concern, because SPA routers have, for the longest time broken accessibility (see this article).

If you consider a non SPA, if you click a link, the browser loads a new html document and focus is reset to the body of the page. A screen reader user is informed of the change and provided with some information on the rendered page. If you use a SPA though, you never load a new document. So if you click a link, focus is set on the link. The page changes, but for a screen reader user it looks as tough nothing has happened. The focus is still on the link and no further information is announced. This is, what Svelte Navigator fixes with its focus management.

Since the SPA router broke the accessibility, it should be its responsibility to fix it. All major routers have issues regarding this (see vue-router and react-router). Reach Router was, as far as I know, the first widely used router, that implemented focus management. Svelte Navigators focus management works a little different from that of Reach Router. I used suggestions from the article linked before and from this tweet from Ryan Florence, one of the authors of Reach Router and React Router.

You can disable focus management, by passing primary={false} to your top level Router component, if you really want (see the documentation for Router). I would however advise not to do so, because you throw away a lot of accessibility you get for free, when using Svelte Navigator. It all depends on your use case of course, but if you're planning on building an application you want other people to use, it's probably a good idea to leave it in and make it look nicer with CSS.

[lgk-bsw]

It's great that you take care for better accessibility. But I don't really understand why Svelte Navigator focuses only on the first heading element (<h1>-<h6>). Shouldn't it behave like the browser and just lose the focus on the link element? When you use a keyboard and press Tab the browser should automatically focus the first element on the new page.

[RaghavBhat02]

I agree. I appreciate the focus on accessibility, but it kinda looks horrendous when it focuses on the first heading element. My understanding is the SSR apps don't behave that way either. Would it not be better to simply change the focus back to the body instead (I may be wrong, but I believe this is what non-SPA apps do)?

Solution to keep accessibility gains: Just remove the outline, this way it's still focused on screen readers but doesn't disrupt the looks of the page.

[DatDraggy]

As the heading can't be focused by tabbing anyway I decided to just add text-heading:focus { outline: none; }. Shouldn't mess with accessibility too much, no?

[ollyde]

How are we supposed to design our apps with this ugly blue outline everywhere? Kinda silly!

@DatDraggy thanks for the tip, it only works on each component though.

To do this globally put this into the App.svelte file in the root.

<style global>
    h1 {
        outline: none;
    }
</style>

[mefechoel]

Yes, as mentioned before, you can safely disable focus rings on headings. See comment with more detail on disabling focusrings. But please do not disable focus rings all together. They are essential for keyboard navigation. But don't worry, you can style them like anything else (see article about styling focusrings). The default focus indicator looks the way it does, because html and css is from the 90s and no default browser style looks good. You're styling your buttons, don't you, so why not also style focus indicators? You can find more context and info in the readme. I'll add some more explaination about styling some time.