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

[SF_ACC][Label][Select]: Label "for" property not associated with Select #10003

Open
1 task done
ksblklu02 opened this issue Oct 10, 2024 · 2 comments
Open
1 task done
Labels
bug This issue is a bug in the code Medium Prio SF_ACC TOPIC P

Comments

@ksblklu02
Copy link

ksblklu02 commented Oct 10, 2024

Bug Description

Label "for" property not working for Select

Affected Component

ui5-label

Expected Behaviour

The label text should be announced when the associated Select component get focused

Isolated Example

No response

Steps to Reproduce

  1. Go to https://sap.github.io/ui5-webcomponents/components/Select/
  2. Set label for Select component and tab to focus on the Select
  3. See the label for Select component is not announced
image

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

2.3.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SAP SuccessFactors

Declaration

  • I’m not disclosing any internal or sensitive information.
@ksblklu02 ksblklu02 added the bug This issue is a bug in the code label Oct 10, 2024
@ksblklu02 ksblklu02 changed the title [SF_ACC][Label][Select]: "for" property not working for Select [SF_ACC][Label][Select]: Label "for" property not associated with Select Oct 10, 2024
@unazko
Copy link
Contributor

unazko commented Oct 10, 2024

Hello @SAP/ui5-webcomponents-topic-p,

The issue is reproducible as described by the reporter.

<ui5-label for"selectComp">test</ui5-label>
<ui5-select id="selectComp">
	<ui5-option icon="laptop">Desktop</ui5-option>
	<ui5-option icon="ipad" selected>Tablet</ui5-option>
	<ui5-option icon="iphone">Phone</ui5-option>
</ui5-select>

Best regards,
Boyan

@ilhan007
Copy link
Member

Hi @ksblklu02

For the time being you can use the available Select's acc APIs:

/**
	 * Defines the accessible ARIA name of the component.
	 * @since 1.0.0-rc.9
	 * @public
	 * @default undefined
	 */
	@property()
	accessibleName?: string;

	/**
	 * Receives id(or many ids) of the elements that label the select.
	 * @default undefined
	 * @public
	 * @since 1.0.0-rc.15
	 */
	@property()
	accessibleNameRef?: string;
<ui5-label id="myLabel">my text</ui5-label>
<ui5-select accessible-name-ref="myLabel"></ui5-select>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue is a bug in the code Medium Prio SF_ACC TOPIC P
Projects
Development

No branches or pull requests

3 participants