Skip to content

Button hidden label not read by NVDA #4

@jimwhurr

Description

@jimwhurr

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageThe issue needs to be reproduced and requires a proposed fix.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions