Minor accessibility improvements (#19)

* Attaching modal close button to modal title

* Fix minor accessibility issues

* Fix accessibility detail

dsfr/templates/dsfr/footer.html

@@ -50,7 +50,10 @@
       </ul>
       <div class="fr-footer__bottom-copy">
         <p>
-          Sauf mention contraire, tous les textes de ce site sont sous <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank" rel="noopener noreferrer">licence etalab-2.0</a>
+          Sauf mention contraire, tous les textes de ce site sont sous
+          <a href="https://github.com/etalab/licence-ouverte/blob/master/LO.md" target="_blank" rel="noopener noreferrer" title="Licence etalab-2.0 - Ouvrir dans une nouvelle fenêtre">
+            licence etalab-2.0
+          </a>
         </p>
       </div>
     </div>

dsfr/templates/dsfr/link.html

@@ -3,5 +3,5 @@
   href="{{ self.url }}"
   {% if self.is_external %} target="_blank" rel="noopener noreferrer"{% endif %}
 >
-  {{ self.label }}
+  {{ self.label }}{% if self.is_external %} <span class="sr-only">Ouvre une nouvelle fenêtre</span>{% endif %}
 </a>

dsfr/templates/dsfr/quote.html

@@ -10,7 +10,7 @@
           </li>
           {% for detail in self.details %}
             {% if detail.link %}
-              <li><a target="_blank" rel="noopener noreferrer" href="{{ detail.link }}">{{ detail.text }}</a></li>
+              <li><a target="_blank" rel="noopener noreferrer" href="{{ detail.link }}">{{ detail.text }} <span class="sr-only">Ouvre une nouvelle fenêtre</span></a></li>
             {% else %}
               <li>{{ detail.text }}</li>
             {% endif %}

dsfr/templates/dsfr/theme_modale.html

@@ -5,7 +5,7 @@
       <div class="fr-col-12 fr-col-md-6 fr-col-lg-4">
         <div class="fr-modal__body">
           <div class="fr-modal__header">
-            <button class="fr-btn--close fr-btn" aria-controls="fr-theme-modal">Fermer</button>
+            <button class="fr-btn--close fr-btn" aria-describedby="fr-theme-modal-title" aria-controls="fr-theme-modal">Fermer</button>
           </div>
           <div class="fr-modal__content">
             <h1 id="fr-theme-modal-title" class="fr-modal__title">

dsfr/test/test_templatetags.py

@@ -168,7 +168,6 @@ class DsfrBadgeTagTest(SimpleTestCase):
 
     def test_badge_tag_rendered(self):
         rendered_template = self.template_to_render.render(self.context)
-        print(rendered_template)
         self.assertInHTML(
             """
             <p class="fr-badge fr-badge--success">badge label</p>
@@ -452,7 +451,7 @@ def test_link_tag_rendered(self):
             href="http://example.com"
             target="_blank" rel="noopener noreferrer"
             >
-            Label of the link item
+            Label of the link item <span class="sr-only">Ouvre une nouvelle fenêtre</span>
             </a>
             """,
             rendered_template,
@@ -492,7 +491,7 @@ def test_quote_tag_rendered(self):
                         <cite>Système de Design de l&#x27;État</cite>
                     </li>
                     <li>Detail sans lien</li>
-                    <li><a target="_blank" rel="noopener noreferrer" href="https://template.incubateur.net/">Detail avec lien</a></li>
+                    <li><a target="_blank" rel="noopener noreferrer" href="https://template.incubateur.net/">Detail avec lien <span class="sr-only">Ouvre une nouvelle fenêtre</span></a></li>
                     </ul>
                     <div class="fr-quote__image">
                     <img src="https://via.placeholder.com/150x150" class="fr-responsive-img" alt="" />

example_app/templates/example_app/tags_index.html

@@ -34,7 +34,7 @@ <h2>Composants encore non implémentés</h2>
       <ul>
         {% for tag, data in not_yet.items %}
           <li class="fr-mb-1w">
-            <a href="{{ data.doc_url }}" target="_blank" rel="noopener">{{ data.title }}</a>
+            <a href="{{ data.doc_url }}" target="_blank" rel="noopener">{{ data.title }} <span class="sr-only">Ouvre une nouvelle fenêtre</span></a>
           </li>
         {% endfor %}
       </ul>

pyproject.toml

@@ -3,7 +3,7 @@ authors = ["Sylvain Boissel <[email protected]>"]
 description = "Integrate the French government Design System into a Django app"
 license = "MIT"
 name = "django-dsfr"
-version = "0.9.0"
+version = "0.9.1"
 
 classifiers = [
   "Development Status :: 3 - Alpha",