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

Element div not allowed as child of element button in this context #1332

Open
hrvojegolcic opened this issue Mar 10, 2022 · 11 comments
Open

Element div not allowed as child of element button in this context #1332

hrvojegolcic opened this issue Mar 10, 2022 · 11 comments
Labels
needsinfo

Comments

@hrvojegolcic
Copy link

hrvojegolcic commented Mar 10, 2022 •
edited
Loading

Hi there, the following code is being validated:

<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
</head>
<body>

<button><div>INVALID</div></button>

<a role="button"><div>SHOULD BE INVALID THEN TOO</div></a>

</body>
</html>

As per error message, both cases should be invalid then, but only the first one currently is.

UPDATE: As Scott argued this might not have anything to do with HTML Validator. Moreover the question can be rather "is it really a problem for a div to be a child of an html button?", and yes, nowadays there should be nothing wrong with it! But imo, as the things are now here we have a problem in consistency. Because there are many other ARIA things currently reported by HTML Validator. As such, if something is reported for a button, then consistently it should be reported for role=button too. It would be even for <div role="button"><div>Example<div></div> given that , a button element has an implicit role=button, hence same rules should apply. Having said that, it is also defined about the role=button in the table "Allowed descendants of ARIA roles" under https://www.w3.org/TR/html-aria/#aria-table
@scottaohara
Copy link
Contributor

scottaohara commented Mar 10, 2022 •
edited
Loading

not exactly.

a div is not allowed a child/descendant of a button element (the need for this requirement can be debated, but that's out of scope here)

a div is an allowed child/descendant of an a element.

an a role=button is still an a element in how it is rendered by the browser, but its implicit aria role has been overwritten by the button role.

@hrvojegolcic
Copy link
Author

hrvojegolcic commented Mar 10, 2022 •
edited
Loading

Well, at least JAWS and VoiceOver will treat role=button same as <button>, which is the whole point of that role after all. Concretely in my case if I put a heading there instead of a DIV, then it won't be recognized as a heading by these screen readers if there is role=button (currently valid) or <button> (not valid) parent. Without a role is fine. Hence a consistent validation might help detect those.

Nonetheless then there is surely some inconsistency. In similar case there is specific complain about the element with the role itself. So maybe the same case can be here... An element with role xxx must not contain DIV...

<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
</head>
<body>

<a><div tabindex="-1">VALID</div></a>
<a role=button><div tabindex="-1">VALID</div></a>

</body>
</html>

image

@scottaohara
Copy link
Contributor

Well, at least JAWS and VoiceOver will treat role=button same as , which is the whole point of that role after all.

they announce the role the same. They don't do anything beyond that. E.g., a div role=button requires developers to provide all the necessary functionality. But this validation flag is not about exposed roles, but rather HTML's allowed nesting of elements.

re: nested headings - yeh... that's something that need to be further defined and is actually an open issue for ARIA in HTML to specify. While related, that's beyond the scope of what's being called out here.

re: your final example about element with tabindex=-1, again that's a different check about not having nested focusables in interactive elements.

Again, i would suggest that this is more a topic of "is it really a problem for a div to be a child of an html button?" in the past it likely was, but browsers do pretty well at error correcting for that nesting these days.

i don't see the point in flagging the following though:

<div role=button tabindex=0>
  <div style=...>...</div>
</div>

so long as there are no other roles/properties important for accessibility, there's nothing 'wrong' with the markup snippet i provided. saying that a div cannot be allowed as a descendant of role=button is conflating HTML element parsing requirements with accessibility concerns, which are definitely related at times, but don't always cause 1 to 1 issues.

@hrvojegolcic
Copy link
Author

Surely I agree with you in regards of is it really a problem for a div to be a child of an html button? clarification. I wasn't concerned only about div, but generally headings too. My point goes to the consistency. Imo wherever role="button" is used one should be able to use its semantic equivalent <button> instead and same rules should apply. Am I getting this wrong?

If so, maybe then instead, the issue is rather that a new validation rule should be introduced, such as "An element with role=button" must not contain a heading. Because accessibility APIs do not have a way of representing semantic elements contained in a button (hence probably a reason why JAWS and VoiceOver will ignore the heading in this case). That would be a different issue then the one reported here so if you agree we can close this one and open another one. Unless we should indeed have same validation rules for <button> and role=button

The second case is solved for button but not for role=button as follows:

<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
</head>
<body>

<button><div role="heading" aria-level="2">I am a heading</div></button>

<button><h2>I am a heading</h2></button>

<div role="button"><div role="heading" aria-level="2">I am a heading</div></div>

<div role="button"><h2>I am a heading</h2></div>

</body>
</html>

image

@scottaohara
Copy link
Contributor

scottaohara commented Mar 12, 2022 •
edited
Loading

Imo wherever role="button" is used one should be able to use its semantic equivalent <button> instead and same rules should apply. Am I getting this wrong?

Yes.

Again, the no div or h# element inside of a button element rule is due to HTML's content model requirements. The only elements allowed within a <button> are phrasing content elements but there must be no interactive content descendant and no descendant with the tabindex attribute specified.

The reason a heading's implicit ARIA role is being suppressed within a <button> or role=button is because a button role treats child elements as if they were role=presentation. There is no requirement, nor should there be, about whether a div is an allowed descendant of role=button.

The rules you are looking for would be normatively defined by the resolution of w3c/html-aria#362

@hrvojegolcic
Copy link
Author

The reason a heading's implicit ARIA role is being suppressed

Yes, that's exactly what the MDN article I posted says

The rules you are looking for would be normatively defined by the resolution of w3c/html-aria#362

Thank you. Not sure how to understand this. Is it that per your opinion role thingies should not be part of HTML validation at all?

@scottaohara
Copy link
Contributor

no. that's not what i've been saying. If you read the ARIA in HTML spec, you'd see that there are many rules for use of ARIA with HTML that are presently part of validating HTML.

What I have been telling you is that nesting allowances for HTML elements and nesting allowances for HTML elements with explicit ARIA roles are not a 1 to 1 match. Your original post in this thread is one example of this discrepancy, because there is nothing wrong with it from an HTML validation standpoint, nor a validation of HTML & ARIA.

An <a> element, with or without an href allows for a <div> as a child. So no failure from HTML.

An <a role=button>, with or without an href also allows for a <div> as a child because the parsing rules for the <a> element still apply, and from an ARIA standpoint, <div> is a generic element, exposing no meaningful semantics. So, because a role=button treats children as pesentational (or mostly does - that's a whole other rabbit hole) there is nothing to flag someone for concerning the <div>.

Your shift to talking about headings within buttons being invalid is something that does need to be addressed with the validator. The ARIA in HTML issue I linked to is where we will be defining the nesting rules to account for situations like:

<button> <div role=heading>invalid</div> </button>

where the div is invalid due to HTML's nesting rules, but the use of role=heading on an element inside of a <button> is the rule that ARIA in HTML needs to define.

@hrvojegolcic
Copy link
Author

something that does need to be addressed with the validator

I see clearly now where we have a disagreement on the matter. You don't, but I do however consider that it would be useful for the validator to address for role=button, the same way as it does for <button>. If nothing, at least for consistency. That is my opinion and I stay with it. Surely if the maintainers don't find this useful can close the issue. Thank you for your inputs.

@scottaohara
Copy link
Contributor

What value is consistency if the validation error isn’t actually an error?

@hrvojegolcic
Copy link
Author

hrvojegolcic commented Mar 13, 2022 via email •
edited
Loading

@sideshowbarker
Copy link
Contributor

@scottaohara Is there anything here for which the checker is out of conformance with current specs?

@mfreed7 mfreed7 mentioned this issue Sep 7, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needsinfo
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sideshowbarker @scottaohara @hrvojegolcic