#заметка дня
В чате вопрос возник: «А при каких условиях и на что нужно ставить role=“button”?»
Вопрос весьма разумный, ведь вроде как кнопка она и есть кнопка, button. Вот только не всё так просто.
Для начала давайте определимся раз и навсегда: ссылки вместо кнопок не используются никогда.
Ссылка – это или переход к якорю на этой же странице, или же переход на другую страницу и только. Никаких a[href=“#”] с onClick, забудьте.
Остаются button, input[type=“button”] и input[type=“submit”].
Последние потомков внутри не предполагают и являются замещаемыми. Это значит, псевдо-элементов у нас тоже там нет. Впрочем, они вполне себе неплохо оформляются и как вещь в себе работают сносно: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button
И вот, button. Что же с ним может быть не так, что нам потребуется нечто с role=“button”?
Давайте с очевидного: валидатор запрещает иметь div внутри button.
Выражаясь языком спецификации, button ожидает фразовый контент, а не потоковый: https://caninclude.glitch.me/can/include/?child=div&parent=button
То есть речь идёт не только о div, а ещё о десятке тегов. В итоге официально вкладывать можно практически один лишь span. Наверное, это не всем и не всегда удобно.
Впрочем, браузеры такой трюк позволяют.
Но если вам не всё равно — добавьте role=“button” и tabindex на любой удобный вам элемент, чтобы превратить его в интерактивный. Валидатор и скринридеры будут довольны. А ещё старые Safari, которые не умеют во flexbox на кнопках.
Мы у себя в дизайн-системе назвали такой компонент PlainButton, вот иногда ну надо.
Второй же случай посложнее.
Есть такой вид кнопок, toggle-кнопки. Переключатели. Это не checkbox, это не switch. Это просто что-то, что можно «зажать» сейчас и «отжать» потом. Например, кнопки в текстовом редакторе.
Они или находятся в зажатом положении (текст по центру, полужирный и т. д.), или в отжатом. Переключаем, в общем.
Почему это не чекбоксы? Потому что это не волеизъявление (согласие на что-то) как таковое, это просто некое действие, влияющее на что-то в приложении. Почему не свитчи? Потому что мы ничего не включаем физически. Кажется, об этих концептах стоит потом подробнее написать 😅
В общем, если вы подменяете логику работы кнопки с моментальной реакции на что-то иное вроде toggle, вам необходимо отдельно указать как минимум два необходимых атрибута: role=“button” и aria-pressed. Это же касается, например, кнопок открытия аккордеонов. Вот только вместо pressed нужно будет устанавливать expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Да, это всё поначалу кажется ненужным усложнением, но поверьте: в большом приложении информация лишней не бывает. Особенно если она поможет кому-то вашим приложением пользоваться. А заодно легче отлаживать и хранить состояние.
#button #a11y #role #toggle
В чате вопрос возник: «А при каких условиях и на что нужно ставить role=“button”?»
Вопрос весьма разумный, ведь вроде как кнопка она и есть кнопка, button. Вот только не всё так просто.
Для начала давайте определимся раз и навсегда: ссылки вместо кнопок не используются никогда.
Ссылка – это или переход к якорю на этой же странице, или же переход на другую страницу и только. Никаких a[href=“#”] с onClick, забудьте.
Остаются button, input[type=“button”] и input[type=“submit”].
Последние потомков внутри не предполагают и являются замещаемыми. Это значит, псевдо-элементов у нас тоже там нет. Впрочем, они вполне себе неплохо оформляются и как вещь в себе работают сносно: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button
И вот, button. Что же с ним может быть не так, что нам потребуется нечто с role=“button”?
Давайте с очевидного: валидатор запрещает иметь div внутри button.
Выражаясь языком спецификации, button ожидает фразовый контент, а не потоковый: https://caninclude.glitch.me/can/include/?child=div&parent=button
То есть речь идёт не только о div, а ещё о десятке тегов. В итоге официально вкладывать можно практически один лишь span. Наверное, это не всем и не всегда удобно.
Впрочем, браузеры такой трюк позволяют.
Но если вам не всё равно — добавьте role=“button” и tabindex на любой удобный вам элемент, чтобы превратить его в интерактивный. Валидатор и скринридеры будут довольны. А ещё старые Safari, которые не умеют во flexbox на кнопках.
Мы у себя в дизайн-системе назвали такой компонент PlainButton, вот иногда ну надо.
Второй же случай посложнее.
Есть такой вид кнопок, toggle-кнопки. Переключатели. Это не checkbox, это не switch. Это просто что-то, что можно «зажать» сейчас и «отжать» потом. Например, кнопки в текстовом редакторе.
Они или находятся в зажатом положении (текст по центру, полужирный и т. д.), или в отжатом. Переключаем, в общем.
Почему это не чекбоксы? Потому что это не волеизъявление (согласие на что-то) как таковое, это просто некое действие, влияющее на что-то в приложении. Почему не свитчи? Потому что мы ничего не включаем физически. Кажется, об этих концептах стоит потом подробнее написать 😅
В общем, если вы подменяете логику работы кнопки с моментальной реакции на что-то иное вроде toggle, вам необходимо отдельно указать как минимум два необходимых атрибута: role=“button” и aria-pressed. Это же касается, например, кнопок открытия аккордеонов. Вот только вместо pressed нужно будет устанавливать expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Да, это всё поначалу кажется ненужным усложнением, но поверьте: в большом приложении информация лишней не бывает. Особенно если она поможет кому-то вашим приложением пользоваться. А заодно легче отлаживать и хранить состояние.
#button #a11y #role #toggle
#статья дня
Там на самом деле статья-то… #заметка скорее.
В общем, если вы в своих React-проектах часто используете логику отображения-скрытия чего-либо, то это всё превращается в повторение одного и того же кода: setOpen(true), setOpen(false) и так далее.
Напрашивается метод toggle, который переключал бы значение в зависимости от текущего на обратное.
Плюс, было бы неплохо добавить насильную установку значения, а не просто обратное.
И тут на ум приходит реализация хука вроде useToggle, который вынес бы весь повторяющийся код: https://levelup.gitconnected.com/react-custom-hooks-3-usetoggle-and-useboolean-af842c5b8b47
А если вы любите более… литературный код с чётким значением названий методов, там же описывается и вариант useBoolean, который вернёт методы включения, выключения и переключения состояния, а дальше уж используйте как надо.
#js #react #toggle
Там на самом деле статья-то… #заметка скорее.
В общем, если вы в своих React-проектах часто используете логику отображения-скрытия чего-либо, то это всё превращается в повторение одного и того же кода: setOpen(true), setOpen(false) и так далее.
Напрашивается метод toggle, который переключал бы значение в зависимости от текущего на обратное.
Плюс, было бы неплохо добавить насильную установку значения, а не просто обратное.
И тут на ум приходит реализация хука вроде useToggle, который вынес бы весь повторяющийся код: https://levelup.gitconnected.com/react-custom-hooks-3-usetoggle-and-useboolean-af842c5b8b47
А если вы любите более… литературный код с чётким значением названий методов, там же описывается и вариант useBoolean, который вернёт методы включения, выключения и переключения состояния, а дальше уж используйте как надо.
#js #react #toggle
🔥9
#заметка дня
В чате вопрос возник: «А при каких условиях и на что нужно ставить role=“button”?»
Вопрос весьма разумный, ведь вроде как кнопка она и есть кнопка, button. Вот только не всё так просто.
Для начала давайте определимся раз и навсегда: ссылки вместо кнопок не используются никогда.
Ссылка – это или переход к якорю на этой же странице, или же переход на другую страницу и только. Никаких a[href=“#”] с onClick, забудьте.
Остаются button, input[type=“button”] и input[type=“submit”].
Последние потомков внутри не предполагают и являются замещаемыми. Это значит, псевдо-элементов у нас тоже там нет. Впрочем, они вполне себе неплохо оформляются и как вещь в себе работают сносно: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button
И вот, button. Что же с ним может быть не так, что нам потребуется нечто с role=“button”?
Давайте с очевидного: валидатор запрещает иметь div внутри button.
Выражаясь языком спецификации, button ожидает фразовый контент, а не потоковый: https://caninclude.glitch.me/can/include/?child=div&parent=button
То есть речь идёт не только о div, а ещё о десятке тегов. В итоге официально вкладывать можно практически один лишь span. Наверное, это не всем и не всегда удобно.
Впрочем, браузеры такой трюк позволяют.
Но если вам не всё равно — добавьте role=“button” и tabindex на любой удобный вам элемент, чтобы превратить его в интерактивный. Валидатор и скринридеры будут довольны. А ещё старые Safari, которые не умеют во flexbox на кнопках.
Мы у себя в дизайн-системе назвали такой компонент PlainButton, вот иногда ну надо.
Второй же случай посложнее.
Есть такой вид кнопок, toggle-кнопки. Переключатели. Это не checkbox, это не switch. Это просто что-то, что можно «зажать» сейчас и «отжать» потом. Например, кнопки в текстовом редакторе.
Они или находятся в зажатом положении (текст по центру, полужирный и т. д.), или в отжатом. Переключаем, в общем.
Почему это не чекбоксы? Потому что это не волеизъявление (согласие на что-то) как таковое, это просто некое действие, влияющее на что-то в приложении. Почему не свитчи? Потому что мы ничего не включаем физически. Кажется, об этих концептах стоит потом подробнее написать 😅
В общем, если вы подменяете логику работы кнопки с моментальной реакции на что-то иное вроде toggle, вам необходимо отдельно указать как минимум два необходимых атрибута: role=“button” и aria-pressed. Это же касается, например, кнопок открытия аккордеонов. Вот только вместо pressed нужно будет устанавливать expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Да, это всё поначалу кажется ненужным усложнением, но поверьте: в большом приложении информация лишней не бывает. Особенно если она поможет кому-то вашим приложением пользоваться. А заодно легче отлаживать и хранить состояние.
#button #a11y #role #toggle #бородач
В чате вопрос возник: «А при каких условиях и на что нужно ставить role=“button”?»
Вопрос весьма разумный, ведь вроде как кнопка она и есть кнопка, button. Вот только не всё так просто.
Для начала давайте определимся раз и навсегда: ссылки вместо кнопок не используются никогда.
Ссылка – это или переход к якорю на этой же странице, или же переход на другую страницу и только. Никаких a[href=“#”] с onClick, забудьте.
Остаются button, input[type=“button”] и input[type=“submit”].
Последние потомков внутри не предполагают и являются замещаемыми. Это значит, псевдо-элементов у нас тоже там нет. Впрочем, они вполне себе неплохо оформляются и как вещь в себе работают сносно: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button
И вот, button. Что же с ним может быть не так, что нам потребуется нечто с role=“button”?
Давайте с очевидного: валидатор запрещает иметь div внутри button.
Выражаясь языком спецификации, button ожидает фразовый контент, а не потоковый: https://caninclude.glitch.me/can/include/?child=div&parent=button
То есть речь идёт не только о div, а ещё о десятке тегов. В итоге официально вкладывать можно практически один лишь span. Наверное, это не всем и не всегда удобно.
Впрочем, браузеры такой трюк позволяют.
Но если вам не всё равно — добавьте role=“button” и tabindex на любой удобный вам элемент, чтобы превратить его в интерактивный. Валидатор и скринридеры будут довольны. А ещё старые Safari, которые не умеют во flexbox на кнопках.
Мы у себя в дизайн-системе назвали такой компонент PlainButton, вот иногда ну надо.
Второй же случай посложнее.
Есть такой вид кнопок, toggle-кнопки. Переключатели. Это не checkbox, это не switch. Это просто что-то, что можно «зажать» сейчас и «отжать» потом. Например, кнопки в текстовом редакторе.
Они или находятся в зажатом положении (текст по центру, полужирный и т. д.), или в отжатом. Переключаем, в общем.
Почему это не чекбоксы? Потому что это не волеизъявление (согласие на что-то) как таковое, это просто некое действие, влияющее на что-то в приложении. Почему не свитчи? Потому что мы ничего не включаем физически. Кажется, об этих концептах стоит потом подробнее написать 😅
В общем, если вы подменяете логику работы кнопки с моментальной реакции на что-то иное вроде toggle, вам необходимо отдельно указать как минимум два необходимых атрибута: role=“button” и aria-pressed. Это же касается, например, кнопок открытия аккордеонов. Вот только вместо pressed нужно будет устанавливать expanded: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
Да, это всё поначалу кажется ненужным усложнением, но поверьте: в большом приложении информация лишней не бывает. Особенно если она поможет кому-то вашим приложением пользоваться. А заодно легче отлаживать и хранить состояние.
#button #a11y #role #toggle #бородач
👍27