当数据目标中有分号或冒号时,带有展开的aria的Button元素不展开

如果我们观察上面的图像数据目标,aria控件和目标ID中有一个分号。在理想情况下,当我们点击按钮时,它应该展开,因为所有属性都有一致的命名。但当我们有一个分号/冒号时,它就不起作用了 a pull request 在相同的基础上合并,但仍然不起作用。

我有一个来自XML的列表,它对带分号和不带分号的单词都很重要,这对我的情况有很大的不同。有没有办法让我在身份证中逃脱?

我预计数据目标应该根据aria控件进行扩展和折叠。

 <button tabindex='0' role="button" type="button" class="btn btn-outline-dark m-1" data-toggle="collapse" data-target="#vsn-{{vs_feat_name[1:]|replace(':', 'colon')}}-end" aria-expanded="false" aria-controls="#vsn-{{vs_feat_name[1:]|replace(':', 'colon')}}-end">
                <span style="font-weight:bold; text-transform:uppercase;">{{ vs_feat_name+' ('+vs_val['count']|string+')' }}</span>
              </button>
              <div class="collapse" id="vsn-{{vs_feat_name[1:]|replace(':', 'colon')}}-end">
                <div class="card border border-dark" style="max-height: 500px; overflow-y: scroll; padding: 1rem">
                  <div class="card-header">
                    <p>
                      Frames containing <span style="text-transform: uppercase;">{{vs_feat_name}}: </span>{{ vs_val['vn_class_mem']|length }}<br>
                    </p>
                  </div>
                  <div class="card card-body">
                    <h5>
                      {% for vn_mem in vs_val['vn_class_mem'] %}
                      <button tabindex='0' role="button" type="button" class="btn btn-outline-dark m-1" data-toggle="button" onclick="window.location.href='{{ url_for( 'render_vn_class', vn_class_id=vn_mem) }}';">
                        <span style="font-weight:bold; text-transform:uppercase;">{{ vn_mem }}</span>
                      </button>
                      {% endfor %}
                    </h5>
                  </div>
                </div>
              </div>