Recipes: Component to announce route changes for screen readers

[kindoflew]

After reading a few articles (like this one and this one) I've learned that screen readers don't announce navigation events with SPA routers, while this is the default browser behavior with traditional navigation. In one of my websites I've implemented a component to announce route changes by subscribing to the router store. It looks something like this:

<script>
  import { router } from 'tinro';

  $: current = $router.path === '/' ? 'Home' : $router.path.slice(1);
</script>

<div aria-live="polite" aria-atomic="true">
  {#key current}
    <p>Navigated to {current} page</p>
  {/key}
</div>

<style>
/* screen reader only styles from Bootstrap */
  div, p {
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

Would it be cool if I submitted a PR to add this to the Recipes section of the README? I figured it might not be easy/possible to add this to tinro itself without making a new component, but having a recipe could help spread awareness. Thanks!

[AlexxNB]

It is important thing, thank you. I don't think it should be added to the tinro itself, but as reciepe it is cool. Maybe it will also useful to publish shared component on npm for all spa routes.