a11y(mobile menu): make close button text more descriptive (#1791)

* a11y(mobile menu): make close button text more descriptive; fix HTML validation issues

* fix(tests): fix unrelated tests that depend on knowing the number of `p` tags on the page 🙀

* chore: formatting

---------

Co-authored-by: William B <[email protected]>
Co-authored-by: Jumana B <[email protected]>

app/templates/partials/nav/account_menu_mobile.html

@@ -42,9 +42,10 @@
               src="{{ asset_url('images/close.svg') }}"
               class="object-none object-center w-8 h-8 m-auto"
               alt="" />
-            <div id="account.menu.close">
+            <span id="account.menu.close">
               {{ _('close') }}
-            </div>
+            </span>
+            <span class="sr-only"> {{ _('navigation')}}</span>
           </button>
         </div>
       </div>

app/templates/partials/nav/gc_header_nav_mobile.html

@@ -24,7 +24,7 @@
             alt=""
             src="{{ asset_url('images/close.svg') }}"
             class="object-none object-center w-8 h-8 m-auto"/>
-          <p>{{ _('close') }}</p>
+          <span>{{ _('close') }}</span><span class="sr-only"> {{ _('navigation')}}</span>
         </button>
       </div>
     </div>

app/translations/csv/fr.csv

@@ -1849,3 +1849,4 @@
 "Select a file","Sélectionner un fichier"
 "There's a custom logo at the top left and no logo at the bottom.","Un logo personnalisé apparaît en haut à gauche et aucun logo n’apparaît en bas."
 "Email preview","Aperçu du courriel"
+"navigation","la navigation"

tests/app/main/views/test_manage_users.py

@@ -287,8 +287,7 @@ def test_should_show_you_should_have_at_least_two_members_when_only_one_present_
     mock_get_security_keys,
 ):
     page = client_request.get("main.manage_users", service_id=service_one["id"])
-    assert len(page.find_all("p")) == 2
-    assert page.find_all("p")[1].text.strip() == "You should have at least two team members who can manage settings."
+    assert "You should have at least two team members who can manage settings." in page.text
 
 
 def test_does_not_show_you_should_have_at_least_two_members_only_when_two_members_present(
@@ -310,8 +309,8 @@ def test_does_not_show_you_should_have_at_least_two_members_only_when_two_member
     mocker.patch("app.user_api_client.get_user", return_value=current_user)
     mocker.patch("app.models.user.Users.client", return_value=[current_user, other_user])
     page = client_request.get("main.manage_users", service_id=service_one["id"])
-    assert len(page.find_all("p")) == 1
-    assert page.find_all("p")[0].text.strip() != "You should have at least two team members who can manage settings."
+
+    assert "You should have at least two team members who can manage settings." not in page.text
 
 
 def test_does_not_show_you_should_have_at_least_two_members_when_user_does_not_have_permissions(
@@ -330,8 +329,8 @@ def test_does_not_show_you_should_have_at_least_two_members_when_user_does_not_h
 
     client_request.login(current_user)
     page = client_request.get("main.manage_users", service_id=service_one["id"])
-    assert len(page.find_all("p")) == 1
-    assert page.find_all("p")[0].text.strip() != "You should have at least two team members who can manage settings."
+
+    assert "You should have at least two team members who can manage settings." not in page.text
 
 
 @pytest.mark.parametrize(

tests/app/main/views/test_verify.py

@@ -25,8 +25,7 @@ def test_should_return_verify_template(
 
     page = BeautifulSoup(response.data.decode("utf-8"), "html.parser")
     assert page.h1.text == "Check your phone messages"
-    message = page.find_all("p")[1].text
-    assert message == "We’ve sent you a text message with a security code."
+    assert "We’ve sent you a text message with a security code." in page.text
 
 
 def test_should_redirect_to_welcome_screen_when_two_factor_code_is_correct(