From 69319704a425ca92fdfef7fd66584bd2b15bbf32 Mon Sep 17 00:00:00 2001
From: Alvino Rodrigues <alvino.digo@gmail.com>
Date: Tue, 23 Oct 2018 13:37:41 -0300
Subject: [PATCH] Testando acessibilidade na colecao

---
 src/assets/scss/_list-post.scss            |   4 +-
 src/assets/scss/style.scss                 |  10 +-
 src/template-parts/header-social-share.php |   3 +
 src/template-parts/headercollection.php    | 141 +++++++++++----------
 4 files changed, 85 insertions(+), 73 deletions(-)

diff --git a/src/assets/scss/_list-post.scss b/src/assets/scss/_list-post.scss
index 27f8467..d23d641 100644
--- a/src/assets/scss/_list-post.scss
+++ b/src/assets/scss/_list-post.scss
@@ -175,7 +175,7 @@
                 height: 170px;
                 width: 170px;
                 margin-right: 1rem;
-                > h4 {
+                > .title-initials {
                     text-align: center;
                     font-size: 3rem;
                 }
@@ -214,7 +214,7 @@
             .image-placeholder {
                 height: 250px;
                 width: 250px;
-                > h4 {
+                > .title-initials {
                     font-size: 3rem;
                 }
             }
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 4b310be..30456b8 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -623,14 +623,18 @@ nav{
 	background-color: #cbcbcb;
 	display: flex;
 	margin: 0 auto;
-	> h4 {
+	> .title-initials {
 		/* align-self: center;
 		text-align: center;
 		width: 100%; */
 		flex: auto;
 		margin-top: auto;
 		margin-bottom: auto;
-		color: #fff
+		color: #fff;
+		font-size: 1.5rem;
+		text-decoration: none;
+		cursor: text;
+		border-bottom: none;
 	}
 }
 
@@ -915,7 +919,7 @@ body.contraste .collection-header--share .btn .mdi.mdi-share-variant,
 body.contraste .collection-header--share .btn .mdi,
 body.contraste .t-bg-collection .t-collection--info .t-collection--info-title,
 body.contraste .t-bg-collection .t-collection--info .t-collection--col-9,
-body.contraste .image-placeholder>h4,
+body.contraste .image-placeholder>.title-initials,
 body.contraste .t-bg-collection .t-collection--info .t-collection--col-3,
 body.contraste .accessibility-shortcuts,
 body.contraste .accessibility-shortcuts li,
diff --git a/src/template-parts/header-social-share.php b/src/template-parts/header-social-share.php
index 3e9eaba..15cd4da 100644
--- a/src/template-parts/header-social-share.php
+++ b/src/template-parts/header-social-share.php
@@ -9,6 +9,7 @@
 				<a href="http://www.facebook.com/sharer.php?u=<?php echo home_url( $wp->request ); ?>" target="_blank">
 					<div class="btn btn-icon">
 						<i class="mdi mdi-facebook"></i>
+						<span class="sr-only">Facebook</span>
 					</div>
 				</a>
 			</div>
@@ -18,6 +19,7 @@
 				<a href="https://plus.google.com/share?url=<?php echo home_url( $wp->request ); ?>" target="_blank">
 					<div class="btn btn-icon">
 						<i class="mdi mdi-google-plus"></i>
+						<span class="sr-only">Google Plus</span>
 					</div>
 				</a>
 			</div>
@@ -27,6 +29,7 @@
 				<a href="http://twitter.com/share?url=<?php echo home_url( $wp->request ); ?>&amp;text=<?php the_title_attribute(); ?>&amp;via=<?php echo esc_attr( get_option( 'tainacan_twitter_user', '' ) ); ?>" target="_blank">
 					<div class="btn btn-icon">
 						<i class="mdi mdi-twitter"></i>
+						<span class="sr-only">Twitter</span>
 					</div>
 				</a>
 			</div>
diff --git a/src/template-parts/headercollection.php b/src/template-parts/headercollection.php
index 669d1b3..ce83cc4 100644
--- a/src/template-parts/headercollection.php
+++ b/src/template-parts/headercollection.php
@@ -29,77 +29,82 @@ if ( $background_color ) {
 echo '</style>';
 ?>
 
-<div <?php if ( get_header_image() ) : ?>class="page-header header-filter page-height" style="background-image: url('<?php header_image(); ?>')"<?php else : ?>class="page-header header-filter page-collection" style="background-image: url('<?php echo get_template_directory_uri() ?>/assets/images/capa.png')"<?php endif; ?>>
-	<div class="container-fluid px-0 t-bg-collection" style="<!-- z-index: 0; -->">
-		<div class="collection-header position-relative max-large" style="">
-			<?php do_action( 'tainacan-interface-collection-header' ); ?>
-			<?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) : ?>
-				<img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" alt="Image">
-			<?php else : ?>
-				<div class="image-placeholder rounded-circle border border-white position-absolute">
-					<h4 class="text-center">
-					<?php
-						echo tainacan_get_initials( tainacan_get_the_collection_name() );
-					?>
-					</h4>
-				</div>
-			<?php endif;
-			global $wp; ?>
-			<div class="collection-header--share" style="margin-right: 4.16666666667%;">
-				<div class="btn trigger">
-					<span class="mdi mdi-share-variant"></span>
-				</div>
-				<div class="icons">
-					<?php if ( true == get_theme_mod( 'tainacan_facebook_share', true ) ) : ?> 
-						<div class="rotater">
-							<a href="http://www.facebook.com/sharer.php?u=<?php echo home_url( $wp->request ); ?>" target="_blank">
-								<div class="btn btn-icon">
-									<i class="mdi mdi-facebook"></i>
-								</div>
-							</a>
-						</div>
-					<?php endif; ?>
-					<?php if ( true == get_theme_mod( 'tainacan_google_share', true ) ) : ?> 
-						<div class="rotater">
-							<a href="https://plus.google.com/share?url=<?php echo home_url( $wp->request ); ?>" target="_blank">
-								<div class="btn btn-icon">
-									<i class="mdi mdi-google-plus"></i>
-								</div>
-							</a>
-						</div>
-					<?php endif; ?>
-					<?php if ( true == get_theme_mod( 'tainacan_twitter_share', true ) && get_option( 'tainacan_twitter_user' ) ) : ?> 
-						<div class="rotater">
-							<a href="http://twitter.com/share?url=<?php echo home_url( $wp->request ); ?>&amp;text=<?php the_title_attribute(); ?>&amp;via=<?php echo esc_attr( get_option( 'tainacan_twitter_user', '' ) ); ?>" target="_blank">
-								<div class="btn btn-icon">
-									<i class="mdi mdi-twitter"></i>
-								</div>
-							</a>
-						</div>
-					<?php endif; ?>
-				</div>
-			</div>
-		</div>
-		<div class="row t-collection--info max-large margin-one-column" style="overflow-x: inherit;">
-			<div class="col-4 col-md-3 px-0 t-collection--col-3">
-				
-			</div>
-			<div class="col-8 col-md-9 pl-0 t-collection--col-9 mt-md-3" style="z-index: 2">
-				<h2 class="t-collection--info-title text-white">
-					<?php tainacan_the_collection_name(); ?>
-				</h2>
-				<?php $tainacan_collection_description = tainacan_get_the_collection_description(); ?>
-				<?php if ( ! empty( $tainacan_collection_description ) || has_action( 'tainacan-interface-collection-description' ) ) : ?>
-					<div class="text-white t-collection--info-description-text tainacan-interface-truncate">
+	<div <?php if ( get_header_image() ) : ?>class="page-header header-filter page-height" style="background-image: url('<?php header_image(); ?>')"<?php else : ?>class="page-header header-filter page-collection" style="background-image: url('<?php echo get_template_directory_uri() ?>/assets/images/capa.png')"<?php endif; ?>>
+		<div class="container-fluid px-0 t-bg-collection" style="<!-- z-index: 0; -->">
+			<div class="collection-header position-relative max-large" style="">
+				<?php do_action( 'tainacan-interface-collection-header' ); ?>
+				<?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) : ?>
+					<img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" alt="Image">
+				<?php else : ?>
+					<div class="image-placeholder rounded-circle border border-white position-absolute">
+						<abbr class="title-initials text-center" title="<?php echo tainacan_get_the_collection_name(); ?>">
 						<?php
-							tainacan_the_collection_description();
+							echo tainacan_get_initials( tainacan_get_the_collection_name() );
+
 						?>
-						<?php do_action( 'tainacan-interface-collection-description' ); ?>
-						<a class="toggle" href="#"></a>
+						</abbr>
 					</div>
-				<?php endif; ?>
+				<?php endif;
+				global $wp; ?>
+				<div class="collection-header--share" style="margin-right: 4.16666666667%;">
+					<div class="btn trigger">
+						<span class="mdi mdi-share-variant"></span>
+					</div>
+					<div class="icons">
+						<?php if ( true == get_theme_mod( 'tainacan_facebook_share', true ) ) : ?> 
+							<div class="rotater">
+								<a href="http://www.facebook.com/sharer.php?u=<?php echo home_url( $wp->request ); ?>" target="_blank">
+									<div class="btn btn-icon">
+										<i class="mdi mdi-facebook"></i>
+										<span class="sr-only">Facebook</span>
+									</div>
+								</a>
+							</div>
+						<?php endif; ?>
+						<?php if ( true == get_theme_mod( 'tainacan_google_share', true ) ) : ?> 
+							<div class="rotater">
+								<a href="https://plus.google.com/share?url=<?php echo home_url( $wp->request ); ?>" target="_blank">
+									<div class="btn btn-icon">
+										<i class="mdi mdi-google-plus"></i>
+										<span class="sr-only">Google Plus</span>
+									</div>
+								</a>
+							</div>
+						<?php endif; ?>
+						<?php if ( true == get_theme_mod( 'tainacan_twitter_share', true ) && get_option( 'tainacan_twitter_user' ) ) : ?> 
+							<div class="rotater">
+								<a href="http://twitter.com/share?url=<?php echo home_url( $wp->request ); ?>&amp;text=<?php the_title_attribute(); ?>&amp;via=<?php echo esc_attr( get_option( 'tainacan_twitter_user', '' ) ); ?>" target="_blank">
+									<div class="btn btn-icon">
+										<i class="mdi mdi-twitter"></i>
+										<span class="sr-only">Twitter</span>
+									</div>
+								</a>
+							</div>
+						<?php endif; ?>
+					</div>
+				</div>
+			</div>
+			<div class="row t-collection--info max-large margin-one-column" style="overflow-x: inherit;">
+				<div class="col-4 col-md-3 px-0 t-collection--col-3">
+					
+				</div>
+				<div class="col-8 col-md-9 pl-0 t-collection--col-9 mt-md-3" style="z-index: 2">
+					<h2 class="t-collection--info-title text-white">
+						<?php tainacan_the_collection_name(); ?>
+					</h2>
+					<?php $tainacan_collection_description = tainacan_get_the_collection_description(); ?>
+					<?php if ( ! empty( $tainacan_collection_description ) || has_action( 'tainacan-interface-collection-description' ) ) : ?>
+						<div class="text-white t-collection--info-description-text tainacan-interface-truncate">
+							<?php
+								tainacan_the_collection_description();
+							?>
+							<?php do_action( 'tainacan-interface-collection-description' ); ?>
+							<a class="toggle" href="#"></a>
+						</div>
+					<?php endif; ?>
+				</div>
+				<?php do_action( 'tainacan-interface-collection-header-bottom' ); ?>
 			</div>
-			<?php do_action( 'tainacan-interface-collection-header-bottom' ); ?>
 		</div>
 	</div>
-</div>
+</header>
\ No newline at end of file