Screen Reader Support

[aress31]

Using the static method go on an onClick event handler, is it possible to display the links for screen readers?

For example let's take the following code:

 <div>
        <h3>Foo</h3>
        <mwc-list>
          <mwc-list-item
            @click=${() => Router.go('/foo/foo')}
            >Foo</mwc-list-item
          >
          <mwc-list-item
            @click=${() =>
              Router.go('/foo/foo')}
            >Foo</mwc-list-item
          >
        </mwc-list>
      </div>

For screen reader supports I would like to have the links displayed in the bottom left corner of my browser, is it something possible?

[haijian-vaadin]

Hi @aress31 to have better accessibility support, it's better to use the <a> element instead. I found an example of wrapping <mvc-list-item> into an <a>.

<mwc-list>
  <a href="google.com"><mwc-list-item>google</mwc-list-item></a>
  <a href="bing.com"><mwc-list-item>bing</mwc-list-item></a>
  <a href="duckduckgo.com"><mwc-list-item>duck duck go</mwc-list-item></a>
</mwc-list>

Would this work for you?

[aress31]

Hi @haijian-vaadin, this indeed works, but I want to do client side routing with the Vaadin router, the point was to add screen reader when routing with Vaadin router in a similar fashion than the React router does.