A11y minor issues fix (#20)

* Attaching modal close button to modal title

* Fix minor accessibility issues

* Fix accessibility detail

* Fix sr-only links with the proper class from the dsfr (fr-sr-only)

dsfr/templates/dsfr/link.html

@@ -3,5 +3,5 @@
   href="{{ self.url }}"
   {% if self.is_external %} target="_blank" rel="noopener noreferrer"{% endif %}
 >
-  {{ self.label }}{% if self.is_external %} <span class="sr-only">Ouvre une nouvelle fenêtre</span>{% endif %}
+  {{ self.label }}{% if self.is_external %} <span class="fr-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 }} <span class="sr-only">Ouvre une nouvelle fenêtre</span></a></li>
+              <li><a target="_blank" rel="noopener noreferrer" href="{{ detail.link }}">{{ detail.text }} <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span></a></li>
             {% else %}
               <li>{{ detail.text }}</li>
             {% endif %}

dsfr/test/test_templatetags.py

@@ -451,7 +451,7 @@ def test_link_tag_rendered(self):
             href="http://example.com"
             target="_blank" rel="noopener noreferrer"
             >
-            Label of the link item <span class="sr-only">Ouvre une nouvelle fenêtre</span>
+              Label of the link item <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span>
             </a>
             """,
             rendered_template,
@@ -491,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 <span class="sr-only">Ouvre une nouvelle fenêtre</span></a></li>
+                    <li><a target="_blank" rel="noopener noreferrer" href="https://template.incubateur.net/">Detail avec lien <span class="fr-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 }} <span class="sr-only">Ouvre une nouvelle fenêtre</span></a>
+            <a href="{{ data.doc_url }}" target="_blank" rel="noopener">{{ data.title }} <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span></a>
           </li>
         {% endfor %}
       </ul>

pyproject.toml

@@ -3,8 +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.1"
-
+version = "0.9.2"
 classifiers = [
   "Development Status :: 3 - Alpha",
   "Environment :: Web Environment",