(liferay#1242) - (LexiconCSS) SVG Icons added `.lexicon-icon-containe…

…r` to wrap svg icons so we can have the icon name spoken for screen readers at bare minimum
pat270 · Nov 14, 2018 · 051129b · 051129b
1 parent 9673a13
commit 051129b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/scss/lexicon-base/_buttons.scss b/src/scss/lexicon-base/_buttons.scss
@@ -142,10 +142,13 @@
 	}
 }
 
-.btn-action .lexicon-icon {
-	display: block;
-	height: 100%;
-	margin: auto;
+.btn-action {
+	.lexicon-icon-container,
+	.lexicon-icon {
+		display: block;
+		height: 100%;
+		margin: auto;
+	}
 }
 
 .btn-action-secondary {

diff --git a/src/scss/lexicon-base/_icons.scss b/src/scss/lexicon-base/_icons.scss
@@ -1,8 +1,16 @@
+.lexicon-icon-container {
+	display: inline-block;
+	vertical-align: middle;
+
+	.lexicon-icon {
+		display: block;
+	}
+}
+
 .lexicon-icon {
 	display: inline-block;
 	fill: currentColor;
 	height: $lexicon-icon-size;
-	pointer-events: none;
 	transform: translateZ(0);
 	vertical-align: middle;
 	width: $lexicon-icon-size;
@@ -45,6 +53,7 @@ a.collapse-icon {
 .collapse-icon-open {
 	[class^="icon-"],
 	[class*=" icon-"],
+	.lexicon-icon-container,
 	.lexicon-icon {
 		display: block;
 	}
@@ -186,6 +195,10 @@ a .icon-monospaced,
 
 		padding: $icon-monospaced-lexicon-icon-padding;
 	}
+
+	.lexicon-icon-container {
+		display: block;
+	}
 }
 
 // Help Icon

diff --git a/src/scss/lexicon-base/_pagination.scss b/src/scss/lexicon-base/_pagination.scss
@@ -81,6 +81,10 @@
 	float: left;
 	line-height: $pagination-line-height;
 
+	.lexicon-icon-container .lexicon-icon {
+		margin-left: 0;
+	}
+
 	[class*="icon-"] {
 		margin-left: 10px;
 	}