Fix acessibilidade (#140)

* elemento <a> com ausência de texto descritivo. ajuste dos links vazios acontent, anavigation e afooter para atender os critérios de acessibilidade * descrição das alterações no arquivo CHANGES.rst * Correções apontadas na revisão de código * Code review PR #140. * Code review
plonegovbr · Oct 5, 2017 · 86eb8f9 · 86eb8f9
1 parent bfe1692
commit 86eb8f9
Show file tree

Hide file tree

Showing 14 changed files with 125 additions and 13 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -4,7 +4,11 @@ Histórico de Alterações
 1.2.2 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
-- Nothing changed yet.
+- Adiciona CSS para ocultar os links de id acontent, afooter e anavigation.
+  [idgserpro]
+
+- Adiciona regra Diazo para obter a tradução dos links de id acontent, afooter e anavigation que são gerados via viewlet em brasil.gov.portal.
+  [idgserpro]
 
 
 1.2.1 (2017-07-05)

diff --git a/src/brasil/gov/temas/tests/test_acessibilidade.py b/src/brasil/gov/temas/tests/test_acessibilidade.py
@@ -0,0 +1,69 @@
+# -*- coding: utf-8 -*-
+from brasil.gov.temas.testing import FUNCTIONAL_TESTING
+from plone.app.theming.interfaces import IThemeSettings
+from plone.app.theming.utils import applyTheme
+from plone.app.theming.utils import getTheme
+from plone.registry.interfaces import IRegistry
+from plone.testing.z2 import Browser
+from zope.component import getUtility
+
+import Globals
+import transaction
+import unittest
+
+
+class LinksAcessibilidadeTestCase(unittest.TestCase):
+
+    layer = FUNCTIONAL_TESTING
+
+    def setUp(self):
+        Globals.DevelopmentMode = True
+        self.portal = self.layer['portal']
+        self.settings = getUtility(IRegistry).forInterface(IThemeSettings)
+        self.browser = Browser(self.layer['app'])
+        transaction.commit()
+
+    def base_test(self, cor):
+        """Teste base dos temas."""
+        theme = getTheme(cor)
+        applyTheme(theme)
+        self.settings.enabled = True
+        transaction.commit()
+
+        self.browser.open(self.portal.absolute_url())
+
+        # Testa se a âncora para o conteúdo aparece.
+        self.assertIn(
+            '<a name="acontent" id="acontent" class="anchor">',
+            self.browser.contents,
+        )
+
+        # Testa se a âncora para o menu aparece.
+        self.assertIn(
+            '<a name="anavigation" id="anavigation" class="anchor">',
+            self.browser.contents,
+        )
+
+        # Testa se o input para a busca aparece.
+        self.assertIn(
+            'name="SearchableText"',
+            self.browser.contents,
+        )
+
+        # Testa se a âncora para o rodapé aparece.
+        self.assertIn(
+            '<a name="afooter" id="afooter" class="anchor">',
+            self.browser.contents,
+        )
+
+    def test_link_para_conteudo_tema_amarelo(self):
+        self.base_test('amarelo')
+
+    def test_link_para_conteudo_tema_azul(self):
+        self.base_test('azul')
+
+    def test_link_para_conteudo_tema_branco(self):
+        self.base_test('branco')
+
+    def test_link_para_conteudo_tema_verde(self):
+        self.base_test('verde')
diff --git a/src/brasil/gov/temas/themes/amarelo/css/style.css b/src/brasil/gov/temas/themes/amarelo/css/style.css
@@ -74,6 +74,13 @@ div#wrapper-barra-brasil {
     color: #fff;
 }
 
+.anchor {    
+    display: block;
+    font-size: 0;
+    height: 0;
+    width: 0;
+}
+
 /* Titulo do portal
    ========================================================================== */
 

diff --git a/src/brasil/gov/temas/themes/amarelo/index.html b/src/brasil/gov/temas/themes/amarelo/index.html
@@ -166,7 +166,7 @@
 
             <!-- Column 1 -->
             <div id="navigation">
-                <a name="anavigation" id="anavigation"></a>
+                <a name="anavigation" id="anavigation" class="anchor">menu</a>
                 <span class="menuTrigger">Menu</span>
                 <div id="portal-column-one" class="cell width-1:4 position-0">
 
@@ -302,7 +302,7 @@
 
             <!-- Conteudo -->
             <div id="portal-column-content" class="cell width-1:2 position-1:4">
-                <a name="acontent" id="acontent"></a>
+                <a name="acontent" id="acontent" class="anchor">conteúdo</a>
 
                 <div id="main-content" class="">
 
@@ -423,7 +423,7 @@ <h3>Content subheading H3</h3>
 
 <!-- Footer -->
 <div id="footer" role="contentinfo">
-    <a name="afooter" id="afooter"></a>
+    <a name="afooter" id="afooter" class="anchor">rodapé</a>
 
     <div id="doormat">
         Menu do rodape

diff --git a/src/brasil/gov/temas/themes/amarelo/rules.xml b/src/brasil/gov/temas/themes/amarelo/rules.xml
@@ -71,6 +71,9 @@
         <replace css:theme="#voltar-topo" css:content="#voltar-topo" />
         <replace css:theme="#extra-footer" css:content="#extra-footer" />
         <replace css:theme="#accessibility" css:content="#accessibility" />
+        <replace css:theme="#acontent" css:content="#acontent" css:if-content="#acontent"/>
+        <replace css:theme="#anavigation" css:content="#anavigation" css:if-content="#anavigation"/>
+        <replace css:theme="#afooter" css:content="#afooter" css:if-content="#afooter"/>
         <drop css:content="#viewlet-below-content-body" />
         <replace css:theme="#barra_brasil_js" css:content-children="#barra_brasil_js" />
 

diff --git a/src/brasil/gov/temas/themes/azul/css/style.css b/src/brasil/gov/temas/themes/azul/css/style.css
@@ -49,6 +49,12 @@ div#wrapper-barra-brasil {
     top: 47px;
 }
 
+.anchor {
+    display: block;
+    font-size: 0;
+    height: 0;
+    width: 0;
+}
 
 /* Menu de Acessibilidade
    ========================================================================== */

diff --git a/src/brasil/gov/temas/themes/azul/index.html b/src/brasil/gov/temas/themes/azul/index.html
@@ -169,7 +169,7 @@
 
             <!-- Column 1 -->
             <div id="navigation">
-                <a name="anavigation" id="anavigation"></a>
+                <a name="anavigation" id="anavigation" class="anchor">menu</a>
                 <span class="menuTrigger">Menu</span>
                 <div id="portal-column-one" class="cell width-1:4 position-0">
 
@@ -305,7 +305,7 @@
 
             <!-- Conteudo -->
             <div id="portal-column-content" class="cell width-1:2 position-1:4">
-                <a name="acontent" id="acontent"></a>
+                <a name="acontent" id="acontent" class="anchor">conteúdo</a>
 
                 <div id="main-content" class="">
 
@@ -426,7 +426,7 @@ <h3>Content subheading H3</h3>
 
 <!-- Footer -->
 <div id="footer" role="contentinfo">
-    <a name="afooter" id="afooter"></a>
+    <a name="afooter" id="afooter" class="anchor">rodapé</a>
 
     <div id="doormat">
         Menu do rodape

diff --git a/src/brasil/gov/temas/themes/azul/rules.xml b/src/brasil/gov/temas/themes/azul/rules.xml
@@ -71,6 +71,9 @@
         <replace css:theme="#voltar-topo" css:content="#voltar-topo" />
         <replace css:theme="#extra-footer" css:content="#extra-footer" />
         <replace css:theme="#accessibility" css:content="#accessibility" />
+        <replace css:theme="#acontent" css:content="#acontent" css:if-content="#acontent"/>
+        <replace css:theme="#anavigation" css:content="#anavigation" css:if-content="#anavigation"/>
+        <replace css:theme="#afooter" css:content="#afooter" css:if-content="#afooter"/>
         <drop css:content="#viewlet-below-content-body" />
         <replace css:theme="#barra_brasil_js" css:content-children="#barra_brasil_js" />
 

diff --git a/src/brasil/gov/temas/themes/branco/css/style.css b/src/brasil/gov/temas/themes/branco/css/style.css
@@ -59,6 +59,13 @@ div#wrapper-barra-brasil {
     padding: 0 3px;
 }
 
+.anchor {
+    display: block;
+    font-size: 0;
+    height: 0;
+    width: 0;
+}
+
 /* Titulo do portal
    ========================================================================== */
 

diff --git a/src/brasil/gov/temas/themes/branco/index.html b/src/brasil/gov/temas/themes/branco/index.html
@@ -165,7 +165,7 @@
 
             <!-- Column 1 -->
             <div id="navigation">
-                <a name="anavigation" id="anavigation"></a>
+                <a name="anavigation" id="anavigation" class="anchor">menu</a>
                 <span class="menuTrigger">Menu</span>
                 <div id="portal-column-one" class="cell width-1:4 position-0">
 
@@ -301,7 +301,7 @@
 
             <!-- Conteudo -->
             <div id="portal-column-content" class="cell width-1:2 position-1:4">
-                <a name="acontent" id="acontent"></a>
+                <a name="acontent" id="acontent" class="anchor">conteúdo</a>
 
                 <div id="main-content" class="">
 
@@ -422,7 +422,7 @@ <h3>Content subheading H3</h3>
 
 <!-- Footer -->
 <div id="footer" role="contentinfo">
-    <a name="afooter" id="afooter"></a>
+    <a name="afooter" id="afooter" class="anchor">rodapé</a>
 
     <div id="doormat">
         Menu do rodape

diff --git a/src/brasil/gov/temas/themes/branco/rules.xml b/src/brasil/gov/temas/themes/branco/rules.xml
@@ -71,6 +71,9 @@
         <replace css:theme="#voltar-topo" css:content="#voltar-topo" />
         <replace css:theme="#extra-footer" css:content="#extra-footer" />
         <replace css:theme="#accessibility" css:content="#accessibility" />
+        <replace css:theme="#acontent" css:content="#acontent" css:if-content="#acontent"/>
+        <replace css:theme="#anavigation" css:content="#anavigation" css:if-content="#anavigation"/>
+        <replace css:theme="#afooter" css:content="#afooter" css:if-content="#afooter"/>
         <drop css:content="#viewlet-below-content-body" />
         <replace css:theme="#barra_brasil_js" css:content-children="#barra_brasil_js" />
 

diff --git a/src/brasil/gov/temas/themes/verde/css/style.css b/src/brasil/gov/temas/themes/verde/css/style.css
@@ -73,6 +73,13 @@ div#wrapper-barra-brasil {
     color: #006600;
 }
 
+.anchor {
+    display: block;
+    font-size: 0;
+    height: 0;
+    width: 0;
+}
+
 /* Titulo do portal
    ========================================================================== */
 

diff --git a/src/brasil/gov/temas/themes/verde/index.html b/src/brasil/gov/temas/themes/verde/index.html
@@ -165,7 +165,7 @@
 
             <!-- Column 1 -->
             <div id="navigation">
-                <a name="anavigation" id="anavigation"></a>
+                <a name="anavigation" id="anavigation" class="anchor">menu</a>
                 <span class="menuTrigger">Menu</span>
                 <div id="portal-column-one" class="cell width-1:4 position-0">
 
@@ -301,7 +301,7 @@
 
             <!-- Conteudo -->
             <div id="portal-column-content" class="cell width-1:2 position-1:4">
-                <a name="acontent" id="acontent"></a>
+                <a name="acontent" id="acontent" class="anchor">conteúdo</a>
 
                 <div id="main-content" class="">
 
@@ -422,7 +422,7 @@ <h3>Content subheading H3</h3>
 
 <!-- Footer -->
 <div id="footer" role="contentinfo">
-    <a name="afooter" id="afooter"></a>
+    <a name="afooter" id="afooter" class="anchor">rodapé</a>
 
     <div id="doormat">
         Menu do rodape

diff --git a/src/brasil/gov/temas/themes/verde/rules.xml b/src/brasil/gov/temas/themes/verde/rules.xml
@@ -71,6 +71,9 @@
         <replace css:theme="#voltar-topo" css:content="#voltar-topo" />
         <replace css:theme="#extra-footer" css:content="#extra-footer" />
         <replace css:theme="#accessibility" css:content="#accessibility" />
+        <replace css:theme="#acontent" css:content="#acontent" css:if-content="#acontent"/>
+        <replace css:theme="#anavigation" css:content="#anavigation" css:if-content="#anavigation"/>
+        <replace css:theme="#afooter" css:content="#afooter" css:if-content="#afooter"/>
         <drop css:content="#viewlet-below-content-body" />
         <replace css:theme="#barra_brasil_js" css:content-children="#barra_brasil_js" />