FORMS-18671: Visible label missing @sunnym @vavarshn #1603
Conversation
| aria-describedby="${file.id}__errormessage ${file.id}__longdescription ${file.id}__shortdescription" | ||
| data-cmp-data-layer="${file.data.json}" | ||
| /> | ||
| <div class="cmp-adaptiveform-fileinput__widget-container"> |
There was a problem hiding this comment.
We have a V3 component. You should update the HTML in the latest version, but V3 component already includes a container
There was a problem hiding this comment.
Updated in V3. Also changed the name of the container to align with the #syncAriaLabel() update. V1 remained changed as well.
| <div data-sly-test="${!tnc.showLink}" class="cmp-adaptiveform-termsandcondition__text"> | ||
| <div data-sly-resource="${'text'}"></div> | ||
| <div class="cmp-adaptiveform-termsandcondition__text-intersect"></div> | ||
| <div class="cmp-adaptiveform-termsandcondition__widget-container"> |
There was a problem hiding this comment.
Why is it necessary to add a new container element? Is it not possible with the existing container element cmp-adaptiveform-termsandcondition__content-containe?
There was a problem hiding this comment.
Needed a container to encapsulate both the T&C text description and checkbox (for using with label and role). On Win+NVDA keyboard navigation will skip directly to the Checkbox, ignoring the fact it's part of a component.
| @@ -14,7 +14,7 @@ | |||
| ~ limitations under the License. | |||
| ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/--> | |||
| <template data-sly-template.widget="${ @ checkboxgroup }"> | |||
| <div class="cmp-adaptiveform-checkboxgroup__widget ${checkboxgroup.orientation}" id="${widgetId}"> | |||
| <div class="cmp-adaptiveform-checkboxgroup__widget ${checkboxgroup.orientation}" id="${widgetId}" role="group"> | |||
There was a problem hiding this comment.
If you add the role="group" attribute, you must connect the label to the group using the aria-labelledby attribute.
There was a problem hiding this comment.
Added logic in FormFieldBase.js for this. Should help both CheckboxGroup and RadioGroup.
| // Some elements have the Widget hidden by default and other are Panels | ||
| // So this container mimics having a single, showing widget to attach the Accessibility label to. | ||
| if(regionContainer) { | ||
| regionContainer.setAttribute('role', 'region'); |
There was a problem hiding this comment.
role="region" attribute is not required to meet WCAG. It is the best practice.
There was a problem hiding this comment.
NVDA on Windows will ignore the div element despite having an aria-label. role="region" was the best compromise I could find for this situation.
|
Updated code and added my answers. |
Description
Related Issue
https://jira.corp.adobe.com/browse/FORMS-18671
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: