changed all data and aria attributes to short syntax (fixed #27)
This commit is contained in:
parent
3e9be2ecec
commit
750c7e1b95
@ -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;
|
||||||
|
@ -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']];
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -77,7 +77,7 @@ class Carousel extends Widget
|
|||||||
/**
|
/**
|
||||||
* {@inheritdoc}
|
* {@inheritdoc}
|
||||||
*/
|
*/
|
||||||
public $options = ['data-bs-ride' => 'carousel'];
|
public $options = ['data' => ['bs-ride' => 'carousel']];
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -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([
|
||||||
|
@ -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'];
|
||||||
|
@ -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'];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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']);
|
||||||
|
@ -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'];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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',
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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(
|
||||||
|
Loading…
Reference in New Issue
Block a user