Какое адекватно решение создания кастомного чекбокса с ссылкой внутри label?

Question

[godsplan]

Сам mdn не рекомендует пихать ссылки в label
А у меня кастомный чекбокс вида:

<label for="checkbox">
  <input type="checkbox" name="checkbox">
  <p>
    Lorem, ipsum dolor. 
    <a href="">Policy</a>
    Lorem, ipsum dolor.
  </p>
</label>

Я попытался сделать как то так:

<div class="main-form__checkbox form-checkbox">
  <label class="form-checkbox__label">
    <input class="form-checkbox__checkbox hidden" type="checkbox" name="checkbox"/><span class="form-checkbox__fake-checkbox"></span>
    <p>TEXT TEXT</p>
  </label><a class="form-checkbox__policy-link" href="">LINK</a>
  <label class="form-checkbox__label" for="checkbox">TEXT TEXT</label>
</div>

Но мне кажется это слишком мусорно.

В общем задача сделать текст кликабельым и активирующим чекбокс и внутри чтобы еще была ссылка.
(Как минимум на мобильно сафари первый вариант вообще не будет адекватно работать)

Answer 1

[profesor08]

1. В label не должно быть блочных элементов
2. В label не должно быть ссылок

В приведенном коде нарушаются оба пункта. Надо сделать так, чтоб в label не было подобных элементов.

Вывод: надо обновить требования, чтоб они соответствовали возможностям и спецификации HTML. Если потребуется доработать дизайн.

Comments

[godsplan]

Верхний код для пример, блочных элементов в label я тут не вижу.
Ну и это даже не ответ на вопрос.
Энивей я сделал так:

label.form-checkbox__label(for='checkbox')
          input#checkbox.form-checkbox__checkbox.hidden(type='checkbox', name='checkbox')
          span.form-checkbox__fake-checkbox
        p.form-checkbox__desc
          label(for='checkbox') Mit der Verarbeitung meiner Daten entsprechend der
          | !{ ' ' }
          a(href='') Datenschutzerklärung
          | !{ ' ' }
          label(for='checkbox') bin ich mit dem Abschicken meiner Nachricht einverstanden.

[profesor08]

godsplane, p https://www.w3schools.com/tags/tag_p.asp

Что делать и как я описал в ответе выше. Я считаю это верным путем. Но если хочется впихнуть невпихуемое, да так, чтоб потом это нельзя было нормально поддерживать, на здоровье, о дальнейшей поддержке надеюсь вопрос стоит.

[godsplan]

profesor08, окей, p блочный, но мдн гласит https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Текстовый контент, но без вложенных элементов label. Недопустимы другие оборачиваемые в label элементы помимо целевого.

Answer 2

[Сергей Т]

Можно сделать так:

<div class="checkbox">
  <input type="checkbox" id="checkbox" class="checkbox__input">
  <label for="checkbox" class="checkbox__label"></label>
  <p class="checkbox__text">Lorem ipsum <a href="#">policy</a> aspernatur minima.</p>
</div>

Лейблу задаешь абсолютную позицию и растягиваешь на весь блок, а ссылке релатив и z-index выше чем у лейбла

Comments

[godsplan]

По мне так это какой то костыль, так как в label ничего не вложено и инфы о нем для скринридеров скорее всего нет

[Сергей Т]

godsplane, добавь ему атрибут aria-label со значением аля "принять соглашения" и это решит проблему с доступностью

[Сергей Т]

godsplane, Костыль не костыль, но это решает твою проблему)) и по структуре валидно и не мусорно)