DocumentCard with multiple items, commands, and views: HTML doesn't parse. Fails MAS 4.1.1

jlukosky commented 4 years ago

Environment Information

Browser and OS versions: Windows 10/Edge Chromium

Describe the issue:

Please provide a reproduction of the issue in a codepen:

DocumentCard with multiple items, commands, and views This control improperly nests button and link roles within a button role.

<div tabindex="0" data-is-focusable="true" role="button" class="ms-DocumentCard ms-DocumentCard--actionable root-176" aria-label="Document Card with multiple items, commands and views. Marketing documents. 6 files were uploaded.
        Created by Annie Lindqvist in February 23, 2016. 432 views."><div class="ms-DocumentCardPreview root-209"><div><ul class="fileList-180"><li><div class="ms-Image fileListIcon-329" style="width: 16px; height: 16px;"><img class="ms-Image-image is-loaded ms-Image-image--portrait is-fadeIn image-330" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/icon-ppt.png" role="presentation" alt=""></div><a href="http://bing.com" class="ms-Link fileListLink-212">2016 Conference Presentation</a></li><li><div class="ms-Image fileListIcon-329" style="width: 16px; height: 16px;"><img class="ms-Image-image is-loaded ms-Image-image--portrait is-fadeIn image-330" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/icon-ppt.png" role="presentation" alt=""></div><a href="http://bing.com" class="ms-Link fileListLink-212">New Contoso Collaboration for Conference Presentation Draft</a></li><li><div class="ms-Image fileListIcon-329" style="width: 16px; height: 16px;"><img class="ms-Image-image is-loaded ms-Image-image--portrait is-fadeIn image-330" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/icon-ppt.png" role="presentation" alt=""></div><a href="http://bing.com" class="ms-Link fileListLink-212">Spec Sheet for design</a></li></ul><span class="fileListOverflowText-183">+3 more</span></div></div><a class="ms-DocumentCardLocation root-220" href="http://microsoft.com" aria-label="Location, Marketing Documents">Marketing Documents</a><div class="ms-DocumentCardTitle root-188" title="6 files were uploaded">6 files were uploaded</div><div class="ms-DocumentCardActivity root-189"><div class="ms-DocumentCardActivity-avatars avatars-190"><div class="ms-DocumentCardActivity-avatar avatar-191"><div role="presentation" class="ms-Persona-coin ms-Persona--size32 coin-195"><div role="presentation" class="ms-Persona-imageArea imageArea-197"><div class="ms-Image ms-Persona-image image-331" style="width: 32px; height: 32px;"><img class="ms-Image-image is-loaded ms-Image-image--cover ms-Image-image--portrait is-fadeIn image-326" src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png" alt=""></div></div></div></div></div><div class="ms-DocumentCardActivity-details details-192"><span class="ms-DocumentCardActivity-name name-193">Annie Lindqvist</span><span class="ms-DocumentCardActivity-activity activity-194">Created Feb 23, 2016</span></div></div><div class="ms-DocumentCardActions root-221"><div class="ms-DocumentCardActions-action action-222"><button type="button" class="ms-Button ms-Button--icon root-157" aria-label="share action" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-101" data-automationid="splitbuttonprimary"><i data-icon-name="Share" role="presentation" aria-hidden="true" class="ms-Icon root-38 css-98 ms-Button-icon icon-86" style="font-family: FabricMDL2Icons;"></i></span></button></div><div class="ms-DocumentCardActions-action action-222"><button type="button" class="ms-Button ms-Button--icon root-157" aria-label="pin action" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-101" data-automationid="splitbuttonprimary"><i data-icon-name="Pin" role="presentation" aria-hidden="true" class="ms-Icon root-38 css-225 ms-Button-icon icon-86" style="font-family: FabricMDL2Icons-0;"></i></span></button></div><div class="ms-DocumentCardActions-action action-222"><button type="button" class="ms-Button ms-Button--icon root-157" aria-label="notifications action" data-is-focusable="true"><span class="ms-Button-flexContainer flexContainer-101" data-automationid="splitbuttonprimary"><i data-icon-name="Ringer" role="presentation" aria-hidden="true" class="ms-Icon root-38 css-226 ms-Button-icon icon-86" style="font-family: FabricMDL2Icons-4;"></i></span></button></div><div class="ms-DocumentCardActions-views views-223"><i data-icon-name="View" aria-hidden="true" class="viewsIcon-227"></i>432</div></div></div>

Paste the source code into a parsing checker such as Nu HTML Checker for details on issues

Actual behavior:

Multiple errors in nesting button and link roles found

Expected behavior:

Code should parse without errors.

Documentation describing expected behavior

For information on this failure read Understanding Success Criterion 4.1.1: Parsing and MAS 4.1.1 - Parsing

JasonGore commented 4 years ago

This appears to be a duplicate of #11635 which you also created. Is there a difference?