(In reply to Henry Wilkes [:henry] from comment #40) > I looked at the email addresses input table, and the design seems slightly broken. > > Currently it is > > ```html > <!-- These labels seem to be duplicates, and very far away structurally from where they are used. --> > <label id="vcard-email-table-header-type-label" hidden="">Email address</label> > <label id="vcard-email-table-header-email-label" hidden="">Email address</label> > <!-- This label shouldn't have both text content and an aria-label. Moreover, the aria-label is not an appropriate label for a checkbox. --> > <label id="vcard-email-table-header-primary" hidden="" aria-label="Choose your primary email address">Default</label> > ... > <table> > <thead> > <tr> > <th scope="col">Type</th> > <th scope="col">Email address</th> > <!-- Same issue with the aria-label as above. Also, this is hidden when creating a new contact. --> > <th scope="col" aria-label="Choose your primary email address" hidden="">Default</th> > </tr> > </thead> > <tbody> > <!-- I'm not sure why a role of "row" was set. --> > <tr is="vcard-email" slot="v-email" role="row"> > <td> > <select class="vcard-type-selection" aria-labelledby="vcard-email-table-header-type-label"> > </select> > </td> > <td> > <input type="email" aria-labelledby="vcard-email-table-header-email-label" /> > </td> > <td> > <input type="checkbox" aria-labelledby="vcard-email-table-header-primary" /> > </td> > </tr> > </tbody> > </table> > ``` > > Whereas a simpler design would be (following https://webaim.org/techniques/forms/advanced#multiple) > > ```html > <!-- No extra labels. --> > <table> > <thead> > <tr> > <th scope="col" id="vcard-email-table-header-type-label">Type</th> > <th scope="col" id="vcard-email-table-header-email-label">Email address</th> > <!-- "Default" or "Default email" is a fine label for the checkbox. --> > <th scope="col" id="vcard-email-table-header-primary">Default</th> > </tr> > </thead> > <tbody> > <tr> > <td> > <!-- Labelled by the heading. --> > <select class="vcard-type-selection" aria-labelledby="vcard-email-table-header-type-label"> > </select> > </td> > <td> > <input type="email" aria-labelledby="vcard-email-table-header-email-label" /> > </td> > <td> > <input type="checkbox" aria-labelledby="vcard-email-table-header-primary" /> > </td> > </tr> > </tbody> > </table> > ``` > > Please let me know if there is some specific problem that motivated the current design and maybe I can give a solution. Yeah it's currently broken. We agreed on your point. My issue occured because the slot element is a problem for a table and stuff like ``` <select> <slot></slot> </select ``` It's not flattening the HTML tree. Currently it's XML compliant but not HTML. The role="row" is added to for the accessibility tree with a broken table layout. For more information see: https://github.com/WICG/webcomponents/issues/59#issuecomment-202330706 https://github.com/WICG/webcomponents/issues/404#issuecomment-202290604 I'd like to get the slot element out. I will file a bug for it with possible solutions and add you if its fine for you.
Bug 1762126 Comment 59 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
(In reply to Henry Wilkes [:henry] from comment #40) > I looked at the email addresses input table, and the design seems slightly broken. > > Currently it is > > ```html > <!-- These labels seem to be duplicates, and very far away structurally from where they are used. --> > <label id="vcard-email-table-header-type-label" hidden="">Email address</label> > <label id="vcard-email-table-header-email-label" hidden="">Email address</label> > <!-- This label shouldn't have both text content and an aria-label. Moreover, the aria-label is not an appropriate label for a checkbox. --> > <label id="vcard-email-table-header-primary" hidden="" aria-label="Choose your primary email address">Default</label> > ... > <table> > <thead> > <tr> > <th scope="col">Type</th> > <th scope="col">Email address</th> > <!-- Same issue with the aria-label as above. Also, this is hidden when creating a new contact. --> > <th scope="col" aria-label="Choose your primary email address" hidden="">Default</th> > </tr> > </thead> > <tbody> > <!-- I'm not sure why a role of "row" was set. --> > <tr is="vcard-email" slot="v-email" role="row"> > <td> > <select class="vcard-type-selection" aria-labelledby="vcard-email-table-header-type-label"> > </select> > </td> > <td> > <input type="email" aria-labelledby="vcard-email-table-header-email-label" /> > </td> > <td> > <input type="checkbox" aria-labelledby="vcard-email-table-header-primary" /> > </td> > </tr> > </tbody> > </table> > ``` > > Whereas a simpler design would be (following https://webaim.org/techniques/forms/advanced#multiple) > > ```html > <!-- No extra labels. --> > <table> > <thead> > <tr> > <th scope="col" id="vcard-email-table-header-type-label">Type</th> > <th scope="col" id="vcard-email-table-header-email-label">Email address</th> > <!-- "Default" or "Default email" is a fine label for the checkbox. --> > <th scope="col" id="vcard-email-table-header-primary">Default</th> > </tr> > </thead> > <tbody> > <tr> > <td> > <!-- Labelled by the heading. --> > <select class="vcard-type-selection" aria-labelledby="vcard-email-table-header-type-label"> > </select> > </td> > <td> > <input type="email" aria-labelledby="vcard-email-table-header-email-label" /> > </td> > <td> > <input type="checkbox" aria-labelledby="vcard-email-table-header-primary" /> > </td> > </tr> > </tbody> > </table> > ``` > > Please let me know if there is some specific problem that motivated the current design and maybe I can give a solution. Yeah it's currently broken. We agreed on your point. My issue occured because the slot element is a problem for a table and stuff like ``` <select> <slot></slot> </select ``` It's not flattening the HTML tree. Currently it's XML compliant but not HTML. The role="row" is added to for the accessibility tree with a broken table layout. For more information see: https://github.com/WICG/webcomponents/issues/59#issuecomment-202330706 https://github.com/WICG/webcomponents/issues/404#issuecomment-202290604 I'd like to get the slot element out. I will file a bug for it with possible solutions and add you if its fine for you. Edit: The labels on the top are there because of an issue with the shadow dom borders. Without the slot element there's no need for the shadow dom and therefore no need for these additional labels. They should be removed.