IDP Form Has Unexpected Markup

Overview

Radio buttons on dev oAuth IDP form are using incorrect markup.

Important This issue proposes a quick fix to the markup. Another issue offers a new design for the choices:

40

Steps to Reproduce

Be in a state like that of a user who has not visited Tapis.io.
Open https://dev.develop.tapis.io/v3/oauth2/idp.
See a form with radio buttons.

Expected Result

Radio button labels are on the same line as the radio buttons.

Actual Result

Radio buttons are on a new line underneath the radio buttons.

Proposals

A. Use Markup Expected by `s-form` Class[^1]

Snippet of Expected Markup Applied to Problem Form

```

Account Type *

TACC Keycloak

Dev keycloak

Test Accounts

GitHub Accounts

Globus Auth

```

What Makes This Class Special?

The `s-form` class is a ["**S**cope" namespace](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/#scope-namespaces-s-) (hence the "s-"). It has an inflexible expectation of the markup inside it. _The alternative to [`s-form` class][s-form][^1] is [**`c-form`**][c-form][^1], which requires a class on most elements in the form. It is tedious, but gives you some more freedom with the markup tags and usage._

Why Those Tags?

0. It is common to use a [`

`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) is used to wrap all elements required for a any one field. But, a `

` (or other non-semantic wrapper) is not necessary for every single ``, because ``s of `type="radio"` (and `type="checkbox"`) function together as a combined input. Such inputs can be grouped within a single wrapper. 1. The collection of [`` buttons](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) act as one option, so they—as a single group—merit a label (`…`). The [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) element can be separate from the field it labels, if it uses the [`for` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes). 2. The [`` buttons](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) are a [menu (``)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu#usage_notes) of interactive elements. 3. All [`` buttons](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) are [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required) because "To improve code maintenance, it is recommended to either include the required attribute in every same-named radio button in the group, or else in none." 4. Each input also needs a label to describe it (``). The [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) element can wrap inputs and text, in which case it does not need the `for` attribute. Wrapping the input and text this way and order lets those nodes naturally be on one line, and puts the text after the "button".

And… required?

The `has-required` class lets CSS know that the field within (e.g. ``, `

`) has the [`required` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required), so it can style parent or sibling elements (of the required element) accordingly. Example, the `<span aria-label="(required)">*</span>` creates a stylized "(required)" flag on the label. You will not see that on `s-form--login` forms, because there is a style to specifically hide those. If you removed the [`s-form--login` class][s-form--login][^1], then that "(required)" would show up, like in [`s-form` class demo][s-form][^1].

</details>
<p>I tested changing the markup on the live page.</p>
<table>
<thead>
<tr>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tbody>
<tr>
<td><img width="642" alt="before" src="https://github.com/tapis-project/authenticator/assets/62723358/1feacc33-c0b5-4da2-a181-8b7e569ef97f"></td>
<td><img width="642" alt="after" src="https://github.com/tapis-project/authenticator/assets/62723358/b90b398c-e589-41c1-885b-1e838c21cccb"></td>
</tr>
</tbody>
</table>
<p>[^1]: These links do not work as of the posting of this issue. I will update the server soon so that the links work.</p>            </div>
        </div>
    
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/wesleyboar"><img src="https://avatars.githubusercontent.com/u/62723358?v=4" />wesleyboar</a>
                commented
                <strong> 10 months ago</strong>            </div>
            <div class="markdown-body">
                <p>The links work now i.e. <a href="https://dev.cep.tacc.utexas.edu/static/ui/">https://dev.cep.tacc.utexas.edu/static/ui/</a> now has <a href="https://dev.cep.tacc.utexas.edu/static/ui/components/detail/s-form--portal.html">"S Form" (<code>s-form</code>)</a></p>            </div>
        </div>
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/wesleyboar"><img src="https://avatars.githubusercontent.com/u/62723358?v=4" />wesleyboar</a>
                commented
                <strong> 10 months ago</strong>            </div>
            <div class="markdown-body">
                <p>There is a new design proposed in a new issue:</p>
<ul>
<li>
<h1>40</h1>
</li>
</ul>            </div>
        </div>
    
    <div class="page-bar-simple">
            </div>

<div class="footer">
        <ul class="body">
            <li>© <script>
                    document.write(new Date().getFullYear())
                </script> Githubissues.</li>
            <li>Githubissues is a development platform for aggregating issues.</li>
        </ul>
    </div>

</html>

tapis-project / authenticator