[página do artigo] Aprimora modal autoria e questões de acessibilidade (#989)

robertatakenaka · web-flow · commit 8172e78bf428 · 2025-06-24T19:43:42.000-03:00
* feat: melhora acessibilidade de imagens e tabelas

- Adiciona atributos alt vazios para imagens decorativas
- Implementa captions com classe sr-only para screen readers
- Melhora estrutura semântica de elementos visuais

* feat: redesenha modal de autores com layout em cards

- Implementa novo design com cards para cada autor
- Adiciona ícones Material Design para melhor UX
- Melhora apresentação de informações de contato e afiliações
- Adiciona CSS inline para estilização consistente

* refactor: melhora hierarquia semântica substituindo h3 por h2 com classe h5

- Atualiza títulos de seções em todos os templates XSL
- Melhora acessibilidade e SEO com estrutura de headings mais consistente

* feat: implementa configuração dinâmica de caminhos CSS

- Substitui URLs hardcoded por variável CSS_PATH
- Permite maior flexibilidade na configuração de recursos CSS

* test: atualiza fixtures para refletir mudanças estruturais do HTML

- Atualiza estrutura de headings nos arquivos de teste
- Corrige caminhos CSS nos fixtures
- Atualiza estrutura de modais e componentes
diff --git a/packtools/catalogs/htmlgenerator/v3.0/article-meta-abstract.xsl b/packtools/catalogs/htmlgenerator/v3.0/article-meta-abstract.xsl
@@ -67,7 +67,7 @@
             </xsl:variable>
 
             <div class="articleSection" data-anchor="{$title}">
-                <h3 class="articleSectionTitle"><xsl:value-of select="$title"/></h3>
+                <h2 class="h5"><xsl:value-of select="$title"/></h2>
             </div>
         </xsl:if>
     </xsl:template>
@@ -90,10 +90,10 @@
         </xsl:if>
 
         <!-- título -->
-        <h3>
+        <h2>
             <xsl:attribute name="class">h5</xsl:attribute>
             <xsl:apply-templates select="." mode="title"></xsl:apply-templates>
-        </h3>
+        </h2>
     </xsl:template>
 
     <xsl:template match="*[contains(name(),'abstract')]" mode="index">
diff --git a/packtools/catalogs/htmlgenerator/v3.0/article-text-back.xsl b/packtools/catalogs/htmlgenerator/v3.0/article-text-back.xsl
@@ -7,11 +7,11 @@
 
     <xsl:template match="*" mode="back-section-h">
         <xsl:if test="title or label">
-            <h3 class="articleSectionTitle">
+            <h2 class="h5">
                 <xsl:apply-templates select="label"/>
                 <xsl:if test="label and title">&#160;</xsl:if>
                 <xsl:apply-templates select="title"/>
-            </h3>
+            </h2>
         </xsl:if>
     </xsl:template>
 
diff --git a/packtools/catalogs/htmlgenerator/v3.0/article-text-fn.xsl b/packtools/catalogs/htmlgenerator/v3.0/article-text-fn.xsl
@@ -38,11 +38,11 @@
         -->
         <xsl:variable name="name" select="@fn-type"/>
         <xsl:if test="not(preceding-sibling::node()) or preceding-sibling::*[1][not(@fn-type)] or preceding-sibling::*[1][@fn-type!=$name]">
-            <h3 class="articleSectionTitle">
+            <h2 class="h5">
                 <xsl:apply-templates select="." mode="text-labels">
                     <xsl:with-param name="text"><xsl:value-of select="@fn-type"/></xsl:with-param>
                 </xsl:apply-templates>
-            </h3>
+            </h2>
         </xsl:if>
     </xsl:template>
 
diff --git a/packtools/catalogs/htmlgenerator/v3.0/article-text-ref.xsl b/packtools/catalogs/htmlgenerator/v3.0/article-text-ref.xsl
@@ -19,10 +19,10 @@
                     <!-- manter pareado class="articleSection" e data-anchor="nome da seção no menu esquerdo" -->
                     <xsl:attribute name="class">articleSection</xsl:attribute>
                     <xsl:attribute name="data-anchor"><xsl:apply-templates select="." mode="title"/></xsl:attribute>
-                    <h3>
-                        <xsl:attribute name="class">articleSectionTitle</xsl:attribute>
+                    <h2>
+                        <xsl:attribute name="class">h5</xsl:attribute>
                         <xsl:apply-templates select="." mode="title"/>
-                    </h3>
+                    </h2>
                     <div class="row">
                         <div class="col ref-list">
                             <ul class="refList articleFootnotes">
diff --git a/packtools/catalogs/htmlgenerator/v3.0/article-text-section-data-availability.xsl b/packtools/catalogs/htmlgenerator/v3.0/article-text-section-data-availability.xsl
@@ -47,15 +47,15 @@
         <!-- manter pareado class="articleSection" e data-anchor="nome da seção no menu esquerdo" -->
         <div class="articleSection">
             <xsl:attribute name="data-anchor"><xsl:value-of select="$title"/></xsl:attribute>
-            <h3 class="articleSectionTitle"><xsl:value-of select="$title"/></h3>
+            <h2 class="h5"><xsl:value-of select="$title"/></h2>
         </div>
     </xsl:template>
 
     <xsl:template match="ref-list" mode="data-availability">
         <xsl:if test=".//element-citation[@publication-type='data' or @publication-type='database']">
-            <h3><xsl:apply-templates select="." mode="text-labels">
+            <h2 class="h5"><xsl:apply-templates select="." mode="text-labels">
                     <xsl:with-param name="text">Data citations</xsl:with-param>
-                </xsl:apply-templates></h3>
+                </xsl:apply-templates></h2>
             <xsl:apply-templates select=".//element-citation[@publication-type='data' or @publication-type='database']" mode="data-availability"/>
         </xsl:if>
     </xsl:template>
diff --git a/packtools/catalogs/htmlgenerator/v3.0/article-text-sub-article.xsl b/packtools/catalogs/htmlgenerator/v3.0/article-text-sub-article.xsl
@@ -6,7 +6,7 @@
     <xsl:include href="../v2.0/article-text-sub-article.xsl"/>
 
     <xsl:template match="sub-article[@article-type!='translation']//subject | response//subject">
-        <h3 class="articleSectionTitle"><xsl:apply-templates select="*|text()"></xsl:apply-templates></h3>
+        <h2 class="h5"><xsl:apply-templates select="*|text()"></xsl:apply-templates></h2>
      </xsl:template>
 
 </xsl:stylesheet>
diff --git a/packtools/catalogs/htmlgenerator/v3.0/article-text.xsl b/packtools/catalogs/htmlgenerator/v3.0/article-text.xsl
@@ -6,9 +6,9 @@
     <xsl:include href="../v2.0/article-text.xsl"/>
 
     <xsl:template match="body/sec/title">
-        <h3 class="articleSectionTitle">
+        <h2 class="h5">
             <xsl:apply-templates select="*|text()"/>
-        </h3>
+        </h2>
     </xsl:template>
     
     <xsl:template match="sec/sec/title">
diff --git a/packtools/catalogs/htmlgenerator/v3.0/article.xsl b/packtools/catalogs/htmlgenerator/v3.0/article.xsl
@@ -129,8 +129,10 @@
     </xsl:template>
 
     <xsl:template match="/" mode="css">
-        <link rel="stylesheet" href="https://ds.scielo.org/css/bootstrap.css"/>
-        <link rel="stylesheet" href="https://ds.scielo.org/css/article.css"/>
+        <!--link rel="stylesheet" href="https://ds.scielo.org/css/bootstrap.css"/>
+        <link rel="stylesheet" href="https://ds.scielo.org/css/article.css"/-->
+        <link rel="stylesheet" href="{$CSS_PATH}/bootstrap.css"/>
+        <link rel="stylesheet" href="{$CSS_PATH}/article.css"/>
     </xsl:template>
 
     <xsl:template match="/" mode="js">
diff --git a/packtools/catalogs/htmlgenerator/v3.0/generic-history.xsl b/packtools/catalogs/htmlgenerator/v3.0/generic-history.xsl
@@ -11,9 +11,9 @@
             <xsl:attribute name="data-anchor"><xsl:apply-templates select="." mode="text-labels">
                 <xsl:with-param name="text">History</xsl:with-param>
             </xsl:apply-templates></xsl:attribute>
-            <h3 class="articleSectionTitle"><xsl:apply-templates select="." mode="text-labels">
+            <h2 class="h5"><xsl:apply-templates select="." mode="text-labels">
                 <xsl:with-param name="text">History</xsl:with-param>
-            </xsl:apply-templates></h3>
+            </xsl:apply-templates></h2>
             <div class="row">
                 <div class="col-md-12 col-sm-12">
                     <ul class="articleTimeline">
diff --git a/packtools/catalogs/htmlgenerator/v3.0/generic-pub-date.xsl b/packtools/catalogs/htmlgenerator/v3.0/generic-pub-date.xsl
@@ -12,9 +12,9 @@
              <xsl:attribute name="data-anchor"><xsl:apply-templates select="." mode="text-labels">
                  <xsl:with-param name="text">Publication Dates</xsl:with-param>
              </xsl:apply-templates></xsl:attribute>
-             <h3 class="articleSectionTitle"><xsl:apply-templates select="." mode="text-labels">
+             <h2 class="h5"><xsl:apply-templates select="." mode="text-labels">
                  <xsl:with-param name="text">Publication Dates</xsl:with-param>
-             </xsl:apply-templates></h3>
+             </xsl:apply-templates></h2>
              <div class="row">
                  <div class="col-md-12 col-sm-12">
                      <ul class="articleTimeline">
diff --git a/packtools/catalogs/htmlgenerator/v3.0/html-modals-contribs.xsl b/packtools/catalogs/htmlgenerator/v3.0/html-modals-contribs.xsl
@@ -23,17 +23,54 @@
                             </xsl:attribute>
                         </button>
                     </div>
+                    <xsl:call-template name="modal-author-css"/>
                     <div class="modal-body">
-                        <div class="info">
-                            <xsl:apply-templates select="contrib-group/contrib" mode="modal-contrib"></xsl:apply-templates>
-                        </div>
+                        <xsl:apply-templates select="contrib-group/contrib" mode="modal-contrib"></xsl:apply-templates>
                         <xsl:apply-templates select=".//author-notes" mode="modal-contrib"></xsl:apply-templates>
                     </div>
                 </div>
             </div>
         </div>
     </xsl:template>
 
+    <xsl:template name="modal-author-css">
+        <style>
+            .author-card {
+                border-bottom: 1px solid #ccc;
+                padding: 1rem 0;
+            }
+            .author-card:last-child {
+                border-bottom: 0px;
+            }
+            .author-name {
+                font-weight: 600;
+            }
+            .material-icons-outlined {
+                vertical-align: middle;
+                margin-right: 4px;
+            }
+            .orcid-button {
+                padding-left: 2.5rem;
+            }
+            .modal-body {
+                padding-bottom: 3rem;
+            }
+            .orcid-button::before {
+                content: "";
+                position: absolute;
+                background-image: url(https://ds.scielo.org/img/logo-orcid.svg);
+                background-repeat: no-repeat;
+                background-size: 1.5em auto;
+                background-position: .5em center;
+                display: block;
+                width: 60px;
+                height: 60px;
+                top: -10px;
+                left: 0;
+            }
+        </style>
+    </xsl:template>
+
     <xsl:template match="article-meta | front-stub" mode="modal-scimago">
         <xsl:variable name="id"><xsl:apply-templates select="." mode="modal-id"></xsl:apply-templates></xsl:variable>
         <div class="modal fade ModalDefault ModalTutors" id="ModalScimago{$id}" tabindex="-1" role="dialog" aria-hidden="true">
@@ -62,21 +99,61 @@
         </div>
     </xsl:template>
 
-    <xsl:template match="author-notes/*" mode="modal-contrib">
-        <div class="info">
-            <xsl:apply-templates select="*|text()"/>
+    <xsl:template match="contrib" mode="modal-contrib">
+        <!--
+            ((contrib-id)*, (anonymous | collab | collab-alternatives | name | name-alternatives | string-name)*, (degrees)*, (address | aff | aff-alternatives | author-comment | bio | email | ext-link | on-behalf-of | role | uri | xref)*)
+        -->
+        
+        <div class="author-card">
+            <div class="author-name">
+                <span class="material-icons-outlined">person</span>
+                <xsl:apply-templates select="anonymous|name|collab|on-behalf-of"/>
+                <xsl:apply-templates select="xref[@ref-type='corresp']"/>
+            </div>
+            <div class="author-roles ms-4 mb-2 scielo__text-color__subtle--light">
+                <xsl:apply-templates select="role | bio" mode="modal-contrib"/>
+            </div>
+            <div class="author-institution ms-4 mb-2 scielo__text-color__subtle--light">
+                <xsl:apply-templates select="xref" mode="modal-contrib"/>
+            </div>
+            <div class="ms-4">
+                <xsl:apply-templates select="contrib-id" mode="modal-contrib"/>
+            </div>
         </div>
     </xsl:template>
 
-    <xsl:template match="author-notes/corresp" mode="modal-contrib">
-        <xsl:variable name="id"><xsl:value-of select="@id"/></xsl:variable>
-        <div class="corresp">
-            <a class="" name="{@id}_ref"/>
-            <xsl:apply-templates select="*|text()"/>
-        </div>
+    <xsl:template match="contrib/xref" mode="modal-contrib">
+        <xsl:variable name="rid" select="@rid"/>
+            <xsl:apply-templates select="$article//aff[@id=$rid]" mode="modal-contrib"/>
+        <xsl:apply-templates select="$article//fn[@id=$rid]" mode="xref"/>
+    </xsl:template>
+    
+    <xsl:template match="role" mode="modal-contrib">
+        <xsl:choose>
+            <xsl:when test="position()=1"></xsl:when>
+            <xsl:otherwise> · </xsl:otherwise>
+        </xsl:choose><xsl:value-of select="."/>
     </xsl:template>
 
-    <xsl:template match="author-notes//label">
+    <xsl:template match="aff" mode="modal-contrib">
+        <span class="material-icons-outlined">school</span>
+        <span data-aff-display="{@id}">
+            <xsl:apply-templates select="." mode="display"/>
+        </span>
+        <xsl:apply-templates select="." mode="hidden-for-scimago"/>
+    </xsl:template>
+    
+    <xsl:template match="contrib-id" mode="modal-contrib">
+        <a href="{.}" target="_blank" class="btn btn-secondary  {@contrib-id-type}-button">
+            <xsl:value-of select="."/>
+        </a>
+    </xsl:template>
+
+    <xsl:template match="author-notes/*" mode="modal-contrib">
+        <xsl:apply-templates select="*|text()"/>
+    </xsl:template>
+
+    <xsl:template match="author-notes/fn/label" mode="modal-contrib">
         <xsl:variable name="text"><xsl:apply-templates select=".//text()"/></xsl:variable>
         <xsl:choose>
             <xsl:when test="contains('123456789',substring(normalize-space($text),1,1))">
@@ -88,7 +165,81 @@
         </xsl:choose>
     </xsl:template>
 
-    <xsl:template match="author-notes//label[sup]">
+    <xsl:template match="author-notes/fn/label[sup]" mode="modal-contrib">
         <strong><xsl:apply-templates select="*|text()"/></strong>
     </xsl:template>
+
+    <xsl:template match="author-notes/fn" mode="modal-contrib">
+        <div>
+            <xsl:apply-templates select="." mode="author-notes-fn-class"/>
+            <xsl:apply-templates select="*|text()" mode="modal-contrib"/>
+        </div>
+    </xsl:template>
+
+    <xsl:template match="author-notes/fn" mode="author-notes-fn-class">
+        <xsl:attribute name="class">mb-3</xsl:attribute>
+    </xsl:template>
+
+    <xsl:template match="author-notes/fn[@fn-type='con']" mode="author-notes-fn-class">
+        <xsl:attribute name="class">author-contributions mb-3</xsl:attribute>
+    </xsl:template>
+
+    <xsl:template match="author-notes/fn[@fn-type='con']/label" mode="modal-contrib">
+        <strong><span class="material-icons-outlined">groups</span> <xsl:apply-templates select="."/></strong>
+    </xsl:template>
+
+    <xsl:template match="author-notes/fn/p | author-notes/fn/text()" mode="modal-contrib">
+        <p class="scielo__text-color__subtle--light mb-0">
+            <xsl:apply-templates select="."/>
+        </p>
+    </xsl:template>
+
+    <xsl:template match="author-notes/corresp" mode="modal-contrib">
+        <xsl:variable name="id"><xsl:value-of select="@id"/></xsl:variable>
+        <a class="" name="{@id}_ref"/>
+        <div class="correspondence mt-3 mb-4">
+            <xsl:apply-templates select="*|text()" mode="modal-contrib"/>
+        </div>
+    </xsl:template>
+
+    <xsl:template match="author-notes/corresp/label" mode="modal-contrib">
+        <strong>
+            <span class="material-icons-outlined">
+                <xsl:choose>
+                    <xsl:when test="contains(., 'mail')">email</xsl:when>
+                    <xsl:otherwise>person</xsl:otherwise>
+                </xsl:choose>
+            </span><xsl:value-of select="."/>
+        </strong>
+    </xsl:template>
+
+    <xsl:template match="author-notes/corresp/text()" mode="modal-contrib">
+        <xsl:choose>
+            <xsl:when test="normalize-space(.)!=''">
+                <span class="scielo__text-color__subtle--light">
+                    <xsl:value-of select="."/>
+                </span><br/>
+            </xsl:when>
+            <xsl:when test="contains(., 'mail')">1
+                <strong><span class="material-icons-outlined">email</span> </strong>
+            </xsl:when>
+            <xsl:otherwise><xsl:value-of select="."/></xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+
+    <xsl:template match="text()" mode="corresp-texts">
+        <xsl:value-of select="."/>
+    </xsl:template>
+
+    <xsl:template match="author-notes/corresp/email" mode="modal-contrib">
+        <xsl:variable name="text"><xsl:apply-templates select="..//text()" mode="corresp-texts"/></xsl:variable>
+        <xsl:choose>
+            <xsl:when test="contains($text, 'mail')">2
+                <xsl:apply-templates select="."/>
+            </xsl:when>
+            <xsl:otherwise>
+                <strong><span class="material-icons-outlined">email</span> </strong><xsl:apply-templates select="."/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
 </xsl:stylesheet>
diff --git a/packtools/catalogs/htmlgenerator/v3.0/html-modals.xsl b/packtools/catalogs/htmlgenerator/v3.0/html-modals.xsl
@@ -288,9 +288,11 @@
 
     <xsl:template match="*[label or caption]" mode="row-label-caption">
         <div class="col-12">
-            <strong><xsl:apply-templates select="label"/></strong>
-            <br/>
-            <xsl:apply-templates select="caption"/>
+            <caption class="sr-only">
+                <strong><xsl:apply-templates select="label"/></strong>
+                <xsl:apply-templates select="caption"/>
+            </caption>
         </div>
     </xsl:template>
+
 </xsl:stylesheet>
diff --git a/packtools/catalogs/htmlgenerator/v3.0/static/css/article.css b/packtools/catalogs/htmlgenerator/v3.0/static/css/article.css
diff --git a/packtools/catalogs/htmlgenerator/v3.0/static/css/bootstrap.css b/packtools/catalogs/htmlgenerator/v3.0/static/css/bootstrap.css
diff --git a/tests/fixtures/htmlgenerator/abstracts/FngWzPqXpsVJGyxLD5PSHPg.en.3_0.html b/tests/fixtures/htmlgenerator/abstracts/FngWzPqXpsVJGyxLD5PSHPg.en.3_0.html
diff --git a/tests/fixtures/htmlgenerator/abstracts/FngWzPqXpsVJGyxLD5PSHPg.en.html b/tests/fixtures/htmlgenerator/abstracts/FngWzPqXpsVJGyxLD5PSHPg.en.html
diff --git a/tests/fixtures/htmlgenerator/abstracts/FngWzPqXpsVJGyxLD5PSHPg.pt.3_0.html b/tests/fixtures/htmlgenerator/abstracts/FngWzPqXpsVJGyxLD5PSHPg.pt.3_0.html
diff --git a/tests/fixtures/htmlgenerator/abstracts/FngWzPqXpsVJGyxLD5PSHPg.pt.html b/tests/fixtures/htmlgenerator/abstracts/FngWzPqXpsVJGyxLD5PSHPg.pt.html
