changed all data and aria attributes to short syntax (fixed #27)

This commit is contained in:
Simon Karlen 2022-01-03 09:40:20 +01:00
parent 3e9be2ecec
commit 750c7e1b95
No known key found for this signature in database
GPG Key ID: 0630C27D666EBCC3
12 changed files with 35 additions and 33 deletions

View File

@ -187,8 +187,8 @@ class Accordion extends Widget
Html::addCssClass($options, ['visibility' => 'show']); Html::addCssClass($options, ['visibility' => 'show']);
} }
if (!isset($options['aria-label'], $options['aria-labelledby'])) { if (!isset($options['aria']['label'], $options['aria']['labelledby'])) {
$options['aria-labelledby'] = $options['id'] . '-heading'; $options['aria']['labelledby'] = $options['id'] . '-heading';
} }
$encodeLabel = $item['encode'] ?? $this->encodeLabels; $encodeLabel = $item['encode'] ?? $this->encodeLabels;

View File

@ -76,7 +76,7 @@ class Breadcrumbs extends Widget
* @var array the HTML attributes for the widgets nav container tag. * @var array the HTML attributes for the widgets nav container tag.
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered. * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
*/ */
public $navOptions = ['aria-label' => 'breadcrumb']; public $navOptions = ['aria' => ['label' => 'breadcrumb']];
/** /**

View File

@ -77,7 +77,7 @@ class Carousel extends Widget
/** /**
* {@inheritdoc} * {@inheritdoc}
*/ */
public $options = ['data-bs-ride' => 'carousel']; public $options = ['data' => ['bs-ride' => 'carousel']];
/** /**

View File

@ -124,10 +124,10 @@ class Dropdown extends Widget
Html::addCssClass($linkOptions, ['widget' => 'dropdown-item']); Html::addCssClass($linkOptions, ['widget' => 'dropdown-item']);
if ($disabled) { if ($disabled) {
ArrayHelper::setValue($linkOptions, 'tabindex', '-1'); ArrayHelper::setValue($linkOptions, 'tabindex', '-1');
ArrayHelper::setValue($linkOptions, 'aria-disabled', 'true'); ArrayHelper::setValue($linkOptions, 'aria.disabled', 'true');
Html::addCssClass($linkOptions, ['disable' => 'disabled']); Html::addCssClass($linkOptions, ['disable' => 'disabled']);
} elseif ($active) { } elseif ($active) {
ArrayHelper::setValue($linkOptions, 'aria-current', 'true'); ArrayHelper::setValue($linkOptions, 'aria.current', 'true');
Html::addCssClass($linkOptions, ['activate' => 'active']); Html::addCssClass($linkOptions, ['activate' => 'active']);
} }
@ -147,10 +147,10 @@ class Dropdown extends Widget
Html::addCssClass($submenuOptions, ['widget' => 'dropdown-submenu dropdown-menu']); Html::addCssClass($submenuOptions, ['widget' => 'dropdown-submenu dropdown-menu']);
Html::addCssClass($linkOptions, ['toggle' => 'dropdown-toggle']); Html::addCssClass($linkOptions, ['toggle' => 'dropdown-toggle']);
$lines[] = Html::beginTag('div', array_merge_recursive(['class' => ['dropdown'], 'aria-expanded' => 'false'], $itemOptions)); $lines[] = Html::beginTag('div', array_merge_recursive(['class' => ['dropdown'], 'aria' => ['expanded' => 'false']], $itemOptions));
$lines[] = Html::a($label, $url, array_merge([ $lines[] = Html::a($label, $url, array_merge_recursive([
'data-bs-toggle' => 'dropdown', 'data' => ['bs-toggle' => 'dropdown'],
'aria-expanded' => 'false', 'aria' => ['expanded' => 'false'],
'role' => 'button', 'role' => 'button',
], $linkOptions)); ], $linkOptions));
$lines[] = static::widget([ $lines[] = static::widget([

View File

@ -288,7 +288,7 @@ class LinkPager extends Widget
Html::addCssClass($options, $class ?: $this->pageCssClass); Html::addCssClass($options, $class ?: $this->pageCssClass);
$linkOptions = $this->linkOptions; $linkOptions = $this->linkOptions;
$linkOptions['data-page'] = $page; $linkOptions['data']['page'] = $page;
if ($active) { if ($active) {
$options['aria'] = ['current' => 'page']; $options['aria'] = ['current' => 'page'];

View File

@ -282,8 +282,8 @@ class Modal extends Widget
$this->titleOptions = array_merge([ $this->titleOptions = array_merge([
'id' => $this->options['id'] . '-label', 'id' => $this->options['id'] . '-label',
], $this->titleOptions); ], $this->titleOptions);
if (!isset($this->options['aria-label'], $this->options['aria-labelledby']) && isset($this->title)) { if (!isset($this->options['aria']['label'], $this->options['aria']['labelledby']) && isset($this->title)) {
$this->options['aria-labelledby'] = $this->titleOptions['id']; $this->options['aria']['labelledby'] = $this->titleOptions['id'];
} }
if ($this->closeButton !== false) { if ($this->closeButton !== false) {
@ -296,11 +296,11 @@ class Modal extends Widget
if ($this->toggleButton !== false) { if ($this->toggleButton !== false) {
$this->toggleButton = array_merge([ $this->toggleButton = array_merge([
'data-bs-toggle' => 'modal', 'data' => ['bs-toggle' => 'modal'],
'type' => 'button', 'type' => 'button',
], $this->toggleButton); ], $this->toggleButton);
if (!isset($this->toggleButton['data-bs-target']) && !isset($this->toggleButton['href'])) { if (!isset($this->toggleButton['data']['bs-target']) && !isset($this->toggleButton['href'])) {
$this->toggleButton['data-bs-target'] = '#' . $this->options['id']; $this->toggleButton['data']['bs-target'] = '#' . $this->options['id'];
} }
} }

View File

@ -183,9 +183,9 @@ class Nav extends Widget
Html::addCssClass($options, ['widget' => 'nav-item']); Html::addCssClass($options, ['widget' => 'nav-item']);
Html::addCssClass($linkOptions, ['widget' => 'nav-link']); Html::addCssClass($linkOptions, ['widget' => 'nav-link']);
} else { } else {
$linkOptions['data-bs-toggle'] = 'dropdown'; $linkOptions['data']['bs-toggle'] = 'dropdown';
$linkOptions['role'] = 'button'; $linkOptions['role'] = 'button';
$linkOptions['aria-expanded'] = 'false'; $linkOptions['aria']['expanded'] = 'false';
Html::addCssClass($options, ['widget' => 'dropdown nav-item']); Html::addCssClass($options, ['widget' => 'dropdown nav-item']);
Html::addCssClass($linkOptions, ['widget' => 'dropdown-toggle nav-link']); Html::addCssClass($linkOptions, ['widget' => 'dropdown-toggle nav-link']);
if (is_array($items)) { if (is_array($items)) {
@ -196,7 +196,7 @@ class Nav extends Widget
if ($disabled) { if ($disabled) {
ArrayHelper::setValue($linkOptions, 'tabindex', '-1'); ArrayHelper::setValue($linkOptions, 'tabindex', '-1');
ArrayHelper::setValue($linkOptions, 'aria-disabled', 'true'); ArrayHelper::setValue($linkOptions, 'aria.disabled', 'true');
Html::addCssClass($linkOptions, ['disable' => 'disabled']); Html::addCssClass($linkOptions, ['disable' => 'disabled']);
} elseif ($this->activateItems && $active) { } elseif ($this->activateItems && $active) {
Html::addCssClass($linkOptions, ['activate' => 'active']); Html::addCssClass($linkOptions, ['activate' => 'active']);

View File

@ -223,16 +223,18 @@ class Offcanvas extends Widget
{ {
$this->options = array_merge([ $this->options = array_merge([
'tabindex' => -1, 'tabindex' => -1,
'data-bs-backdrop' => $this->backdrop ? 'true' : 'false', 'data' =>[
'data-bs-scroll' => $this->scrolling ? 'true' : 'false' 'bs-backdrop' => $this->backdrop ? 'true' : 'false',
'bs-scroll' => $this->scrolling ? 'true' : 'false'
]
], $this->options); ], $this->options);
Html::addCssClass($this->options, ['widget' => 'offcanvas offcanvas-' . $this->placement]); Html::addCssClass($this->options, ['widget' => 'offcanvas offcanvas-' . $this->placement]);
$this->titleOptions = array_merge([ $this->titleOptions = array_merge([
'id' => $this->options['id'] . '-label', 'id' => $this->options['id'] . '-label',
], $this->titleOptions); ], $this->titleOptions);
if (!isset($this->options['aria-label'], $this->options['aria-labelledby']) && isset($this->title)) { if (!isset($this->options['aria']['label'], $this->options['aria']['labelledby']) && isset($this->title)) {
$this->options['aria-labelledby'] = $this->titleOptions['id']; $this->options['aria']['labelledby'] = $this->titleOptions['id'];
} }
if ($this->closeButton !== false) { if ($this->closeButton !== false) {
@ -245,12 +247,12 @@ class Offcanvas extends Widget
if ($this->toggleButton !== false) { if ($this->toggleButton !== false) {
$this->toggleButton = array_merge([ $this->toggleButton = array_merge([
'data-bs-toggle' => 'offcanvas', 'data' => ['bs-toggle' => 'offcanvas'],
'type' => 'button', 'type' => 'button',
'aria-controls' => $this->options['id'] 'aria' => ['controls' => $this->options['id']]
], $this->toggleButton); ], $this->toggleButton);
if (!isset($this->toggleButton['data-bs-target']) && !isset($this->toggleButton['href'])) { if (!isset($this->toggleButton['data']['bs-target']) && !isset($this->toggleButton['href'])) {
$this->toggleButton['data-bs-target'] = '#' . $this->options['id']; $this->toggleButton['data']['bs-target'] = '#' . $this->options['id'];
} }
} }
} }

View File

@ -216,7 +216,7 @@ class Toast extends Widget
if (!isset($this->options['role'])) { if (!isset($this->options['role'])) {
$this->options['role'] = 'alert'; $this->options['role'] = 'alert';
} }
if (!isset($this->options['aria']) && !isset($this->options['aria-live'])) { if (!isset($this->options['aria']['live'])) {
$this->options['aria'] = [ $this->options['aria'] = [
'live' => 'assertive', 'live' => 'assertive',
'atomic' => 'true', 'atomic' => 'true',

View File

@ -174,7 +174,7 @@ HTML;
$expected = <<<HTML $expected = <<<HTML
<div id="w0" class="dropdown-menu"><div class="dropdown" aria-expanded="false"> <div id="w0" class="dropdown-menu"><div class="dropdown" aria-expanded="false">
<a class="dropdown-item disabled dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" role="button" tabindex="-1" aria-disabled="true">Dropdown1</a> <a class="dropdown-item disabled dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-disabled="true" role="button" tabindex="-1">Dropdown1</a>
<div id="w1" class="submenu-list dropdown-submenu dropdown-menu"><h6 class="dropdown-header">Page1</h6> <div id="w1" class="submenu-list dropdown-submenu dropdown-menu"><h6 class="dropdown-header">Page1</h6>
<h6 class="dropdown-header">Page2</h6></div> <h6 class="dropdown-header">Page2</h6></div>
</div> </div>

View File

@ -87,7 +87,7 @@ HTML;
$out = ob_get_clean(); $out = ob_get_clean();
$this->assertContains( $this->assertContains(
'<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" aria-controls="w0" data-bs-target="#w0">Launch demo offcanvas</button>', '<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#w0" aria-controls="w0">Launch demo offcanvas</button>',
$out $out
); );
} }

View File

@ -180,7 +180,7 @@ class TabsTest extends TestCase
]); ]);
$this->assertContains( $this->assertContains(
'<li class="nav-item"><a class="nav-link disabled" href="#w0-tab0" data-bs-toggle="tab" role="tab" aria-controls="w0-tab0" tabindex="-1" aria-disabled="true">Page1</a></li>', '<li class="nav-item"><a class="nav-link disabled" href="#w0-tab0" data-bs-toggle="tab" role="tab" aria-controls="w0-tab0" aria-disabled="true" tabindex="-1">Page1</a></li>',
$html $html
); );
$this->assertContains( $this->assertContains(
@ -188,11 +188,11 @@ class TabsTest extends TestCase
$html $html
); );
$this->assertContains( $this->assertContains(
'<li class="nav-item"><a class="nav-link disabled" href="#w0-tab2" data-bs-toggle="tab" role="tab" aria-controls="w0-tab2" tabindex="-1" aria-disabled="true">DisabledPage</a></li>', '<li class="nav-item"><a class="nav-link disabled" href="#w0-tab2" data-bs-toggle="tab" role="tab" aria-controls="w0-tab2" aria-disabled="true" tabindex="-1">DisabledPage</a></li>',
$html $html
); );
$this->assertContains( $this->assertContains(
'<a class="dropdown-item disabled" href="#w0-dd3-tab1" data-bs-toggle="tab" role="tab" aria-controls="w0-dd3-tab1" tabindex="-1" aria-disabled="true">DisabledItem</a>', '<a class="dropdown-item disabled" href="#w0-dd3-tab1" data-bs-toggle="tab" role="tab" aria-controls="w0-dd3-tab1" aria-disabled="true" tabindex="-1">DisabledItem</a>',
$html $html
); );
$this->assertContains( $this->assertContains(