Нативные аккордеоны в Joomla: доступные, семантические и удобные для загрузки

• Источник: Joomla Community Magazine, Brian Teeman, Native Accordions in Joomla: Accessible, Semantic, and Bootstrap-Friendly
• Источник: Joomla Community Magazine, Brian Teeman, Native Accordions in Joomla: Accessible, Semantic, and Bootstrap-Friendly
• Источник: Joomla Community Magazine, Brian Teeman, Native Accordions in Joomla: Accessible, Semantic, and Bootstrap-Friendly

В Joomla 5.2 незаметно появилась новая мощная функция контента: встроенные аккордеоны в TinyMCE, основанные на стандартном HTML, а не на JavaScript. Это дает создателям контента простой способ добавлять свертываемые разделы, сохраняя при этом разметку чистой, доступной и ориентированной на будущее.

Вместо того, чтобы полагаться на виджеты-аккордеоны с большим количеством JavaScript, Joomla теперь использует встроенные в браузер элементы раскрытия: <details> и <summary>. Это небольшое изменение имеет большое значение для доступности, производительности и удобства обслуживания, а также прекрасно интегрируется с шаблонами Joomla на основе Bootstrap.

Начиная с Joomla 5.2, TinyMCE включает кнопку «Гармошка» на панели инструментов редактора. После включения редакторы смогут создавать расширяемые блоки контента непосредственно из интерфейса WYSIWYG, не затрагивая HTML.

Рабочий процесс прост:

Под капотом TinyMCE выводит стандартный HTML:

<details> <summary>Заголовок раздела</summary> <p>Здесь ваш контент — текст, изображения, списки и т. д.</p> </details> Здесь нет собственной разметки, зависимости от JavaScript и синтаксиса, специфичного для Joomla. То, что вы видите, — это то, что браузер понимает изначально.

После создания аккордеона в TinyMCE вы можете контролировать, будет ли он развернут или свернут при первой загрузке страницы.

Выберите сводку аккордеона и нажмите кнопку «Переключить аккордеон» на панели инструментов редактора. Это действие добавляет или удаляет атрибут open в элементе <details>.

Когда атрибут присутствует:

<подробности open="open">

по умолчанию аккордеон отображается открытым.

Когда его удалят:

<подробности>

Аккордеон загружается закрытым, и для раскрытия его содержимого требуется взаимодействие с пользователем.

Поскольку это поведение полностью контролируется собственным HTML, оно одинаково работает во всех браузерах и остается полностью доступным — без необходимости использования JavaScript.

Функция аккордеона опирается на стандартные элементы раскрытия HTML:

Эти элементы являются частью спецификации HTML и поддерживаются всеми современными браузерами.

Это правильно реализованная доступность — встроенная в разметку, а не прикручиваемая впоследствии.

Традиционным аккордеонам часто требуется JavaScript плюс тщательно управляемые атрибуты ARIA, чтобы их можно было использовать пользователями клавиатуры и вспомогательных технологий.

С <details> и <summary> :

Нет необходимости добавлять aria-expanded , role="button" или специальную обработку клавиатуры. Аккордеон TinyMCE Joomla доступен «из коробки».

Это работает везде, где Joomla отображает HTML — статьи, модули и настраиваемые поля.

Браузеры применяют минимальный стиль по умолчанию к элементам раскрытия. CSS — это то, в чем заключается настоящая сила, а интеграция Joomla Bootstrap, например, с Cassiopeia, делает это особенно элегантным.

резюме {дисплей: flex; оправдание-содержание: пространство между; выровнять-элементы: по центру; цвет фона: var(--primary); цвет: вар(--белый); заполнение: .75rem 1rem; граница-радиус: .375rem; } Подробности[открыть] резюме { border-bottom-left-radius: 0; граница-нижний-правый-радиус: 0; } Добавьте простой индикатор открытия/закрытия: summary::after { content: "+"; начертание шрифта: жирный; } Details[open] summary::after { content: "–"; } Удаление маркера браузера по умолчанию summary::-webkit-details-marker { display: none; } Сводка {стиль списка: нет; }

Ключевое преимущество этого подхода заключается в том, что вам не нужно переопределять выходные данные TinyMCE. Вместо:

Если вы решите создать переопределения макета, сохраните структуры <details> и <summary> нетронутыми. Замена их общей разметкой <div> означает восстановление доступности с нуля.

Аккордеон TinyMCE в Joomla — тихое, но важное улучшение:

Это Joomla, выбирающая стандарты, доступность и удобство обслуживания вместо сложности и предоставляющая создателям сайтов больше возможностей с меньшим количеством кода.

Некоторые статьи, опубликованные в журнале сообщества Joomla, представляют собой личное мнение или опыт автора по конкретной теме и могут не соответствовать официальной позиции проекта Joomla.

Будучи соучредителем Joomla! и OpenSourceMatters Inc. Я никогда не отличался отсутствием собственного мнения или боязнью его выразить.

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

Вам не нужно доводить до ума значок, чтобы внести свой вклад в Joomla, вам просто нужно засучить рукава и сделать это.