scale-tag: not iterable via arrow keys (screen reader skips the tags) #2419
Description
Scale Version
3.0.0-beta.156
Framework and version
Nuxt 4.0.1
Current Behavior
Navigating to a page containing scale-tag components using the NuxtLink component leads to the behavior, that the scale-tag component is no longer accessible with the arrow keys. Thus, the screen reader skips the content entirely and does not read out the content.
By refreshing the page the scale-tag component is accessible with the arrow keys.
This could be a classic timing race condition between Vue's rendering lifecycle and the asynchronous initialization of web components. This might indicate a potential issue with the scale loader (implementation as a plugin).
Expected Behavior
Read-only tags, such as those implemented here, are not in tab order, are not interactive, and do not receive focus, which is correct. However, they should be accessible with the arrow keys for screen reader users.
Code Reproduction
https://codesandbox.io/p/devbox/9t9crw
- Start a screen reader (eg. NVDA)
- Open the link provided above
- Click on the link "Goto tags page" in the preview
- Press the tab key (this should navigate to the Add scale-button)
- Press the left arrow key (jumps directly to the heading and skipping the tag)
- Refresh the page, repeat step 2-4 again (now the Screen Reader will read out the tag by spelling each letter backwards)
Desktop:
- OS: Windows 11
- Browser: Google Chrome
- Version 138.0.7204.158