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.

Sign up for GitHub

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

Jump to bottom

ui5-textarea: [a11y] provide aria-label or aria-labelledby property in ui5-textarea #2107

Closed
zhangliangyi opened this issue Aug 18, 2020 · 1 comment · Fixed by #2126
Closed

ui5-textarea: [a11y] provide aria-label or aria-labelledby property in ui5-textarea #2107

zhangliangyi opened this issue Aug 18, 2020 · 1 comment · Fixed by #2126
Assignees
@ilhan007
Labels
ACC High Prio SAP SF SF_ACC
Milestone
1.0.0-rc.9

Comments

@zhangliangyi
Copy link

Dear colleague,

I am from Successfactors Web Experience Shanghai team.

Describe the bug
As the id defined in for property of ui5-label takes no effect to the inner input element in shadow DOM, the aria-label or aria-labelledby property is required for screen reader to identify the linked label.

But so far neither aria-label nor aria-labelledby is exposed from the component.

To reproduce
Steps to reproduce the behavior:

  1. Go to https://sap.github.io/ui5-webcomponents/playground/components/Label/
  2. Go to section Label 'for'
  3. Focus to the ui5-textarea and check the output of screen reader.

Expected behavior
When focus to the datepicker, select or textarea, the linked label should be read.

Context

  • UI5 Web Components version: 0.23.0
  • OS/Platform: macOS 10.15.6
  • Browser (if relevant): Microsoft Edge
  • Other information: Screen Reader - NVDA

Affected components (if known)

  • ui5-textarea
  • ui5-datepicker
  • ui5-select

Thanks
Jacob
@ilhan007 ilhan007 added this to Top Priorities in UI5 Web Components - Roadmap Aug 19, 2020
@ilhan007 ilhan007 self-assigned this Aug 19, 2020
@ilhan007 ilhan007 mentioned this issue Aug 19, 2020
Merged
ilhan007 added a commit that referenced this issue Aug 19, 2020
@ilhan007
feat(ui5-select): add ariaLabel and ariaLabelledby properties
5f6cb3d 
Related to #2107
@ilhan007 ilhan007 mentioned this issue Aug 19, 2020
Merged
ilhan007 added a commit that referenced this issue Aug 19, 2020
@ilhan007
feat(ui5-datepicker): add ariaLabel and ariaLabelledby properties
d9cf4c0 
FIXES #2107
@ilhan007 ilhan007 mentioned this issue Aug 19, 2020
Merged
@ilhan007
Copy link
Member

ilhan007 commented Aug 19, 2020 •
edited
Loading

Provided aria-label or aria-labelledby property for the following components: ui5-textarea, ui5-datepicker and ui5-select

#2126
#2125
#2124

Best,
ilhan

ilhan007 added a commit that referenced this issue Aug 20, 2020
@ilhan007
feat(ui5-textarea): add ariaLabel and ariaLabelledby properties (#2124)
c005478 
As the Input, the TextArea should support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107
ilhan007 added a commit that referenced this issue Aug 20, 2020
@ilhan007
feat(ui5-select): add ariaLabel and ariaLabelledby properties (#2125)
a58bf49 
Similar to other components, the Select should also support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107
ilhan007 added a commit that referenced this issue Aug 20, 2020
@ilhan007
feat(ui5-date-picker): add ariaLabel and ariaLabelledby properties (#…
e0f93fa 
…2126)

FIXES #2107
ilhan007 added a commit that referenced this issue Aug 20, 2020
@ilhan007
feat(ui5-textarea): add ariaLabel and ariaLabelledby properties (#2124)
a0fccdc 
As the Input, the TextArea should support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107
ilhan007 added a commit that referenced this issue Aug 20, 2020
@ilhan007
feat(ui5-select): add ariaLabel and ariaLabelledby properties (#2125)
9b89ae5 
Similar to other components, the Select should also support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107
ilhan007 added a commit that referenced this issue Aug 20, 2020
@ilhan007
feat(ui5-date-picker): add ariaLabel and ariaLabelledby properties (#…
87a1a60 
…2126)

FIXES #2107
@ilhan007 ilhan007 removed this from Top Priorities in UI5 Web Components - Roadmap Aug 25, 2020
@ilhan007 ilhan007 added this to the 1.0.0-rc.9 milestone Sep 2, 2020
@ilhan007 ilhan007 added this to Top Priorities in UI5 Web Components - Roadmap via automation Sep 2, 2020
@ilhan007 ilhan007 moved this from Top Priorities to 1.0.0-rc.9 (planned for Oct, 2020) in UI5 Web Components - Roadmap Sep 2, 2020
ilhan007 added a commit that referenced this issue Oct 17, 2020
@ilhan007
feat(ui5-textarea): add ariaLabel and ariaLabelledby properties (#2124)
563b5ea 
As the Input, the TextArea should support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107
ilhan007 added a commit that referenced this issue Oct 17, 2020
@ilhan007
feat(ui5-select): add ariaLabel and ariaLabelledby properties (#2125)
496735b 
Similar to other components, the Select should also support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107
ilhan007 added a commit that referenced this issue Oct 17, 2020
@ilhan007
feat(ui5-date-picker): add ariaLabel and ariaLabelledby properties (#…
386010f 
…2126)

FIXES #2107
ilhan007 added a commit that referenced this issue Nov 11, 2020
@ilhan007
feat(ui5-textarea): add ariaLabel and ariaLabelledby properties (#2124)
acc4964 
As the Input, the TextArea should support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107
ilhan007 added a commit that referenced this issue Nov 11, 2020
@ilhan007
feat(ui5-select): add ariaLabel and ariaLabelledby properties (#2125)
b6f8776 
Similar to other components, the Select should also support aria-label and aria-labelledby set on the custom element.
Note: internally we also set aria-label, using the base method "getEffectiveAriaLabelText" for the purpose.

Related to #2107
ilhan007 added a commit that referenced this issue Nov 11, 2020
@ilhan007
feat(ui5-date-picker): add ariaLabel and ariaLabelledby properties (#…
9e95d50 
…2126)

FIXES #2107
@fifoosid fifoosid mentioned this issue Jun 21, 2021
Merged
ilhan007 pushed a commit that referenced this issue Jul 30, 2021
@fifoosid
feat: implement assessibleNameRef for many components (#3442)
42d3ed5 
Part of #3107 

BREAKING CHANGE: The support for ```aria-labelledby``` have been deprecated in favour of  new attribute ```accessible-name-ref``` for the following components:
- ComboBox (Requested by SF #1916)
- DatePicker (Requested by SF #2107)
- Input (Requested #1866)
- List (Requested by SF #1886)
- Rating Indicator
- Select (Requested by SF #2107)
- StepInput (Implemented as part of the initial implementation #2804)
- TextArea (Requested by SF #2107)
- WizardStep (Implemented as part of the initial implementation #2400)
The ```aria-labelledby``` has been deprecated for the following component:
- Button (Requested by SF #1425)
The ```accessible-name``` has been deprecated for the following components:
- Link (Requested by SF #2356)
 Both ```aria-labelledby``` and ```accessible-name``` have been deprecated for the following components:
- Card (Requested by CBC #2127)
- CheckBox (Requested by SF #2265)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ilhan007 ilhan007

Labels
ACC High Prio SAP SF SF_ACC
Projects
None yet
Milestone
1.0.0-rc.9
Development

Successfully merging a pull request may close this issue.

feat(ui5-date-picker): add ariaLabel and ariaLabelledby properties SAP/ui5-webcomponents
3 participants
@zhangliangyi @ilhan007 @nikolay-kolarov