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

Add support for adding ACC descriptive text to a component #6445

Open
1 of 4 tasks
elenastoyanovaa opened this issue Feb 8, 2023 · 1 comment
Open
1 of 4 tasks

Add support for adding ACC descriptive text to a component #6445

elenastoyanovaa opened this issue Feb 8, 2023 · 1 comment
Assignees
@jdichev @petyabegovska @dobrinyonkov
Labels
ACC feature request for discussion

Comments

@elenastoyanovaa
Copy link
Contributor

elenastoyanovaa commented Feb 8, 2023 •
edited by dobrinyonkov
Loading

Feature Request Description

Give the developers the possibility to add accessible description text in ui5-webcomponents. For this we need to test possible approaches and extend/reuse the existing AriaLabelHelper util.

Proposed Solution

Similar to the accessibleName and accessibleNameRef, one should be able to add accessible description via an attribute (accessibleDescription/accessibleDescriptionRef). After the merge of #6364 we should extend the logic of the AriaLabelHelper (or re-use it) to cover this functionality. It could be achieved in two ways:

  • an accessibleDescription/accessibleDescriptionRef is passed to a web component. The value of the property/the text content of the element (should be handled in the same way as the accessibleNameRef) is passed to the aria-description attribute in the shadowDOM. This should be carefully tested as the aria-description property is still in draft https://w3c.github.io/aria/#aria-description. We should test on JAWS 2023, VoiceOver and NVDA latest and Chrome, Firefox, Edge & Safari. Check the current support stated here: https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescription. If this does not work correctly in the tested SR+Browser combination we should focus on the second approach.
  • an accessibleDescription/accessibleDescriptionRef is passed to a web component. The value of the property/the text content of the element (should be handled in the same way as the accessibleNameRef) is passed as a textContent to a hidden span which is placed in the same shadow DOM as the element with the respective role (the one that receives the focus). This element should have an aria-describedby attribute pointing to the hidden span.

Additional Context

  • Regardless of the approach if an accessibleDescriptionRef is used it should also reflect dynamic changes of descriptive element. Example:
    <span id="descriptive-text">Element Description</span> <ui5-combobox accessible-description-ref="descriptive-text"></ui5-combobox> .... document.getElementById("descriptive-text").innerHTML = "New Description"
    -here the accessible description in the shadow DOM should be updated to New Description as well.
  • Depending on the use case component developers should decide if they want to enable the accessibleDescription, the accessibleDescriptionRef or both.
  • Please be aware that the aria-describedby is not announced for some roles. More info could be found in the aria specification (example - https://www.w3.org/WAI/tutorials/tables/caption-summary/#using-aria-describedby-to-provide-a-table-summary)

Priority

  • Low
  • Medium
  • High
  • Very High

A clear and concise description of the impact/urgency of the required feature.

Related Issues

Notice that the feature is requested several times:

All of them should be evaluated again (before enabling them), since in most cases the better approach is to label the element and to not add a description to it. Nevertheless the aria-describedby is not announced for certain roles and each case should be tested separately.

Please link other issues related to this if some component is missing.

Expected result

  • The AriaLabelHelper should be extended to cover accessible description scenario or a new util should be created.
  • We should evaluate if we should use aria-description or aria-describedby internally
  • After this issue is resolved feature requests for accessible description for every component should be enabled and evaluated separately
This was referenced Feb 21, 2023
Closed
Closed
@dobrinyonkov dobrinyonkov mentioned this issue Mar 22, 2023
Closed
4 tasks
@dobrinyonkov dobrinyonkov mentioned this issue Apr 11, 2023
Closed
4 tasks
@petyabegovska
Copy link
Collaborator

Additional use case for ui5-input from SF: Is there a way to set the ariaDescribedBy/ariaDescription properties from the Input WC without having to override the whole get accInfo( ).

@dobrinyonkov dobrinyonkov self-assigned this May 13, 2024
@dobrinyonkov dobrinyonkov moved this from New to In Progress in Planning - Topic P Oct 16, 2024
@dobrinyonkov dobrinyonkov mentioned this issue Nov 4, 2024
Merged
@jdichev jdichev self-assigned this Nov 6, 2024
dobrinyonkov added a commit that referenced this issue Nov 12, 2024
@dobrinyonkov
feat(ui5-list, ui5-tree): support accessible description (#10131)
45f0ffe 
Related to: #6445

Description
This PR adds support for the aria-describedby and the aria-description attribute to the ui5-list and ui5-tree components. These attributes allows developers to provide a reference to an element that describes the list or a string value, which can be read by screen readers.

Example
aria-description
A property accessibleDescription is added to the ui5-list and ui5-tree components. When set, the value of this property will be used as the accessible description of the list.

<ui5-list accessible-description="This is a list of items">...</ui5-list>

<ui5-tree accessible-description="This is a tree of items">...</ui5-tree>
aria-describedby
A property accessibleDescriptionRef is added to the ui5-list and ui5-tree components. When set, the value of this property will be used as the id of the element that describes the list.

<p id="description">This component has description</p>

<ui5-list accessible-description-ref="description">...</ui5-list>

<ui5-tree accessible-description-ref="description">...</ui5-tree>
Changes
ui5-list and ui5-tree components now support the accessibleDescription and accessibleDescriptionRef properties
An already existing utility named AriaLabelHelper was extended with a new methods getEffectiveAriaDescriptionText and getAllAccessibleDescriptionRefTexts to handle the new properties, similar to the ones for the aria-label attribute
the name of the utility was changed to AccessibleTextsHelper to better reflect its purpose
the ui5-list now subscribes for changes of the referenced elements using the AccessibleTextsHelper to update the aria-description and aria-label attribute of the list as well the
ui5-tree only forwards the values to the internal ui5-tree-list which handles the property to attribute transformation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jdichev jdichev

@petyabegovska petyabegovska

@dobrinyonkov dobrinyonkov

Labels
ACC feature request for discussion
Projects
Planning - Topic P
Status: In Progress
Milestone
No milestone
Development

No branches or pull requests
5 participants
@jdichev @petyabegovska @elenastoyanovaa @dobrinyonkov @nnaydenow