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

It appears the rule looking for a role=listbox as a child of role=combobox is looking for nesting?? #296

Closed
DavidMacDonald opened this issue Mar 27, 2017 · 2 comments

Comments

@DavidMacDonald
Copy link

Axe threw an error for the following code and it seems OK. Could it be that the tool is looking for the listbox to an actual child of the node that has a role of combobox? If so I'd say it should not require it to be a child of the node, as per the example in wai-aria 1.1 which is not a child.
https://www.w3.org/TR/wai-aria-1.1/#combobox

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/slds-icons/v7.6.0/utility-sprite/svg/symbols.svg#search"></use>
</svg></span><span class="slds-assistive-text" data-aura-rendered-by="375:0">Search</span></span></button><button class="slds-button slds-button--neutral close-button uiButton" aria-live="off" type="button" data-aura-rendered-by="387:0" data-aura-class="uiButton"><!--render facet: 388:0--><span class=" label bBody truncate" dir="ltr" data-aura-rendered-by="390:0">Close</span><!--render facet: 392:0--></button></span><div class="result-container" data-aura-rendered-by="395:0"><!--render facet: 306:0--><div data-aura-rendered-by="504:0" class="forceCommunityDeflection" data-aura-class="forceCommunityDeflection"><div class="lookup__menu uiAbstractList uiAutocompleteList" role="listbox" data-aura-rendered-by="536:0" data-aura-class="uiAbstractList uiAutocompleteList"><!--render facet: 531:0--><div class="listContent" data-aura-rendered-by="538:0"><ul class="lookup__list  visible" role="presentation" data-aura-rendered-by="533:0"><li class="lookup__item all suggestion force default uiAutocompleteOption forceCommunityDeflectionOption" role="presentation" data-aura-rendered-by="98:587;a" data-aura-class="uiAutocompleteOption forceCommunityDeflectionOption" data-interactive-uid="3"><a class="all suggestion force" role="option" id="14:c" href="javascript:void(0);" data-aura-rendered-by="99:587;a" tabindex="-1"><span class="type-indicator" data-aura-rendered-by="3:587;a"><span class="slds-icon_container slds-icon-utility-search search-icon slds-button__icon forceIcon" data-aura-rendered-by="8:587;a" data-aura-class="forceIcon"><span data-aura-rendered-by="11:587;a"><svg class="slds-icon--xx-small slds-icon" focusable="false" data-key="search" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/slds-icons/v7.6.0/utility-sprite/svg/symbols.svg#search"></use>
</svg></span><span class="slds-assistive-text" data-aura-rendered-by="13:587;a">Search</span></span></span><div class="option-text slds-truncate" data-aura-rendered-by="17:587;a"><span class="all suggestion force suggestionText searchOption uiOutputText" data-aura-rendered-by="20:587;a" data-aura-class="uiOutputText">"wing" in Ascensia Diabetes Community</span><!--render facet: 96:587;a--></div></a></li></ul><div class="emptyListContent" data-aura-rendered-by="540:0"><div class="empty-result" data-aura-rendered-by="510:0"><span class="slds-icon_container slds-icon-utility-search empty-state-icon slds-button__icon forceIcon" data-aura-rendered-by="515:0" data-aura-class="forceIcon"><span data-aura-rendered-by="518:0"><svg class="slds-icon--xx-small slds-icon" focusable="false" data-key="search" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/slds-icons/v7.6.0/utility-sprite/svg/symbols.svg#search"></use>
</svg></span><!--render facet: 519:0--></span><span class="empty-state-panel-label" data-aura-rendered-by="520:0">Search for product information, product accessories, orders or cases.</span></div></div><div class="loadingIndicator" data-aura-rendered-by="542:0"><div class="loadingCon siteforceLoadingBalls" data-aura-rendered-by="524:0" data-aura-class="siteforceLoadingBalls"><span class="loadingBall first" data-aura-rendered-by="525:0"></span><span class="loadingBall second" data-aura-rendered-by="526:0"></span><span class="loadingBall third" data-aura-rendered-by="527:0"></span><span class="assistiveText" data-aura-rendered-by="528:0">Loading</span></div></div></div><!--render facet: 532:0--></div></div><!--render facet: 321:0--></div><div class="zero-state-panel" data-aura-rendered-by="397:0"><span class="slds-icon_container slds-icon-utility-search zero-state-icon slds-button__icon forceIcon" data-aura-rendered-by="328:0" data-aura-class="forceIcon"><span data-aura-rendered-by="331:0"><svg class="slds-icon--xx-small slds-icon" focusable="false" data-key="search" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/slds-icons/v7.6.0/utility-sprite/svg/symbols.svg#search"></use>
</svg></span><!--render facet: 332:0--></span><span class="zero-state-panel-label" data-aura-rendered-by="333:0">Search for product information, product accessories, orders or cases.</span></div></div></form></div><span class="assistiveText" data-aura-rendered-by="399:0">End of Search Dialog</span></div></div></div>```

@marcysutton
Copy link
Contributor

The ARIA 1.1 spec does say combobox is allowed on a text input in 1.0 here:

The ARIA 1.0 specification describes a combobox pattern where a text input element has the combobox role and owns a listbox element. User agents, assistive technologies, and conformance checkers should continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional.

For the snippet above, axe-core is partially complaining that the combobox doesn't own a listbox. This can be fixed with aria-owns on the input/combobox pointing to the listbox ID. That changes the result to show what I believe is a bug:

Required ARIA child role not present: textbox

The input is a self-closing element, so it can't contain any children. I think there are multiple versions of this pattern which makes it a confusing one to automate. Any input @wilco or @dylanb?

@marcysutton
Copy link
Contributor

I'm pretty sure this is a duplicate of #160, so I'll close it. Holler if you feel otherwise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants