Lista zadań bez JS

Question

Hej

W ramach ćwiczeń postanowiłem stworzyć prostą stronkę do zapisywania swoich zadań.
Haczyk w tym, że stronka nie mogła być stworzona w PHP czy z pomocą JS.
Zapraszam również do zajrzenia w plik README - zapisałem tam swoje poczynania (oczywiście w języku angielskim).

Jestem otwarty na wasze spostrzeżenia 
Czy mogę coś poprawić, dodać? Jakie są wasze przemyślenia?

Github 
CodePen

Comments

Poza tym zauważyłem mały problem z wpisywaniem zadania. Gdy jest wpisywana spacja to tekst się przekreśla.

IMO zmiana w css-ie, rozwiązuje powyższy problem

.new-task
{
    ...
    font-size: 20px;
    text-decoration-color: transparent;
    transition: all 0.2s ease-out 0.5ms
}

input:checked + label .new-task:valid:not(:placeholder-shown)
{
    text-decoration: line-through;
    text-decoration-color: #06D001;
    border: 2px solid #06D001;
}

 

dodałem jeszcze, że same spacje też nie są poprawnym wpisem (AFAIK w css-ie nie ma czegoś na wzór funkcji trim(), ale jak już wcześniej napisałem

żeby uzyskać jakąkolwiek interakcję jesteśmy zmuszeni Moim zdaniem na wykorzystanie "natywnego zachowania się" elementów html jak i ich atrybutów, a także selektorów css-owych.

"odpaliłem" required  i pattern="^(?!\s)(?!.*\s$).*$" (spacje dozwolone tylko w "środku" wpisu)

<input type="text" class="new-task" 
       placeholder="" 
       required pattern="^(?!\s)(?!.*\s$).*$" />

a w css-ie dodałem :valid

input:checked + label .new-task:valid:not(:placeholder-shown)
{
    ...
}

 

<input type="text" class="new-task" 
       placeholder="" required pattern="^(?!\s)(?!.*\s$).*$"/>
<input type="text" class="new-task"
       placeholder="" required pattern="^(?!\s)(?!.*\s$).*$"/>
<input type="text" class="new-task" placeholder=""/>
<input type="text" class="new-task" placeholder=""/>
<input type="text" class="new-task" placeholder=""/>
<input type="text" class="new-task"
       placeholder="" required pattern="^(?!\s)(?!.*\s$).*$"/>
<input type="text" class="new-task" 
       placeholder="" required pattern="^(?!\s)(?!.*\s$).*$"/>

---

O proszę, nie zauważyłem wcześniej komentarza, wybacz

Bardzo dziękuję za naprawienie tego błędu

Answer 1

Fajny sposób na poćwiczenie stylowania formularzy.

W sumie ciekawe, że wsadzenie tekstowego inputa jako labela dla checkboxa faktycznie działa i czytnik ekranowy to czyta. Ale wciąż są co najmniej 2 niepokryte przypadki:

1. same pola tekstowe nie mają etykiet (tutaj może pomóc np. [aria-label]),
2. focus checkboxa, gdy pole formularza jest puste (tutaj nie wiem, czy da się coś wykminić sensownego).

Comments

1. A widzisz, zapomniałem [aria-label].
Nie wiem przypadkiem czy gdzieś tutaj o tym nie czytałem, ale jeszcze szperałem o tym dzisiaj i kurcze z głowy mi wyleciało

2. Co masz na myśli?

---

2. Co masz na myśli?

Jeśli pole tekstowe jest puste, to checkbox obok niego będzie miał pustą nazwę i będzie czytany przez czytnik jako generyczny checkbox bez nazwy. Wstawiłbym screena, ale to forum wrzuca je w rozmiarze znaczka pocztowego -.-. Ale to można sprawdzić w dev tools.

---

Właśnie sobie sprawdziłem - najlepiej by było jakiś placeholder typu "Checkbox for task [nazwa zadania].

Poza tym zauważyłem mały problem z wpisywaniem zadania. Gdy jest wpisywana spacja to tekst się przekreśla.

Finalnie jednak tekst poprawnie się wyświetla. Nie wiem czy dodać nad inputem diva z krechą, który będzie się pojawiał po kliknięciu checkboxa, czy może znaleźć inny sposób.

---

Poza tym zauważyłem mały problem z wpisywaniem zadania. Gdy jest wpisywana spacja to tekst się przekreśla.

To wygląda na bug Chrome'a. W Firefoksie czy Safari ten problem nie występuje. 

---

Odkryliśmy buga :0
Tak czy siak przydałoby się coś z tym zrobić.

Wracając do tematu dostępności

Czy jest to poprawnie zapisane?

---

To pierwsze jest, ale tam to [aria-label] nie jest do niczego potrzebne – bo powiela to samo, co jest w treści elementów. W większości przypadków w drzewku dostępności znajdzie się to, co w elemencie, więc taka dodatkowa etykieta nic nie zmienia. To ma tak naprawdę sens tylko dla tych tekstowych inputów, bo one nie mają innych labeli.

Dodatkowo dodanie [aria-label] do checkboxów sprawi, że nadpisze to obecną etykietę, więc nie uzyskasz czegoś typu "Checkbox for First task", tylko dla każdego checkboxa uzyskasz po prostu "Checkbox for ". Jak już kombinować w tę stronę, to bardziej typu:

<span id="check-desc" hidden>Mark as done</span>
<input type="checkbox" id="check1" aria-describedby="check-desc">
<label for="check1"><input type="text" aria-label="First task"></label>

Wówczas taki checkbox zostanie przez większość czytników przeczytany jako coś typu "<Wartość pola tekstowego>, mark as done, <stan zaznaczenia>, <typ pola – tick box, checkbox, itd, w zależności od czytnika".

---

Poprawione, dziękuję serdecznie 

Answer 2

Dodaj placeholder do input-ów nawet pusty

<input type="text" class="new-task" placeholder=""/>

a w css-ie

input:checked + label .new-task:not(:placeholder-shown)
{
    text-decoration-color: #06D001;
    border: 2px solid #06D001;
}

kod na obrazku

<input type="text" class="new-task" placeholder=""/>
<input type="text" class="new-task"/>

Comments

Czyli w tym wypadku wywalasz możliwość odznaczenia zadania, jeśli pole jest puste... ciekawe

---

BTW,

 

IMO, jak dodasz

* {
    box-sizing: border-box;
}

lub

.task * {
    box-sizing: border-box;
}

to wtedy ten zapis jest zbędny

.task-box {
    ...
    transform: translateY(-0.075em);
    ...
}

 

---

oprócz wspomnianego problemu, który twoja zmiana wprowadza, dodatkowo komplikujesz niepotrzebne selektory. :)
Keep it simple stupid jak i reguła YAGNI czasami się bardzo przydają :), a po latach pracy powiem, że czasami "readability" kodu to jedna z najistotniejszych rzeczy, po drugie być może mimo operatora + nie każdy element w takiej samej konfiguracji przynależny do klasy..new-task będziemy chcieli, aby przejmował takie właśnie zachowanie.

---

po drugie być może mimo operatora + nie każdy element w takiej samej konfiguracji przynależny do klasy..new-task

jak nie przynależy, czytałeś kod OP-a?

<article class="task">
  <input type="checkbox" class="task-box" id="task-1"/>
  <label for="task-1">
    <input type="text" class="new-task"/>
  </label>
  <input type="checkbox" class="task-box" id="task-2"/>
  <label for="task-2">
    <input type="text" class="new-task"/>
  </label>
  <input type="checkbox" class="task-box" id="task-3"/>
  <label for="task-3">
    <input type="text" class="new-task"/>
  </label>
  <input type="checkbox" class="task-box" id="task-4"/>
  <label for="task-4">
    <input type="text" class="new-task"/>
  </label>
  <input type="checkbox" class="task-box" id="task-5"/>
  <label for="task-5">
    <input type="text" class="new-task"/>
  </label>
  <input type="checkbox" class="task-box" id="task-6"/>
  <label for="task-6">
    <input type="text" class="new-task"/>
  </label>
  <input type="checkbox" class="task-box" id="task-7"/>
  <label for="task-7">
    <input type="text" class="new-task"/>
  </label>
  <input type="checkbox" class="task-box" id="task-8"/>
  <label for="task-8">
    <input type="text" class="new-task"/>
  </label>
</article>

 

ta część jest oryginalnym kodem OP-a (linia 128 css-a)

input:checked + label .new-task
{
    text-decoration-color: #06D001;
    border: 2px solid #06D001;
}

ze względu na warunek

zaproponowałem trick z placeholder.

 

dodatkowo komplikujesz niepotrzebne selektory. :)

dodanie

:not(:placeholder-shown)

do

input:checked + label .new-task
{
    text-decoration-color: #06D001;
    border: 2px solid #06D001;
}

uważasz za skomplikowany, to pokaż, proszę, prostszy sposób na osiągnięcie tego efektu, chętnie dowiem się czegoś nowego. 

 

Pomijam fakt, żeby zrobić listę TO-DO, mając na uwadze warunek jaki postawił OP i żeby uzyskać jakąkolwiek interakcję jesteśmy zmuszeni Moim zdaniem na wykorzystanie "natywnego zachowania się" elementów html jak i ich atrybutów, a także selektorów css-owych.

---

Kod usprawniony, dziękuję