Add arias attributes on link for accessibility

Created on 21 July 2023, 11 months ago

Problem/Motivation

For Accessibility, I need to add aria-expanded and aria-controls on the link of collapse.

Proposed resolution

add aria-expanded="false" if not expended and aria-expanded="true" if expended.

Add an ID on div content and aria-controls="ID-OF-DIV-CONTENT" on the link

EXEMPLE :

<div id="{{ id }}" class="expand-collapse" data-trim-length="{{ trim_length }}" data-default-state="{{ default_state }}"
     data-link-text-open="{{ link_text_open|t }}" data-link-text-close="{{ link_text_close|t }}"
     data-link-class-open="{{ link_class_open }}" data-link-class-close="{{ link_class_close }}">
    <div id="{{ id }}-content" class="ec-content">
        {{ value }}
    </div>
    <a href="#{{ id }}" class="ec-toggle-link ecf-open" aria-controls="{{ id }}-content" aria-expanded="false">See more</a>
</div>

Thanks for your help.

πŸ› Bug report
Status

Closed: won't fix

Version

2.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024