Using DIV instead of P to wrap our buttons in XWiki forms

Hi,

The doc at https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/VerticalForms/#H5Bhtml5D says to use P as in:

<form action="." class="xform" method="post" name="form_name1">
    <dl>
      <dt>
        <label for="input_id1">Label</label>
      </dt>
      <dd>
        <input id="input_id1" name="input_name1" type="text" size="60" value=""/>
      </dd>
    </dl>
    <p>
      <span class="buttonwrapper">
        <input class="button" type="submit" value="Button"/>
      </span>
    </p>
</form>

For me this not semantic at all and not great (even if technically correct).

Most places I’ve seen in our code use DIV which seems much better from a semantic POV. For example:

        <form action="$xwiki.relativeRequestURL" class="xform third">
          ## CSRF prevention
          <input type="hidden" name="form_token" value="$!{services.csrf.getToken()}" />
          <input type="hidden" name="xpage" value="copy" />
          <input type="hidden" name="overwrite" value="true" />
          <input type="hidden" name="sourceWikiName" value="$escapetool.xml($sourcewiki)" />
          <input type="hidden" name="sourceSpaceName" value="$escapetool.xml($sourcespace)" />
          <input type="hidden" name="sourcePageName" value="$escapetool.xml($sourcepage)" />
          <input type="hidden" name="targetWikiName" value="$escapetool.xml($targetwiki)" />
          <input type="hidden" name="targetSpaceName" value="$escapetool.xml($targetspace)" />
          <input type="hidden" name="targetPageName" value="$escapetool.xml($targetpage)" />
          <div class="buttons">
            <span class="buttonwrapper"><input type="submit" value="$services.localization.render('core.copy.submit')" class="button"/></span>
            <span class="buttonwrapper"><a class="secondary button" href="$doc.getURL('view', 'xpage=copy')">$services.localization.render('core.copy.changeTarget')</a></span>
            <span class="buttonwrapper"><a class="secondary button" href="$doc.getURL()">$services.localization.render('core.copy.cancel')</a></span>
          </div>
        </form>

So I’m proposing to agree that we should use DIV as our best practice and fix https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/VerticalForms/#H5Bhtml5D and also fix places in our code where we still use P(for example: https://github.com/xwiki/xwiki-platform/blob/07c0927c9bf1a6a48db4ef8deb286f16d6e7c1b7/xwiki-platform-core/xwiki-platform-web/src/main/webapp/templates/distribution/macros.vm#L45).

WDYT?

Thanks

PS: discussion started here: https://matrix.to/#/!ikPtGZaGWtyblizzlR:matrix.xwiki.com/$160044510916343OHRcM:matrix.xwiki.com?via=matrix.xwiki.com&via=matrix.org&via=t2bot.io

Interesting point from the discussion linked above:

Would be so nice to use custom xwiki web components to avoid HTML code duplication and avoid these inconsistencies</related topic>

Note to self: verify if web components are now supported by all browsers that XWiki supports (without polyfills since they’d slow things down probably).

In the comments of https://dev.to/richharris/why-i-don-t-use-web-components-2cia I see:

Right now all the modern browsers fully support the v1 spec. This mean all the webkit and chromium based browsers (including edge). No polyfill needed for modern development, and if you have to support old browsers you’re probably already using polyfill for js things so what’s the problem? You just choosed a new technology to develop for old browsers.

Seems promising.

State of v1: https://polymer-library.polymer-project.org/1.0/docs/browsers

Now v1 is oldish, there’s a v2 and a v3.

Hi Vincent,

We may have a different understanding of what an HTML paragraph means, so I propose to look at the definition from the HTML specs:

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.

The term paragraph as defined in this section is used for more than just the definition of the p element. The paragraph concept defined here is used to describe how to interpret documents. The p element is merely one of several ways of marking up a paragraph.

So we have the paragraph concept and one way to mark a paragraph explicitly is with the p element.

The p element represents a paragraph.

Now lets look at how an HTML form is defined:

Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a text control. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements.

Finally let’s look at the definition of the div element:

The div element has no special meaning at all. It represents its children.

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

Moreover, regarding accessibility:

Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.

Taking all this into consideration, I don’t see anything wrong in using the p tag to mark explicitly the paragraph (i.e. the part of the form) that holds the form action buttons. It may be even better than using a meaningless div.

So -1 on my side.

Thanks,
Marius

So back to the this topic, I had 2 main comments:

  1. That we need consistency in how we write forms
  2. That it didn’t seem logical to me to use P instead of DIV for grouping the form buttons

I still believe that P isn’t the best solution for for buttons and that DIV is better. And my proof about 2) is that even though we documented to use P, we use DIV almost everywhere (simply because it’s way more logical).

FYI I’ve tested accessibility with P and DIV for buttons and it’s strictly the same.

If I follow how you interpreted the spec in your previous message (and that you highlighted with Each part of a form is considered a paragraph 1, and is typically separated from other parts using p elements.), it would mean using P for all form elements. So the first example would actually be:

<form action="." class="xform" method="post" name="form_name1">
    <dl>
      <dt>
        <!-- form element 1 -->
        <p>
          <label for="input_id1">Label</label>
        </p>
      </dt>
      <dd>
        <!-- form element 2 -->
        <p>
          <input id="input_id1" name="input_name1" type="text" size="60" value=""/>
        </p>
      </dd>
    </dl>
      <span class="buttonwrapper">
        <!-- form element 3 -->
        <p>
          <input class="button" type="submit" value="Button"/>
        </p>
      </span>
    </p>
</form>

Or maybe some variation (it’s not clear to me what a “form part” is). I’ve assumed it each form element was a part above.

BTW this is not what we see in docs, for example https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Does it mean they’re not interpreting the spec correctly?

This sounds over the top to me and quite unnecessary. Same for the buttons. I really don’t think that it’s the spirit of the spec and I continue to be sure that DIV is better here. But my POV doesn’t matter much, what matters is that we need to decide what we want to use and fix the code that doesn’t comply.

So what’s your proposal @mflorea?

Thanks

I’ve also checked https://www.w3.org/TR/html52/sec-forms.html which provides lots of examples and all I’ve seen (that is a lot) don’t use P at all but DIVs: https://www.w3.org/TR/html52/sec-forms.html

EDIT: Some sections mention P but I don’t understand why:

I don’t understand why the mix example styles. Any idea?

OTOH all examples from https://html.spec.whatwg.org/#forms all use P everywhere so maybe that’s the canonical way to write it.

Is that what we should do @mflorea?

Thanks

Not fully everywhere but almost. I’ve found https://html.spec.whatwg.org/#the-hgroup-element which doesn’t use P. And sometimes they mix styles as in https://html.spec.whatwg.org/#shared-state-using-a-shared-worker

However these are the only 2 examples where they don’t use P for buttons.