Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🛹 Feature: aria-disabled=true, remove disabled and cancel click-Event #5975

Closed
2 of 10 tasks
deleonio opened this issue Jan 29, 2024 · 4 comments · Fixed by #5981
Closed
2 of 10 tasks

🛹 Feature: aria-disabled=true, remove disabled and cancel click-Event #5975

deleonio opened this issue Jan 29, 2024 · 4 comments · Fixed by #5981
Labels
quality '24 v2
Milestone
BIK BITV-Test '24

Comments

@deleonio
Copy link
Contributor

deleonio commented Jan 29, 2024 •
edited
Loading

Wir können das native disabled durch aria-disabled ersetzen und damit mehr Komponenten mit deaktiviertem State ausstatten.

Vorteile:

Nachteile:

  • ???

Todos:

  • Accordion - aria-disabled=true, remove disabled, set tabindex="-1" and cancel click-Event
  • Button - aria-disabled=true, remove disabled, set tabindex="-1" and cancel click-Event
  • Details - aria-disabled=true, remove disabled, set tabindex="-1" and cancel click-Event
  • Link - aria-disabled=true, remove disabled, set tabindex="-1" and cancel click-Event
  • Select - select wird nicht umgesetzt, weil die Klick- und Key-Aktion nicht abgebrochen werden kann

Sonderlocke - steht zur Diskussion?!

  • Nur wenn, _hide-label (nur hier ist ein Tooltip) aktiviert ist, den Fokus ermöglichen, sonst tabindex="-1" verwenden

Drafts:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>disabled-Drafts</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <style>
    [aria-disabled] {
      color: #333;
      opacity: 0.75;
    }
    [aria-disabled]:after {
      content: ' (disabled)';
    }
  </style>
  <body>
    <h1>disabled-Szenarios</h1>
    <p>
      Using Aria-Disabled, we can implement more scenarios with deactivated
      status without barriers.
    </p>
    <hr aria-hidden="true" />
    <a aria-disabled="true" class="disabled" href="#">Link-Text</a>
    <hr aria-hidden="true" />
    <button aria-disabled="true" class="disabled">Button-Text</button>
    (regulär
    <button class="disabled" tabindex="0" disabled>Button-Text</button>)
    <hr aria-hidden="true" />
    <details aria-expanded="false" class="disabled">
      <summary aria-disabled="true">Closed Details</summary>
      Text
    </details>
    <br />
    <details aria-expanded="true" class="disabled" open>
      <summary aria-disabled="true">Open Details</summary>
      Text
    </details>
    <hr aria-hidden="true" />
    <div class="accordion disabled">
      <h2>
        <button
          aria-disabled="true"
          aria-control="content-0"
          aria-expanded="false"
          class="disabled"
          id="headline-0"
        >
          Closed Accodrion
        </button>
      </h2>
      <div
        aria-labelledby="headline-0"
        aria-hidden="true"
        hidden
        id="content-0"
      >
        Content
      </div>
    </div>
    <br />
    <div class="accordion disabled">
      <h2>
        <button
          aria-disabled="true"
          aria-control="content-1"
          aria-expanded="true"
          class="disabled"
          id="headline-1"
        >
          Open Accodrion
        </button>
      </h2>
      <div aria-labelledby="headline-1" aria-hidden="false" id="content-1">
        Content
      </div>
    </div>
    <hr aria-hidden="true" />
    <label>
      Input (aria-disabled + readonly)
      <!-- cancel input with readonly -->
      <input aria-disabled="true" readonly value="Value" />
    </label>
    <br />
    <label>
      Input (readonly)
      <input readonly value="Value" />
    </label>
    <br />
    <label>
      Input (disabled)
      <input disabled value="Value" />
    </label>
    <hr aria-hidden="true" />
    <label>
      Select (aria-disabled + ???)
      <!-- cancel open with ??? -->
      <select aria-disabled="true">
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
      </select>
    </label>
    <br />
    <label>
      Select (disabled)
      <select disabled>
        <option>Value 1</option>
        <option>Value 2</option>
        <option>Value 3</option>
      </select>
    </label>
    <hr aria-hidden="true" />
    <label>
      Textarea (aria-disabled + readonly)
      <!-- cancel input with readonly -->
      <textarea aria-disabled="true" readonly>Text</textarea>
    </label>
    <br />
    <label>
      Textarea (readonly)
      <textarea readonly>Text</textarea>
    </label>
    <br />
    <label>
      Textarea (disabled)
      <textarea disabled>Text</textarea>
    </label>
    <script>
      function cancelClick(e) {
        // caution
        if (e.key !== 'Tab') {
          e.preventDefault();
          console.log(e);
        }
      }
      Array.from(document.querySelectorAll('[aria-disabled="true"]')).forEach(
        (el) => {
          el.addEventListener('click', cancelClick);
          el.addEventListener('keydown', cancelClick);
          el.addEventListener('mousedown', cancelClick);
        }
      );
    </script>
  </body>
</html>

Feedback:
@deleonio deleonio added the v2 label Jan 29, 2024
@deleonio deleonio added this to the BIK BITV-Test '24 milestone Jan 29, 2024
@deleonio deleonio linked a pull request Jan 30, 2024 that will close this issue
feat: add disabled to accordion, details and links too #5981
Merged
7 tasks
@deleonio
Copy link
Contributor Author

deleonio commented Jan 30, 2024 •
edited
Loading

FYI @Sommerli2, @fohi17, @cbraehmig, @ElVariablo, @sdvg, @laske185

Ich habe es mal prototypisch umgesetzt, man müsste natürlich das CSS noch für das Szenario anpassen.

Lösung:

  • für Button, Input, Select, Textaria bleibt es bei disabled - Vorteil: select ist abgehakt
  • für Accordion, Details und Link setzen wir aria-disabled="true" tabindex="-1" und fangen das Event ab

Demo:

PS: Leaving the comfort zone.

@fohi17
Copy link

fohi17 commented Jan 31, 2024

Ich finde den Weg gar nicht so schlecht, wenn die disabled-Varianten angeboten werden müssen. Zumindest mit dem Screenreader funktioniert das so Wunderbar.

Aus meiner Sicht muss die Doku dann eben die Probleme die man sich mit disabled-Elementen evtl. einhandelt genau beschreiben. Diese bestehen ja unabhängig von der Umsetzung mit aria-disabled und tabindex, wie dass der Kontrast zu gering ist (z.B. Buttons, Accordion), oder man nicht sieht was disabled ist (z.B. Details).

@sdvg
Copy link
Member

sdvg commented Jan 31, 2024

Ich finde den Lösungsansatz auch gut, so wie bisher umgesetzt: Wo möglich weiter disabled verwenden, bei Spezialfällen wie Links auf aria-disabled zurückgreifen 👍
Zur Implementierung habe ich einen Kommentar im PR hinterlassen.

@Sommerli2
Copy link

Ich finde es auch gut, wenn man die Doku an dieser Stelle erweitert. Wenn man schon disabled Elemente verwenden will, welche Informationstragenden Inhalt bereitstellen, dann soll die Variante mit sichtbarer Beschriftung gewählt werden. Mit der Empfehlung nicht mit Disabled zu arbeiten.

@github-project-automation github-project-automation bot moved this to ✅ Done in KoliBri Board Feb 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
quality '24 v2
Projects
KoliBri Board
Archived in project
Milestone
BIK BITV-Test '24
Development

Successfully merging a pull request may close this issue.

feat: add disabled to accordion, details and links too public-ui/kolibri
4 participants
@sdvg @deleonio @Sommerli2 @fohi17