Class-Less Markup #174

taufik-nurrohman · 2021-12-24T15:31:38Z

taufik-nurrohman
Dec 24, 2021
Maintainer

Here are some ideas that can be used to create class-less HTML markup components while retaining the ability to give it an aesthetic touch via CSS. This practice is recommended to be applied to any HTML output generated by a particular extension. In the future, HTML classes implementation should become a liability of the layout system.

Alert

https://www.w3.org/TR/wai-aria-1.1/#alert

<p role="alert">A message.</p>
<p aria-live="assertive" role="alert">An error message.</p>
<p aria-live="off" role="alert">An info message.</p>
<p aria-live="polite" role="alert">A success message.</p>

/* Default */
[role='alert'] {}

/* Error */
[aria-live='assertive'][role='alert'] {}

/* Info */
[aria-live='off'][role='alert'] {}

/* Success */
[aria-live='polite'][role='alert'] {}

Equivalent to these Bootstrap components:

<div class="alert">A message.</div>
<div class="alert alert-danger">An error message.</div>
<div class="alert alert-info">An info message.</div>
<div class="alert alert-success">A success message.</div>

Button

<a role="button">Button</a>
<button role="link">Link</a>

button,
[role='button'],
[type='button'],
[type='reset'],
[type='submit'] {}

a,
[role='link'] {}

Equivalent to these Bootstrap components:

<a class="btn btn-default">Button</a>
<button class="btn btn-link">Link</button>

Current

https://www.w3.org/TR/wai-aria-1.1/#aria-current

<nav>
  <a aria-current="page" href="#">Menu 1</a>
  <a href="#">Menu 2</a>
  <a href="#">Menu 3</a>
</nav>

Dialog

Tabs

Still not perfect since we will miss the tabs wrapper.

https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

Loading

https://www.w3.org/TR/wai-aria-1.1/#aria-busy

<html aria-busy="true">

[aria-busy='true'] {
  cursor: wait;
}

function ajax(link) {
    document.documentElement.setAttribute('aria-busy', 'true');
    fetch(link).then(response => response.json()).then(json => {
        render(json);
        document.documentElement.removeAttribute('aria-busy');
    });
}

function render(json) {}

Note

https://www.w3.org/TR/wai-aria-1.1/#note

<div role="note">
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Notice

<div role="doc-notice">
  <p><em>Danger!</em> Lorem ipsum dolor sit amet.</p>
</div>

<div role="doc-tip">
  <p><em>Tip!</em> Lorem ipsum dolor sit amet.</p>
</div>

Toggle

https://www.w3.org/TR/wai-aria-1.1/#switch

<input role="switch" type="checkbox">

[role='switch'][type='checkbox'] {}
[role='switch'][type='checkbox']:checked {}

Equivalent to these Bootstrap components:

<input class="form-check-input" role="switch" type="checkbox">

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mecha

Class-Less Markup #174

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Mecha

Class-Less Markup #174

Uh oh!

Uh oh!

taufik-nurrohman Dec 24, 2021 Maintainer

Alert

Button

Current

Dialog

Tabs

Loading

Note

Notice

Toggle

Replies: 0 comments

taufik-nurrohman
Dec 24, 2021
Maintainer