general: improve accessibility

SMillerDev · May 31, 2022 · 4302401 · 4302401
1 parent 0e87263
commit 4302401
Show file tree

Hide file tree

Showing 8 changed files with 659 additions and 555 deletions.
diff --git a/src/PHPDraft/Out/HTML/default/structure.twig b/src/PHPDraft/Out/HTML/default/structure.twig
@@ -14,6 +14,7 @@
             {% if structure.value is iterable %}
                 {% if structure is object_type %}
                     <table class="table table-striped mdl-data-table mdl-js-data-table">
+                        <caption>Object: {{ name }}</caption>
                         {% for value in structure.value %}
                             {{ value|raw }}
                         {% endfor %}

diff --git a/src/PHPDraft/Out/HTML/default/transition.twig b/src/PHPDraft/Out/HTML/default/transition.twig
@@ -72,13 +72,14 @@
                             <h5>URI Parameters</h5>
                             <div class="row">
                                 <table class="table table-striped mdl-data-table mdl-js-data-table ">
+                                    <caption>URI Parameter values</caption>
                                     <thead>
                                     <tr>
-                                        <td>key</td>
-                                        <td>type</td>
-                                        <td>status</td>
-                                        <td>description</td>
-                                        <td>value</td>
+                                        <th>key</th>
+                                        <th>type</th>
+                                        <th>status</th>
+                                        <th>description</th>
+                                        <th>value</th>
                                     </tr>
                                     </thead>
                                     <tbody>
@@ -130,6 +131,7 @@
                 <h5>Data Structure</h5>
                 <div class="row">
                     <table class="table table-striped mdl-data-table mdl-js-data-table">
+                        <caption>Transaction data structure</caption>
                     {% for value in response.structure %}{{ value|raw }}{% endfor %}
                     </table>
                 </div>

diff --git a/src/PHPDraft/Out/HTML/material/nav.twig b/src/PHPDraft/Out/HTML/material/nav.twig
@@ -5,7 +5,7 @@
                 <li class="collection-header"> <a href="#{{ category.get_href }}">{{ category.title }}</a></li>
                 {% for resource in category.children %}
                     <li class="collection-item resource" aria-label="Resource {{category.title}}/{{resource.title}}">
-                        <b><a class="nav-link" href="#{{ resource.get_href|replace({'-': '/'}) }}">{{resource.title}}</a></b>
+                        <strong><a class="nav-link" href="#{{ resource.get_href|replace({'-': '/'}) }}">{{resource.title}}</a></strong>
                         {% for transition in resource.children %}
                             <a class="nav-link" href="#{{ transition.get_href|replace({'-': '/'}) }}"
                                aria-label="Transition {{category.title}}/{{resource.title}}/{{ transition.title }}">

diff --git a/src/PHPDraft/Out/HTML/material/transition.twig b/src/PHPDraft/Out/HTML/material/transition.twig
@@ -72,13 +72,14 @@
                                 <h5>URI Parameters</h5>
                                 <div>
                                     <table class="table table-striped mdl-data-table mdl-js-data-table ">
+                                        <caption>URI Parameter overview</caption>
                                         <thead>
                                         <tr>
-                                            <td>key</td>
-                                            <td>type</td>
-                                            <td>status</td>
-                                            <td>description</td>
-                                            <td>value</td>
+                                            <th>key</th>
+                                            <th>type</th>
+                                            <th>status</th>
+                                            <th>description</th>
+                                            <th>value</th>
                                         </tr>
                                         </thead>
                                         <tbody>

diff --git a/tests/statics/drafter/html/basic.html b/tests/statics/drafter/html/basic.html
diff --git a/tests/statics/drafter/html/basic_old.html b/tests/statics/drafter/html/basic_old.html
diff --git a/tests/statics/drafter/html/material.html b/tests/statics/drafter/html/material.html
diff --git a/tests/statics/drafter/html/material_old.html b/tests/statics/drafter/html/material_old.html