Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button hidden label not read by NVDA #4

Open
jimwhurr opened this issue Nov 3, 2022 · 0 comments
Open

Button hidden label not read by NVDA #4

jimwhurr opened this issue Nov 3, 2022 · 0 comments
Labels
needs triage The issue needs to be reproduced and requires a proposed fix.

Comments

@jimwhurr
Copy link

jimwhurr commented Nov 3, 2022

Not sure if this is NVDA at fault or the way that the label is hidden but...

The screen reader ignores the hidden label in the Button.stories.ts IconTemplate story. Remove the hidden property and it reads label ("Close ") as expected (but also displays the label).

const IconTemplate = ({ label, variant, svg }) => html <button
class="${variant}"
aria-labelledby="close-button-label"
is="in-button"

<span id="close-button-label" hidden>${label}</span>
${svg}

`;

export const Icon = IconTemplate.bind({});
`

Inspecting the button element shows that the span includes the hidden prop and the label text ("Close")

image

@steveblue steveblue added the needs triage The issue needs to be reproduced and requires a proposed fix. label Feb 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage The issue needs to be reproduced and requires a proposed fix.
Projects
None yet
Development

No branches or pull requests

2 participants