Merge pull request #1307 from pat270/lexiconcss-1242

LEXICONCSS #1242 - SVG Icons added `.lexicon-icon-container` to wrap svg icons so we can have the icon name spoken for screen readers
liferay · Nov 21, 2018 · 3039054 · 3039054
2 parents 5ef0a59 + 21f3355
commit 3039054
Show file tree

Hide file tree

Showing 31 changed files with 2,920 additions and 1,752 deletions.
diff --git a/src/content/badges_and_labels.html b/src/content/badges_and_labels.html
diff --git a/src/content/blogs_action.html b/src/content/blogs_action.html
diff --git a/src/content/blogs_appearance.html b/src/content/blogs_appearance.html
@@ -12,17 +12,21 @@
 						<ul class="sidebar-actions">
 							<li>
 								<a class="icon-monospaced sidenav-close" href="#1">
-									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
-										<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
-									</svg>
+									<span aria-label="icon-times" class="lexicon-icon-container" role="img">
+										<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+											<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
+										</svg>
+									</span>
 								</a>
 							</li>
 						</ul>
 						<a class="sidebar-title" href="#1">
 							<span class="sticker sticker-primary sticker-static">
-								<svg aria-hidden="true" class="lexicon-icon lexicon-icon-staging">
-									<use xlink:href="{{rootPath}}/images/icons/icons.svg#staging" />
-								</svg>
+								<span aria-label="icon-staging" class="lexicon-icon-container" role="img">
+									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-staging">
+										<use xlink:href="{{rootPath}}/images/icons/icons.svg#staging" />
+									</svg>
+								</span>
 							</span>
 							<span>Liferay</span>
 						</a>
@@ -110,9 +114,11 @@
 						<div class="nameplate">
 							<div class="nameplate-field">
 								<div class="user-icon user-icon-warning">
-									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-user">
-										<use xlink:href="{{rootPath}}/images/icons/icons.svg#user" />
-									</svg>
+									<span aria-label="icon-user" class="lexicon-icon-container" role="img">
+										<svg aria-hidden="true" class="lexicon-icon lexicon-icon-user">
+											<use xlink:href="{{rootPath}}/images/icons/icons.svg#user" />
+										</svg>
+									</span>
 								</div>
 							</div>
 
@@ -136,9 +142,11 @@
 						<div class="toolbar-group">
 							<div class="toolbar-group-content">
 								<a class="sidenav-toggler" href="#blogSidenav" id="blogSidenavToggler">
-									<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-bars">
-										<use xlink:href="{{rootPath}}/images/icons/icons.svg#bars" />
-									</svg>
+									<span aria-label="icon-bars" class="lexicon-icon-container" role="img">
+										<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-bars">
+											<use xlink:href="{{rootPath}}/images/icons/icons.svg#bars" />
+										</svg>
+									</span>
 								</a>
 							</div>
 						</div>
@@ -147,9 +155,11 @@
 							<div class="toolbar-group-content">
 								<div class="dropdown">
 									<a class="dropdown-toggle" data-toggle="dropdown" href="#1">
-										<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-cog">
-											<use xlink:href="{{rootPath}}/images/icons/icons.svg#cog" />
-										</svg>
+										<span aria-label="icon-cog" class="lexicon-icon-container" role="img">
+											<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-cog">
+												<use xlink:href="{{rootPath}}/images/icons/icons.svg#cog" />
+											</svg>
+										</span>
 									</a>
 									<ul class="dropdown-menu dropdown-menu-right">
 										<li><a href="#1">Export</a></li>
@@ -177,18 +187,22 @@
 							<div class="input-group-input">
 								<div class="basic-search-slider">
 									<button class="basic-search-close btn btn-default" type="button">
-										<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
-											<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
-										</svg>
+										<span aria-label="icon-times" class="lexicon-icon-container" role="img">
+											<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+												<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
+											</svg>
+										</span>
 									</button>
 									<input class="form-control" placeholder=" Search..." type="text">
 								</div>
 							</div>
 							<div class="input-group-btn">
 								<button class="btn btn-default" type="submit">
-									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
-										<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
-									</svg>
+									<span aria-label="icon-search" class="lexicon-icon-container" role="img">
+										<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+											<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
+										</svg>
+									</span>
 								</button>
 							</div>
 						</form>

diff --git a/src/content/buttons.html b/src/content/buttons.html
@@ -566,9 +566,11 @@ <h3>Action Buttons</h3>
 		<div class="lx-site-btn-action-column">
 			<h6>Lexicon SVG</h6>
 			<a class="btn btn-action btn-primary" href="{{rootPath}}/content/blogs-action" onClick="alert('Link to Somewhere');return false;">
-				<svg aria-hidden="true" aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
-					<use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
-				</svg>
+				<span aria-label="icon-plus" class="lexicon-icon-container" role="img">
+					<svg aria-hidden="true" aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
+					</svg>
+				</span>
 			</a>
 		</div>
 
@@ -591,9 +593,11 @@ <h6>Glyphicon</h6>
 </div>
 <div class="collapse" id="codeCollapse12">
 	<pre><code class="html">```<a class="btn btn-action btn-primary" href="../blogs-action">
-    <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
-        <use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
-    </svg>
+    <span aria-label="icon-plus" class="lexicon-icon-container" role="img">
+        <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
+            <use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
+        </svg>
+    </span>
 </a>```</code></pre>
 </div>
 
@@ -603,9 +607,11 @@ <h6>Glyphicon</h6>
 
 		<div class="btn-action-secondary dropdown">
 			<button class="btn btn-primary" data-toggle="dropdown" type="button">
-				<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
-					<use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
-				</svg>
+				<span aria-label="icon-plus" class="lexicon-icon-container" role="img">
+					<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
+					</svg>
+				</span>
 			</button>
 			<ul class="dropdown-menu dropdown-menu-right-side-bottom">
 				<li><a href="../blogs-action">User</a></li>
@@ -620,9 +626,11 @@ <h6>Glyphicon</h6>
 <div class="collapse" id="codeCollapse13">
 	<pre><code class="html">```<div class="btn-action-secondary dropdown">
     <button class="btn btn-primary" data-toggle="dropdown" type="button">
-        <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
-            <use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
-        </svg>
+        <span aria-label="icon-plus" class="lexicon-icon-container" role="img">
+            <svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
+                <use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
+            </svg>
+        </span>
     </button>
     <ul class="dropdown-menu dropdown-menu-bottom dropdown-menu-right-side">
         <li><a href="../blogs-action">User</a></li>
@@ -634,9 +642,11 @@ <h6>Glyphicon</h6>
 
 		<div class="btn-action-secondary btn-bottom-right dropdown">
 			<button class="btn btn-primary" data-toggle="dropdown" type="button">
-				<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
-					<use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
-				</svg>
+				<span aria-label="icon-plus" class="lexicon-icon-container" role="img">
+					<svg aria-hidden="true" class="icon-monospaced lexicon-icon lexicon-icon-plus">
+						<use xlink:href="{{rootPath}}/images/icons/icons.svg#plus" />
+					</svg>
+				</span>
 			</button>
 			<ul class="dropdown-menu dropdown-menu-left-side-bottom">
 				<li class="dropdown-header">Add Button Dropdown Header</li>

diff --git a/src/content/collapsible_search.html b/src/content/collapsible_search.html
@@ -14,18 +14,22 @@
 				<div class="input-group-input">
 					<div class="basic-search-slider">
 						<button class="basic-search-close btn btn-default" type="button">
-							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
-								<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
-							</svg>
+							<span aria-label="icon-times" class="lexicon-icon-container" role="img">
+								<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+									<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
+								</svg>
+							</span>
 						</button>
 						<input class="form-control" placeholder=" Search..." type="text" />
 					</div>
 				</div>
 				<div class="input-group-btn">
 					<button class="btn btn-default" type="submit">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
-						</svg>
+						<span aria-label="icon-search" class="lexicon-icon-container" role="img">
+							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+								<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
+							</svg>
+						</span>
 					</button>
 				</div>
 			</form>
@@ -145,18 +149,22 @@ <h3>Alternate Navbar Toggle Style</h3>
 					<div class="input-group-input">
 						<div class="basic-search-slider">
 							<button class="basic-search-close btn btn-default" type="button">
-								<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
-									<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
-								</svg>
+								<span aria-label="icon-times" class="lexicon-icon-container" role="img">
+									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+										<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
+									</svg>
+								</span>
 							</button>
 							<input class="form-control" placeholder=" Search..." type="text" />
 						</div>
 					</div>
 					<div class="input-group-btn">
 						<button class="btn btn-default" type="submit">
-							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
-								<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
-							</svg>
+							<span aria-label="icon-search" class="lexicon-icon-container" role="img">
+								<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+									<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
+								</svg>
+							</span>
 						</button>
 					</div>
 				</form>
@@ -221,18 +229,22 @@ <h3>Navbar with Custom Toggle and Basic Search in Navbar Header</h3>
 					<div class="input-group-input">
 						<div class="basic-search-slider">
 							<button class="basic-search-close btn btn-default" type="button">
-								<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
-									<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
-								</svg>
+								<span aria-label="icon-times" class="lexicon-icon-container" role="img">
+									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+										<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
+									</svg>
+								</span>
 							</button>
 							<input class="form-control" placeholder=" Search..." type="text" />
 						</div>
 					</div>
 					<div class="input-group-btn">
 						<button class="btn btn-default" type="submit">
-							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
-								<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
-							</svg>
+							<span aria-label="icon-search" class="lexicon-icon-container" role="img">
+								<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+									<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
+								</svg>
+							</span>
 						</button>
 					</div>
 				</form>
@@ -267,18 +279,22 @@ <h3>Navbar No Collapse</h3>
 				<div class="input-group-input">
 					<div class="basic-search-slider">
 						<button class="basic-search-close btn btn-default" type="button">
-							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
-								<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
-							</svg>
+							<span aria-label="icon-times" class="lexicon-icon-container" role="img">
+								<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+									<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
+								</svg>
+							</span>
 						</button>
 						<input class="form-control" placeholder=" Search..." type="text" />
 					</div>
 				</div>
 				<div class="input-group-btn">
 					<button class="btn btn-default" type="submit">
-						<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
-							<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
-						</svg>
+						<span aria-label="icon-search" class="lexicon-icon-container" role="img">
+							<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
+								<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
+							</svg>
+						</span>
 					</button>
 				</div>
 			</form>