Skip to content

Commit 026b990

Browse files
iroybotlinioiroybotlinio
committed
fix: make sure twig generator adds kebab-case attributes for ARIA-*
1 parent 0a4a5cd commit 026b990

92 files changed

Lines changed: 376 additions & 116 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/TemplateGenerator/TwigGenerator.php‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,11 @@ public function setComponentHandle(string $handle): void
9292
$this->componentHandle = $handle;
9393
}
9494

95+
private function camelToKebab(string $string): string
96+
{
97+
return strtolower(preg_replace('/([a-z])([A-Z])/', '$1-$2', $string));
98+
}
99+
95100
public function renderElement(HTMLElementDelegatorInterface $element): string
96101
{
97102
$ref = new ReflectionClass($element);
@@ -171,7 +176,9 @@ public function renderElement(HTMLElementDelegatorInterface $element): string
171176
if ($isEnum) {
172177
$cond .= $isReserved ? " and attribute(_context, '{$attr}') in {$attr}_choices" : " and {$attr} in {$attr}_choices";
173178
}
174-
$twig .= "\n {% if {$cond} %}{$attr}=\"{{ {$val} }}\"{% endif %}";
179+
// Convert property name to kebab-case for HTML attribute name
180+
$htmlAttr = $this->camelToKebab($attr);
181+
$twig .= "\n {% if {$cond} %}{$htmlAttr}=\"{{ {$val} }}\"{% endif %}";
175182
}
176183
if ($isSelfClosing) {
177184
$twig .= "/>\n";

‎templates/twig/block/article.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block article %}
11+
{% set ariaBusy_choices = ['true', 'false'] %}
1112
{% set autocapitalize_choices = ['none', 'sentences', 'words', 'characters'] %}
1213
{% set contenteditable_choices = ['true', 'false', 'inherit'] %}
1314
{% set dir_choices = ['ltr', 'rtl', 'auto'] %}
1415
{% set inputmode_choices = ['none', 'text', 'decimal', 'numeric', 'email', 'tel', 'url', 'search'] %}
15-
{% set role_choices = ['alert', 'application', 'article', 'banner', 'button', 'checkbox', 'complementary', 'contentinfo', 'dialog', 'form', 'grid', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'main', 'menu', 'menubar', 'menuitem', 'navigation', 'none', 'presentation', 'radio', 'region', 'search', 'status', 'tab', 'tablist', 'tabpanel', 'textbox', 'toolbar', 'tooltip'] %}
1616
{% set spellcheck_choices = ['true', 'false'] %}
1717
{% set translate_choices = ['yes', 'no'] %}
1818
<article
1919
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
20+
{% if ariaBusy is defined and ariaBusy|length > 0 and ariaBusy in ariaBusy_choices %}aria-busy="{{ ariaBusy }}"{% endif %}
2021
{% if autocapitalize is defined and autocapitalize|length > 0 and autocapitalize in autocapitalize_choices %}autocapitalize="{{ autocapitalize }}"{% endif %}
2122
{% if autofocus is defined and autofocus|length > 0 %}autofocus="{{ autofocus }}"{% endif %}
2223
{% if class is defined and class|length > 0 %}class="{{ class }}"{% endif %}
@@ -27,7 +28,6 @@
2728
{% if id is defined and id|length > 0 %}id="{{ id }}"{% endif %}
2829
{% if inputmode is defined and inputmode|length > 0 and inputmode in inputmode_choices %}inputmode="{{ inputmode }}"{% endif %}
2930
{% if lang is defined and lang|length > 0 %}lang="{{ lang }}"{% endif %}
30-
{% if role is defined and role|length > 0 and role in role_choices %}role="{{ role }}"{% endif %}
3131
{% if spellcheck is defined and spellcheck|length > 0 and spellcheck in spellcheck_choices %}spellcheck="{{ spellcheck }}"{% endif %}
3232
{% if style is defined and style|length > 0 %}style="{{ style }}"{% endif %}
3333
{% if tabindex is defined and tabindex|length > 0 %}tabindex="{{ tabindex }}"{% endif %}

‎templates/twig/block/aside.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block aside %}
11+
{% set ariaLabel_choices = ['breadcrumb'] %}
1112
{% set autocapitalize_choices = ['none', 'sentences', 'words', 'characters'] %}
1213
{% set contenteditable_choices = ['true', 'false', 'inherit'] %}
1314
{% set dir_choices = ['ltr', 'rtl', 'auto'] %}
1415
{% set inputmode_choices = ['none', 'text', 'decimal', 'numeric', 'email', 'tel', 'url', 'search'] %}
15-
{% set role_choices = ['alert', 'application', 'article', 'banner', 'button', 'checkbox', 'complementary', 'contentinfo', 'dialog', 'form', 'grid', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'main', 'menu', 'menubar', 'menuitem', 'navigation', 'none', 'presentation', 'radio', 'region', 'search', 'status', 'tab', 'tablist', 'tabpanel', 'textbox', 'toolbar', 'tooltip'] %}
1616
{% set spellcheck_choices = ['true', 'false'] %}
1717
{% set translate_choices = ['yes', 'no'] %}
1818
<aside
1919
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
20+
{% if ariaLabel is defined and ariaLabel|length > 0 and ariaLabel in ariaLabel_choices %}aria-label="{{ ariaLabel }}"{% endif %}
2021
{% if autocapitalize is defined and autocapitalize|length > 0 and autocapitalize in autocapitalize_choices %}autocapitalize="{{ autocapitalize }}"{% endif %}
2122
{% if autofocus is defined and autofocus|length > 0 %}autofocus="{{ autofocus }}"{% endif %}
2223
{% if class is defined and class|length > 0 %}class="{{ class }}"{% endif %}
@@ -27,7 +28,6 @@
2728
{% if id is defined and id|length > 0 %}id="{{ id }}"{% endif %}
2829
{% if inputmode is defined and inputmode|length > 0 and inputmode in inputmode_choices %}inputmode="{{ inputmode }}"{% endif %}
2930
{% if lang is defined and lang|length > 0 %}lang="{{ lang }}"{% endif %}
30-
{% if role is defined and role|length > 0 and role in role_choices %}role="{{ role }}"{% endif %}
3131
{% if spellcheck is defined and spellcheck|length > 0 and spellcheck in spellcheck_choices %}spellcheck="{{ spellcheck }}"{% endif %}
3232
{% if style is defined and style|length > 0 %}style="{{ style }}"{% endif %}
3333
{% if tabindex is defined and tabindex|length > 0 %}tabindex="{{ tabindex }}"{% endif %}

‎templates/twig/block/audio.twig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,17 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block audio %}
11+
{% set ariaBusy_choices = ['true', 'false'] %}
1112
{% set crossorigin_choices = ['anonymous', 'use-credentials'] %}
1213
{% set preload_choices = ['auto', 'metadata', 'none'] %}
1314
{% set role_choices = ['alert', 'application', 'article', 'banner', 'button', 'checkbox', 'complementary', 'contentinfo', 'dialog', 'form', 'grid', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'main', 'menu', 'menubar', 'menuitem', 'navigation', 'none', 'presentation', 'radio', 'region', 'search', 'status', 'tab', 'tablist', 'tabpanel', 'textbox', 'toolbar', 'tooltip'] %}
1415
{% set translate_choices = ['yes', 'no'] %}
1516
<audio
1617
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
18+
{% if ariaBusy is defined and ariaBusy|length > 0 and ariaBusy in ariaBusy_choices %}aria-busy="{{ ariaBusy }}"{% endif %}
19+
{% if ariaControls is defined and ariaControls|length > 0 %}aria-controls="{{ ariaControls }}"{% endif %}
20+
{% if ariaDescribedby is defined and ariaDescribedby|length > 0 %}aria-describedby="{{ ariaDescribedby }}"{% endif %}
21+
{% if ariaLabelledby is defined and ariaLabelledby|length > 0 %}aria-labelledby="{{ ariaLabelledby }}"{% endif %}
1722
{% if autoplay is defined and autoplay|length > 0 %}autoplay="{{ autoplay }}"{% endif %}
1823
{% if class is defined and class|length > 0 %}class="{{ class }}"{% endif %}
1924
{% if controls is defined and controls|length > 0 %}controls="{{ controls }}"{% endif %}

‎templates/twig/block/blockquote.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block blockquote %}
11+
{% set ariaBusy_choices = ['true', 'false'] %}
12+
{% set ariaHidden_choices = ['false', 'true'] %}
1113
{% set autocapitalize_choices = ['none', 'sentences', 'words', 'characters'] %}
1214
{% set contenteditable_choices = ['true', 'false', 'inherit'] %}
1315
{% set dir_choices = ['ltr', 'rtl', 'auto'] %}
@@ -17,6 +19,11 @@
1719
{% set translate_choices = ['yes', 'no'] %}
1820
<blockquote
1921
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
22+
{% if ariaBusy is defined and ariaBusy|length > 0 and ariaBusy in ariaBusy_choices %}aria-busy="{{ ariaBusy }}"{% endif %}
23+
{% if ariaControls is defined and ariaControls|length > 0 %}aria-controls="{{ ariaControls }}"{% endif %}
24+
{% if ariaDescribedby is defined and ariaDescribedby|length > 0 %}aria-describedby="{{ ariaDescribedby }}"{% endif %}
25+
{% if ariaHidden is defined and ariaHidden|length > 0 and ariaHidden in ariaHidden_choices %}aria-hidden="{{ ariaHidden }}"{% endif %}
26+
{% if ariaLabelledby is defined and ariaLabelledby|length > 0 %}aria-labelledby="{{ ariaLabelledby }}"{% endif %}
2027
{% if autocapitalize is defined and autocapitalize|length > 0 and autocapitalize in autocapitalize_choices %}autocapitalize="{{ autocapitalize }}"{% endif %}
2128
{% if autofocus is defined and autofocus|length > 0 %}autofocus="{{ autofocus }}"{% endif %}
2229
{% if cite is defined and cite|length > 0 %}cite="{{ cite }}"{% endif %}

‎templates/twig/block/canvas.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block canvas %}
11+
{% set ariaBusy_choices = ['true', 'false'] %}
12+
{% set ariaHidden_choices = ['false', 'true'] %}
1113
{% set autocapitalize_choices = ['none', 'sentences', 'words', 'characters'] %}
1214
{% set contenteditable_choices = ['true', 'false', 'inherit'] %}
1315
{% set dir_choices = ['ltr', 'rtl', 'auto'] %}
@@ -17,6 +19,11 @@
1719
{% set translate_choices = ['yes', 'no'] %}
1820
<canvas
1921
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
22+
{% if ariaBusy is defined and ariaBusy|length > 0 and ariaBusy in ariaBusy_choices %}aria-busy="{{ ariaBusy }}"{% endif %}
23+
{% if ariaControls is defined and ariaControls|length > 0 %}aria-controls="{{ ariaControls }}"{% endif %}
24+
{% if ariaDescribedby is defined and ariaDescribedby|length > 0 %}aria-describedby="{{ ariaDescribedby }}"{% endif %}
25+
{% if ariaHidden is defined and ariaHidden|length > 0 and ariaHidden in ariaHidden_choices %}aria-hidden="{{ ariaHidden }}"{% endif %}
26+
{% if ariaLabelledby is defined and ariaLabelledby|length > 0 %}aria-labelledby="{{ ariaLabelledby }}"{% endif %}
2027
{% if autocapitalize is defined and autocapitalize|length > 0 and autocapitalize in autocapitalize_choices %}autocapitalize="{{ autocapitalize }}"{% endif %}
2128
{% if autofocus is defined and autofocus|length > 0 %}autofocus="{{ autofocus }}"{% endif %}
2229
{% if class is defined and class|length > 0 %}class="{{ class }}"{% endif %}

‎templates/twig/block/caption.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block caption %}
11+
{% set ariaHidden_choices = ['false', 'true'] %}
1112
{% set autocapitalize_choices = ['none', 'sentences', 'words', 'characters'] %}
1213
{% set contenteditable_choices = ['true', 'false', 'inherit'] %}
1314
{% set dir_choices = ['ltr', 'rtl', 'auto'] %}
1415
{% set inputmode_choices = ['none', 'text', 'decimal', 'numeric', 'email', 'tel', 'url', 'search'] %}
15-
{% set role_choices = ['alert', 'application', 'article', 'banner', 'button', 'checkbox', 'complementary', 'contentinfo', 'dialog', 'form', 'grid', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'main', 'menu', 'menubar', 'menuitem', 'navigation', 'none', 'presentation', 'radio', 'region', 'search', 'status', 'tab', 'tablist', 'tabpanel', 'textbox', 'toolbar', 'tooltip'] %}
1616
{% set spellcheck_choices = ['true', 'false'] %}
1717
{% set translate_choices = ['yes', 'no'] %}
1818
<caption
1919
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
20+
{% if ariaHidden is defined and ariaHidden|length > 0 and ariaHidden in ariaHidden_choices %}aria-hidden="{{ ariaHidden }}"{% endif %}
2021
{% if autocapitalize is defined and autocapitalize|length > 0 and autocapitalize in autocapitalize_choices %}autocapitalize="{{ autocapitalize }}"{% endif %}
2122
{% if autofocus is defined and autofocus|length > 0 %}autofocus="{{ autofocus }}"{% endif %}
2223
{% if class is defined and class|length > 0 %}class="{{ class }}"{% endif %}
@@ -27,7 +28,6 @@
2728
{% if id is defined and id|length > 0 %}id="{{ id }}"{% endif %}
2829
{% if inputmode is defined and inputmode|length > 0 and inputmode in inputmode_choices %}inputmode="{{ inputmode }}"{% endif %}
2930
{% if lang is defined and lang|length > 0 %}lang="{{ lang }}"{% endif %}
30-
{% if role is defined and role|length > 0 and role in role_choices %}role="{{ role }}"{% endif %}
3131
{% if spellcheck is defined and spellcheck|length > 0 and spellcheck in spellcheck_choices %}spellcheck="{{ spellcheck }}"{% endif %}
3232
{% if style is defined and style|length > 0 %}style="{{ style }}"{% endif %}
3333
{% if tabindex is defined and tabindex|length > 0 %}tabindex="{{ tabindex }}"{% endif %}

‎templates/twig/block/datalist.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block datalist %}
11+
{% set ariaHidden_choices = ['false', 'true'] %}
1112
{% set autocapitalize_choices = ['none', 'sentences', 'words', 'characters'] %}
1213
{% set contenteditable_choices = ['true', 'false', 'inherit'] %}
1314
{% set dir_choices = ['ltr', 'rtl', 'auto'] %}
1415
{% set inputmode_choices = ['none', 'text', 'decimal', 'numeric', 'email', 'tel', 'url', 'search'] %}
15-
{% set role_choices = ['alert', 'application', 'article', 'banner', 'button', 'checkbox', 'complementary', 'contentinfo', 'dialog', 'form', 'grid', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'main', 'menu', 'menubar', 'menuitem', 'navigation', 'none', 'presentation', 'radio', 'region', 'search', 'status', 'tab', 'tablist', 'tabpanel', 'textbox', 'toolbar', 'tooltip'] %}
1616
{% set spellcheck_choices = ['true', 'false'] %}
1717
{% set translate_choices = ['yes', 'no'] %}
1818
<datalist
1919
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
20+
{% if ariaHidden is defined and ariaHidden|length > 0 and ariaHidden in ariaHidden_choices %}aria-hidden="{{ ariaHidden }}"{% endif %}
2021
{% if autocapitalize is defined and autocapitalize|length > 0 and autocapitalize in autocapitalize_choices %}autocapitalize="{{ autocapitalize }}"{% endif %}
2122
{% if autofocus is defined and autofocus|length > 0 %}autofocus="{{ autofocus }}"{% endif %}
2223
{% if class is defined and class|length > 0 %}class="{{ class }}"{% endif %}
@@ -27,7 +28,6 @@
2728
{% if id is defined and id|length > 0 %}id="{{ id }}"{% endif %}
2829
{% if inputmode is defined and inputmode|length > 0 and inputmode in inputmode_choices %}inputmode="{{ inputmode }}"{% endif %}
2930
{% if lang is defined and lang|length > 0 %}lang="{{ lang }}"{% endif %}
30-
{% if role is defined and role|length > 0 and role in role_choices %}role="{{ role }}"{% endif %}
3131
{% if spellcheck is defined and spellcheck|length > 0 and spellcheck in spellcheck_choices %}spellcheck="{{ spellcheck }}"{% endif %}
3232
{% if style is defined and style|length > 0 %}style="{{ style }}"{% endif %}
3333
{% if tabindex is defined and tabindex|length > 0 %}tabindex="{{ tabindex }}"{% endif %}

‎templates/twig/block/dd.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block dd %}
11+
{% set ariaHidden_choices = ['false', 'true'] %}
1112
{% set autocapitalize_choices = ['none', 'sentences', 'words', 'characters'] %}
1213
{% set contenteditable_choices = ['true', 'false', 'inherit'] %}
1314
{% set dir_choices = ['ltr', 'rtl', 'auto'] %}
1415
{% set inputmode_choices = ['none', 'text', 'decimal', 'numeric', 'email', 'tel', 'url', 'search'] %}
15-
{% set role_choices = ['alert', 'application', 'article', 'banner', 'button', 'checkbox', 'complementary', 'contentinfo', 'dialog', 'form', 'grid', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'main', 'menu', 'menubar', 'menuitem', 'navigation', 'none', 'presentation', 'radio', 'region', 'search', 'status', 'tab', 'tablist', 'tabpanel', 'textbox', 'toolbar', 'tooltip'] %}
1616
{% set spellcheck_choices = ['true', 'false'] %}
1717
{% set translate_choices = ['yes', 'no'] %}
1818
<dd
1919
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
20+
{% if ariaHidden is defined and ariaHidden|length > 0 and ariaHidden in ariaHidden_choices %}aria-hidden="{{ ariaHidden }}"{% endif %}
2021
{% if autocapitalize is defined and autocapitalize|length > 0 and autocapitalize in autocapitalize_choices %}autocapitalize="{{ autocapitalize }}"{% endif %}
2122
{% if autofocus is defined and autofocus|length > 0 %}autofocus="{{ autofocus }}"{% endif %}
2223
{% if class is defined and class|length > 0 %}class="{{ class }}"{% endif %}
@@ -27,7 +28,6 @@
2728
{% if id is defined and id|length > 0 %}id="{{ id }}"{% endif %}
2829
{% if inputmode is defined and inputmode|length > 0 and inputmode in inputmode_choices %}inputmode="{{ inputmode }}"{% endif %}
2930
{% if lang is defined and lang|length > 0 %}lang="{{ lang }}"{% endif %}
30-
{% if role is defined and role|length > 0 and role in role_choices %}role="{{ role }}"{% endif %}
3131
{% if spellcheck is defined and spellcheck|length > 0 and spellcheck in spellcheck_choices %}spellcheck="{{ spellcheck }}"{% endif %}
3232
{% if style is defined and style|length > 0 %}style="{{ style }}"{% endif %}
3333
{% if tabindex is defined and tabindex|length > 0 %}tabindex="{{ tabindex }}"{% endif %}

‎templates/twig/block/del.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
@see src/TemplateGenerator/TwigGenerator.php
99
#}
1010
{% block del %}
11+
{% set ariaBusy_choices = ['true', 'false'] %}
12+
{% set ariaHidden_choices = ['false', 'true'] %}
1113
{% set autocapitalize_choices = ['none', 'sentences', 'words', 'characters'] %}
1214
{% set contenteditable_choices = ['true', 'false', 'inherit'] %}
1315
{% set dir_choices = ['ltr', 'rtl', 'auto'] %}
@@ -17,6 +19,11 @@
1719
{% set translate_choices = ['yes', 'no'] %}
1820
<del
1921
{% if accesskey is defined and accesskey|length > 0 %}accesskey="{{ accesskey }}"{% endif %}
22+
{% if ariaBusy is defined and ariaBusy|length > 0 and ariaBusy in ariaBusy_choices %}aria-busy="{{ ariaBusy }}"{% endif %}
23+
{% if ariaControls is defined and ariaControls|length > 0 %}aria-controls="{{ ariaControls }}"{% endif %}
24+
{% if ariaDescribedby is defined and ariaDescribedby|length > 0 %}aria-describedby="{{ ariaDescribedby }}"{% endif %}
25+
{% if ariaHidden is defined and ariaHidden|length > 0 and ariaHidden in ariaHidden_choices %}aria-hidden="{{ ariaHidden }}"{% endif %}
26+
{% if ariaLabelledby is defined and ariaLabelledby|length > 0 %}aria-labelledby="{{ ariaLabelledby }}"{% endif %}
2027
{% if autocapitalize is defined and autocapitalize|length > 0 and autocapitalize in autocapitalize_choices %}autocapitalize="{{ autocapitalize }}"{% endif %}
2128
{% if autofocus is defined and autofocus|length > 0 %}autofocus="{{ autofocus }}"{% endif %}
2229
{% if cite is defined and cite|length > 0 %}cite="{{ cite }}"{% endif %}

0 commit comments

Comments
 (0)