Skip to content

Add tab navigation to the elements #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 29, 2025
Merged

Add tab navigation to the elements #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions content-elements/base/accordion/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@
{% set accordionIconPosition = (iconPosition ?: properties.accordionIconPosition) ?: 'start' %} {# must be in ['start', 'end', 'none'] #}

<div data-bsi-element="{{ accordionElementId }}" class="bsi-element-{{ accordionElementId }} inactive" x-data="accordionElement">
<button type="button" x-init="initAccordion" class="accordion-header element" @click="toggleActive" aria-expanded="false">
<button tabindex = "0" type="button" x-init="initAccordion" class="accordion-header element" @click="toggleActive" aria-expanded="false">
{% if accordionIconPosition == 'start' %}
{% block icon_before %}
<i class="bi inactive bi-plus-lg"></i>
<i class="bi active bi-dash-lg"></i>
<i tabindex = "0" class="bi inactive bi-plus-lg"></i>
<i tabindex = "0" class="bi active bi-dash-lg"></i>
{% endblock %}
{% endif %}
<div data-bsi-element-part="{{ accordionTitlePartId }}" class="accordion-title">{{ accordionTitleText }}</div>
<div tabindex = "0" data-bsi-element-part="{{ accordionTitlePartId }}" class="accordion-title">{{ accordionTitleText }}</div>
{% if accordionIconPosition == 'end' %}
{% block icon_after %}
<i class="bi bi-chevron-up rotate-180"></i>
<i tabindex = "0" class="bi bi-chevron-up rotate-180"></i>
{% endblock %}
{% endif %}
</button>
<div class="accordion-content" data-bsi-dropzone="{{ accordionContentDropzoneId }}">
<div tabindex = "0" class="accordion-content" data-bsi-dropzone="{{ accordionContentDropzoneId }}">
{% block accordionContent %}
{% include "@bsi-cx/design-standard-library-web/content-elements/base/text/template.twig" %}
{% endblock %}
Expand Down
2 changes: 1 addition & 1 deletion content-elements/base/banner/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<div data-bsi-element="{{ bannerElementId }}" class="{{ 'bsi-element-' ~ bannerElementId }} {{ bannerHorizontalAlignment }} {{ bannerVerticalAlignment }} container-fluid mb-3 px-0 position-relative d-flex overflow-hidden bsi-overlay-hide bsi-overlay-opacity-0">
{# 'srcset' support removed until further notice. see: https://github.com/bsi-software/bsi-cx-design-standard-library-web/issues/46 #}
<img src="{{ bannerImageSrc }}" data-bsi-hide-link class="bsi-banner w-100 h-100 position-absolute" alt="" data-bsi-element-part="{{ bannerImagePartId }}"/>
<img tabindex = "0" src="{{ bannerImageSrc }}" data-bsi-hide-link class="bsi-banner w-100 h-100 position-absolute" alt="" data-bsi-element-part="{{ bannerImagePartId }}"/>
<div class="bsi-banner-dz container position-relative bsi-horizontal-align py-5 d-flex">
<div class="bsi-vertical-align" data-bsi-dropzone="{{ bannerDropzoneId }}">
{% block banner_dropzone %}{% endblock %}
Expand Down
4 changes: 2 additions & 2 deletions content-elements/base/button/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
{% set buttonLetterCase = (buttonLetterCase ?: properties.buttonLetterCase) ?: 'bsi-btn-letter-default' %}

<div x-data="btnElement" data-bsi-element="{{ buttonElementId }}" class="{{ 'bsi-element-' ~ buttonElementId }} bsi-btn-element {{ buttonColor }} {{ buttonLayout }} {{ buttonSize }} {{ buttonWidth }} {{ buttonBorderRadius }} {{ buttonLetterCase }} bsi-btn-icon-hide">
<a x-init="initBtn" class="btn" data-bsi-element-part="{{ buttonElementPartId }}" href="#">{{ buttonText }}</a>
<label hidden class="bsi-icon-identifier" data-bsi-element-part="{{ buttonIconPartId }}">arrow-right</label>
<a tabindex = "0" x-init="initBtn" class="btn" data-bsi-element-part="{{ buttonElementPartId }}" href="#">{{ buttonText }}</a>
<label tabindex = "0" hidden class="bsi-icon-identifier" data-bsi-element-part="{{ buttonIconPartId }}">arrow-right</label>
</div>
{% endapply %}
2 changes: 1 addition & 1 deletion content-elements/base/chart/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
] %}

{% if cx.version.TARGET >= cx.version.CX_22_0 %}
<div x-data="chartElement" x-init="initChart" data-bsi-element="{{ chartElementId }}"
<div tabindex = "0" x-data="chartElement" x-init="initChart" data-bsi-element="{{ chartElementId }}"
class="mb-3 chart-js {{ 'bsi-element-' ~ chartElementId }}" data-bsi-element-part="{{ chartUrlPartId }}" data-bsi-url-provider="Diagramm"
data-borderColors="{{ borderColors|join(',') }}" data-backgroundColors="{{ backgroundColors|join(',') }}">
<img src="{{ chartImageSrc }}" alt="" class="w-100" data-bsi-element-part="{{ chartImagePartId }}"/>
Expand Down
4 changes: 2 additions & 2 deletions content-elements/base/figure/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@

<figure data-bsi-element="{{ figureElementId }}" class="figure {{ 'bsi-element-' ~ figureElementId }} bsi-caption-hide bsi-caption-medium bsi-shape-square bsi-orientation-landscape bsi-aspect-ratio-auto bsi-hover-effect-disabled bsi-overlay-hide bsi-overlay-opacity-0">
{# 'srcset' support removed until further notice. see: https://github.com/bsi-software/bsi-cx-design-standard-library-web/issues/46 #}
<img src="{{ figureImageSrc }}" class="figure-img img-fluid" alt="{{ figureCaptionText }}" data-bsi-element-part="{{ figureImagePartId }}"/>
<img tabindex = "0" src="{{ figureImageSrc }}" class="figure-img img-fluid" alt="{{ figureCaptionText }}" data-bsi-element-part="{{ figureImagePartId }}"/>
{% if figureHasCaption == true %}
<figcaption class="figure-caption" data-bsi-element-part="{{ figureTextPartId }}">{{ figureCaptionText }}</figcaption>
<figcaption tabindex = "0" class="figure-caption" data-bsi-element-part="{{ figureTextPartId }}">{{ figureCaptionText }}</figcaption>
{% endif %}
</figure>
{% endapply %}
2 changes: 1 addition & 1 deletion content-elements/base/h1/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
{% set titleH1Style = (style ?: properties.titleH1Style) ?: 'bsi-default' %}
{% set titleH1Weight = (weight ?: properties.titleH1Weight) ?: 'fw-normal' %}

<h1 data-bsi-element="{{ titleH1ElementId }}" data-bsi-element-part="{{ titleH1PartId }}" class="{{ 'bsi-element-' ~ titleH1ElementId }} {{ titleH1Color }} {{ titleH1Style }} {{ titleH1Weight }}">{{ titleH1Text }}</h1>
<h1 tabindex = "0" data-bsi-element="{{ titleH1ElementId }}" data-bsi-element-part="{{ titleH1PartId }}" class="{{ 'bsi-element-' ~ titleH1ElementId }} {{ titleH1Color }} {{ titleH1Style }} {{ titleH1Weight }}">{{ titleH1Text }}</h1>
{% endapply %}
2 changes: 1 addition & 1 deletion content-elements/base/h2/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
{% set titleH2Style = (style ?: properties.titleH2Style) ?: 'bsi-default' %}
{% set titleH2Weight = (weight ?: properties.titleH2Weight) ?: 'fw-normal' %}

<h2 data-bsi-element="{{ titleH2ElementId }}" data-bsi-element-part="{{ titleH2PartId }}" class="{{ 'bsi-element-' ~ titleH2ElementId }} {{ titleH2Color }} {{ titleH2Style }} {{ titleH2Weight }}">{{ titleH2Text }}</h2>
<h2 tabindex = "0" data-bsi-element="{{ titleH2ElementId }}" data-bsi-element-part="{{ titleH2PartId }}" class="{{ 'bsi-element-' ~ titleH2ElementId }} {{ titleH2Color }} {{ titleH2Style }} {{ titleH2Weight }}">{{ titleH2Text }}</h2>
{% endapply %}
2 changes: 1 addition & 1 deletion content-elements/base/h3/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,5 @@
{% set titleH3Style = (style ?: properties.titleH3Style) ?: 'bsi-default' %}
{% set titleH3Weight = (weight ?: properties.titleH3Weight) ?: 'fw-normal' %}

<h3 data-bsi-element="{{ titleH3ElementId }}" data-bsi-element-part="{{ titleH3PartId }}" class="{{ 'bsi-element-' ~ titleH3ElementId }} {{ titleH3Color }} {{ titleH3Style }} {{ titleH3Weight }}">{{ titleH3Text }}</h3>
<h3 tabindex = "0" data-bsi-element="{{ titleH3ElementId }}" data-bsi-element-part="{{ titleH3PartId }}" class="{{ 'bsi-element-' ~ titleH3ElementId }} {{ titleH3Color }} {{ titleH3Style }} {{ titleH3Weight }}">{{ titleH3Text }}</h3>
{% endapply %}
10 changes: 5 additions & 5 deletions content-elements/base/news-snippet/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
<div x-data="newsSnippet" data-bsi-element="{{ newsElementId }}" data-bsi-element-part="{{ newsPartId }}" class="{{ 'bsi-element-' ~ newsElementId }} bsi-news-bg-color-grey bsi-image-left bsi-ratio-4-8 bsi-news-btn-visible bsi-btn-color-secondary bsi-btn-outline bsi-height-auto">
<div data-bsi-news-snippet="news-snippets" class="card mb-3 bsi-news-element row g-0">
<div class="bsi-col-image">
<img class="bsi-news-image img-fluid" src="{{ bsi_cx_asset('../../../../static/image.png') }}" data-bsi-property="image"/>
<img tabindex = "0" class="bsi-news-image img-fluid" src="{{ bsi_cx_asset('../../../../static/image.png') }}" data-bsi-property="image"/>
</div>
<div class="bsi-col-content">
<div x-init="setButtonUrl" class="card-body">
<h2 class="bsi-news-title card-title" data-bsi-property="title">{{ bsi_cx_lorem(3) }}</h2>
<p class="bsi-news-headline card-text lead" data-bsi-property="headline">{{ bsi_cx_lorem(9) }}</p>
<p class="bsi-news-text card-text" data-bsi-property="text">{{ bsi_cx_lorem(40) }}</p>
<a class="bsi-news-btn btn btn-outline-secondary" href="" data-bsi-element-part="{{ newsBtnPartId }}">{{ bsi_cx_lorem(2) }}</a>
<h2 tabindex = "0" class="bsi-news-title card-title" data-bsi-property="title">{{ bsi_cx_lorem(3) }}</h2>
<p tabindex = "0" class="bsi-news-headline card-text lead" data-bsi-property="headline">{{ bsi_cx_lorem(9) }}</p>
<p tabindex = "0" class="bsi-news-text card-text" data-bsi-property="text">{{ bsi_cx_lorem(40) }}</p>
<a tabindex = "0" class="bsi-news-btn btn btn-outline-secondary" href="" data-bsi-element-part="{{ newsBtnPartId }}">{{ bsi_cx_lorem(2) }}</a>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion content-elements/base/social-media-share/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<div data-bsi-element="{{ shareElementId }}" class="{{ 'bsi-element-' ~ shareElementId }} d-flex flex-wrap {{ shareIconColor }} {{ shareIconHoverColor }} {{ shareIconSize }}" data-bsi-element-part="{{ shareElementPartId }}">
<div class="social-media-info">
<label data-bsi-element-part="{{ shareLabelPartId }}">Share this page</label>
<label tabindex = "0" data-bsi-element-part="{{ shareLabelPartId }}">Share this page</label>
</div>
<div data-bsi-social-share="LinkedIn" class="sm-linkedin social-media-item share m-1">
<a href="https://www.linkedin.com/sharing/share-offsite/?url=(url)" target="_blank" title="LinkedIn" class="btn btn-outline-primary">
Expand Down
2 changes: 1 addition & 1 deletion content-elements/base/text/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
{% set text = (text ?: properties.textContent) ?: bsi_cx_lorem(110) %}

<div data-bsi-element="{{ textElementId }}" data-bsi-element-part="{{ textPartId }}" class="{{ 'bsi-element-' ~ textElementId }} bsi-default">
<p>{{ text | raw }}</p>
<p tabindex = "0">{{ text | raw }}</p>
</div>
{% endapply %}
4 changes: 2 additions & 2 deletions content-elements/form/checkbox/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
<div class="bsi-form-input-element">
<input x-on:change="validateInput" class="form-check-input form-checkbox-input" type="checkbox" id="switch">
<div class="checkbox-label-and-tooltip">
<label class="form-check-label" for="switch">{{ checkboxLabelText }}</label>
<i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ checkboxInfoText }}"></i>
<label tabindex="0" class="form-check-label" for="switch">{{ checkboxLabelText }}</label>
<i tabindex="0" class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ checkboxInfoText }}"></i>
</div>
<div data-bsi-element-part="{{ checkboxFormTextPartId }}" class="form-text">{{ checkboxInfoText }}</div>
<div data-bsi-element-part="{{ checkboxErrorRequiredPartId }}" class="invalid-feedback"> {{ checkboxErrorRequiredText }} </div>
Expand Down
6 changes: 3 additions & 3 deletions content-elements/form/list-item/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@

<li data-bsi-element="{{ listItemElementId }}" class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<input class="form-check-input list-group-items-checkbox" type="checkbox" tabindex="1" checked>
<input class="form-check-input list-group-items-checkbox" type="checkbox" tabindex="0" checked>
&nbsp;&nbsp;
<span data-bsi-element-part="itemLabel">Item</span>
</div>
<div class="d-flex">
<button type="button" class="group-list-down bi bi-chevron-down" tabindex="1"></button>
<button type="button" class="group-list-up bi bi-chevron-up" tabindex="1"></button>
<button type="button" class="group-list-down bi bi-chevron-down" tabindex="0"></button>
<button type="button" class="group-list-up bi bi-chevron-up" tabindex="0"></button>
</div>
</li>
{% endapply %}
2 changes: 2 additions & 0 deletions content-elements/form/poll/prototype/poll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ Alpine.data('formPoll', () => ({
radio.setAttribute('class', 'form-check-input bsi-poll-radio-input');
radio.setAttribute('type', 'radio');
radio.setAttribute('value', value);
radio.setAttribute('tabindex', '0')
radio.setAttribute('id', id);
radio.setAttribute('name', name);
if (range.hasAttribute('required')) {
Expand All @@ -75,6 +76,7 @@ Alpine.data('formPoll', () => ({

label.setAttribute('class', 'form-check-label bsi-poll-radio-label');
label.setAttribute('for', id);
label.setAttribute('tabindex', '0')
label.setAttribute('data-value', value);
label.innerHTML = value;

Expand Down
20 changes: 10 additions & 10 deletions content-elements/form/poll/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,25 +25,25 @@
<div x-data="formPoll" data-bsi-element="{{ pollElementId }}" class="{{ 'bsi-element-' ~ pollElementId }} mb-4 bsi-form-element bsi-form-radio-element bsi-poll-nps">
<div data-bsi-element-part="{{ pollElementPartId }}" data-bsi-form-field-fixed-type>
<div class="form-label-and-info-text">
<label for="poll-input" class="form-label pt-0 d-block">{{ pollLabelText }}</label>
<div data-bsi-element-part="{{ pollFormTextPartId }}" class="form-text">{{ pollInfoText }}</div>
<i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ pollInfoText }}"></i>
<label tabindex = "0" for="poll-input" class="form-label pt-0 d-block">{{ pollLabelText }}</label>
<div tabindex = "0" data-bsi-element-part="{{ pollFormTextPartId }}" class="form-text">{{ pollInfoText }}</div>
<i tabindex = "0" class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ pollInfoText }}"></i>
</div>
<input type="number" name="poll-input" id="poll-input" min="1" max="10" step="1" value="" required="" class="bsi-poll-number-input" />
<div x-init="initRadioGroup" class="bsi-poll-radio-group" data-bsi-remove-if="draft"></div>
<input tabindex = "0" type="number" name="poll-input" id="poll-input" min="1" max="10" step="1" value="" required="" class="bsi-poll-number-input" />
<div tabindex = "0" x-init="initRadioGroup" class="bsi-poll-radio-group" data-bsi-remove-if="draft"></div>
<div class="bsi-poll-radio-group" data-bsi-remove-if="live">
{% for value in pollRange %}
<div class="form-check form-check-inline radio-group bsi-poll-radio-item">
<input class="form-check-input bsi-poll-radio-input" type="radio" id="poll-input-{{ value }}" value="{{ value }}" />
<label class="form-check-label bsi-poll-radio-label" for="poll-input-{{ value }}">{{ value }}</label>
<input tabindex = "0" class="form-check-input bsi-poll-radio-input" type="radio" id="poll-input-{{ value }}" value="{{ value }}" />
<label tabindex = "0" class="form-check-label bsi-poll-radio-label" for="poll-input-{{ value }}">{{ value }}</label>
</div>
{% endfor %}
</div>
<div x-init="initLabel" class="d-flex justify-content-between my-2">
<label data-bsi-element-part="{{ pollLeftPartId }}">{{ pollLabelLeftText }}</label>
<label data-bsi-element-part="{{ pollRightPartId }}">{{ pollLabelRightText }}</label>
<label tabindex = "0" data-bsi-element-part="{{ pollLeftPartId }}">{{ pollLabelLeftText }}</label>
<label tabindex = "0" data-bsi-element-part="{{ pollRightPartId }}">{{ pollLabelRightText }}</label>
</div>
<div data-bsi-element-part="{{ pollErrorRequiredPartId }}" class="invalid-feedback"> {{ pollErrorRequiredText }} </div>
<div tabindex = "0" data-bsi-element-part="{{ pollErrorRequiredPartId }}" class="invalid-feedback"> {{ pollErrorRequiredText }} </div>
</div>
</div>
{% endapply %}
6 changes: 3 additions & 3 deletions content-elements/form/radio/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
<div x-data="formRadio" data-bsi-element="{{ radioElementId }}" class="{{ 'bsi-element-' ~ radioElementId }} mb-4 bsi-form-element bsi-form-radio-element bsi-form-flex-label bsi-radio-block" data-bsi-element-part="{{ radioElementPartId }}">
<div class="bsi-form-input-element">
<div class="form-label-and-info-text">
<label class="form-label pt-0">{{ radioGroupLabelText }}</label>
<label tabindex="0" class="form-label pt-0">{{ radioGroupLabelText }}</label>
<div data-bsi-element-part="{{ radioFormTextPartId }}" class="form-text">{{ radioInfoText }}</div>
<i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ radioInfoText }}"></i>
<i tabindex="0" class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ radioInfoText }}"></i>
</div>
<div data-bsi-radio-group="" class="form-radio">
<div class="form-check" data-bsi-radio-item="">
<input x-on:change="validateInput" class="form-check-input" type="radio" name="radio" id="radio1">
<label class="form-check-label" for="radio1">{{ radioLabelText }}</label>
<label tabindex="0" class="form-check-label" for="radio1">{{ radioLabelText }}</label>
</div>
</div>
<div x-init="initRequiredError" class="invalid-feedback">
Expand Down
6 changes: 3 additions & 3 deletions content-elements/form/text-area/prototype/template.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
<div data-bsi-element="{{ textAreaElementId }}" class="{{ 'bsi-element-' ~ textAreaElementId }} mb-4 bsi-form-element bsi-form-textarea bsi-form-flex-label" data-bsi-element-part="{{ textAreaElementPartId }}">
<div class="bsi-form-input-element bsi-label-floating-element mb-3">
<div class="form-label-and-info-text">
<label for="field" class="form-label">{{ textAreaLabelText }}</label>
<div data-bsi-element-part="{{ textAreaFormTextPartId }}" class="form-text">{{ textAreaInfoText }}</div>
<i class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ textAreaInfoText }}"></i>
<label tabindex = "0" for="field" class="form-label">{{ textAreaLabelText }}</label>
<div tabindex = "0" data-bsi-element-part="{{ textAreaFormTextPartId }}" class="form-text">{{ textAreaInfoText }}</div>
<i tabindex = "0" class="bi bi-info-circle" data-bs-toggle="tooltip" data-bs-custom-class="bsi-tooltip" role="tooltip" aria-label="{{ textAreaInfoText }}"></i>
</div>
<textarea class="form-control" id="field" rows="5" value=""></textarea>
<div data-bsi-element-part="{{ textAreaErrorRequiredPartId }}" class="invalid-feedback"> {{ textAreaErrorRequiredText }} </div>
Expand Down