Merge pull request #1331 from matuzalemsteles/pr-1326

Fixes #1242 - Adds an alert informing the discontinuation of the title and focusable API
liferay · Nov 29, 2018 · d837fcb · d837fcb
2 parents 0221739 + 18d9111
commit d837fcb
Show file tree

Hide file tree

Showing 73 changed files with 1,109 additions and 2,164 deletions.
diff --git a/packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.js.snap b/packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.js.snap
@@ -3,8 +3,7 @@
 exports[`ClayAlert should render a "danger" style alert 1`] = `
 <div class="alert alert-danger fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full" focusable="false">
-      <title>exclamation-full</title>
+    <svg class="lexicon-icon lexicon-icon-exclamation-full" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#exclamation-full"></use>
     </svg>
   </span>
@@ -14,8 +13,7 @@ exports[`ClayAlert should render a "danger" style alert 1`] = `
 exports[`ClayAlert should render a "success" style alert 1`] = `
 <div class="alert alert-success fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full" focusable="false">
-      <title>check-circle-full</title>
+    <svg class="lexicon-icon lexicon-icon-check-circle-full" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#check-circle-full"></use>
     </svg>
   </span>
@@ -25,8 +23,7 @@ exports[`ClayAlert should render a "success" style alert 1`] = `
 exports[`ClayAlert should render a "warning" style alert 1`] = `
 <div class="alert alert-warning fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
-      <title>warning-full</title>
+    <svg class="lexicon-icon lexicon-icon-warning-full" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#warning-full"></use>
     </svg>
   </span>
@@ -36,14 +33,12 @@ exports[`ClayAlert should render a "warning" style alert 1`] = `
 exports[`ClayAlert should render a closeable alert 1`] = `
 <div class="alert alert-warning fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-      <title>times</title>
+    <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
-      <title>warning-full</title>
+    <svg class="lexicon-icon lexicon-icon-warning-full" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#warning-full"></use>
     </svg>
   </span>
@@ -53,8 +48,7 @@ exports[`ClayAlert should render a closeable alert 1`] = `
 exports[`ClayAlert should render an "info" style alert 1`] = `
 <div class="alert alert-info fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-      <title>info-circle</title>
+    <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
@@ -64,8 +58,7 @@ exports[`ClayAlert should render an "info" style alert 1`] = `
 exports[`ClayAlert should render an alert with classes 1`] = `
 <div class="alert alert-info fade my-custom-class show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-      <title>info-circle</title>
+    <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
@@ -75,8 +68,7 @@ exports[`ClayAlert should render an alert with classes 1`] = `
 exports[`ClayAlert should render an alert with id 1`] = `
 <div class="alert alert-info fade show" id="myId" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-      <title>info-circle</title>
+    <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
@@ -86,8 +78,7 @@ exports[`ClayAlert should render an alert with id 1`] = `
 exports[`ClayAlert should render default markup 1`] = `
 <div class="alert alert-info fade show" role="alert">
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-      <title>info-circle</title>
+    <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>

diff --git a/packages/clay-alert/src/__tests__/__snapshots__/ClayStripe.js.snap b/packages/clay-alert/src/__tests__/__snapshots__/ClayStripe.js.snap
@@ -4,14 +4,12 @@ exports[`ClayStripe should render a "danger" style stripe 1`] = `
 <div class="alert alert-danger fade alert-dismissible alert-fluid show" role="alert">
   <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-        <title>times</title>
+      <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full" focusable="false">
-        <title>exclamation-full</title>
+      <svg class="lexicon-icon lexicon-icon-exclamation-full" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#exclamation-full"></use>
       </svg>
     </span>
@@ -23,14 +21,12 @@ exports[`ClayStripe should render a "success" style stripe 1`] = `
 <div class="alert alert-success fade alert-dismissible alert-fluid show" role="alert">
   <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-        <title>times</title>
+      <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full" focusable="false">
-        <title>check-circle-full</title>
+      <svg class="lexicon-icon lexicon-icon-check-circle-full" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#check-circle-full"></use>
       </svg>
     </span>
@@ -42,14 +38,12 @@ exports[`ClayStripe should render a "warning" style stripe 1`] = `
 <div class="alert alert-warning fade alert-dismissible alert-fluid show" role="alert">
   <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-        <title>times</title>
+      <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
-        <title>warning-full</title>
+      <svg class="lexicon-icon lexicon-icon-warning-full" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#warning-full"></use>
       </svg>
     </span>
@@ -61,14 +55,12 @@ exports[`ClayStripe should render an "info" style stripe 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" role="alert">
   <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-        <title>times</title>
+      <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-        <title>info-circle</title>
+      <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
     </span>
@@ -80,14 +72,12 @@ exports[`ClayStripe should render an stripe with classes 1`] = `
 <div class="alert alert-info fade alert-dismissible my-custom-class alert-fluid show" role="alert">
   <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-        <title>times</title>
+      <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-        <title>info-circle</title>
+      <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
     </span>
@@ -99,14 +89,12 @@ exports[`ClayStripe should render an stripe with id 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" id="myId" role="alert">
   <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-        <title>times</title>
+      <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-        <title>info-circle</title>
+      <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
     </span>
@@ -118,14 +106,12 @@ exports[`ClayStripe should render default markup 1`] = `
 <div class="alert alert-info fade alert-dismissible alert-fluid show" role="alert">
   <div class="container-fluid container-fluid-max-xl">
     <button class="btn close btn-unstyled" aria-label="close" type="button">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-        <title>times</title>
+      <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
       </svg>
     </button>
     <span class="alert-indicator">
-      <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-        <title>info-circle</title>
+      <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
         <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
       </svg>
     </span>

diff --git a/packages/clay-alert/src/__tests__/__snapshots__/ClayToast.js.snap b/packages/clay-alert/src/__tests__/__snapshots__/ClayToast.js.snap
@@ -3,14 +3,12 @@
 exports[`ClayToast should render a "danger" style toast 1`] = `
 <div class="alert alert-danger fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-      <title>times</title>
+    <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full" focusable="false">
-      <title>exclamation-full</title>
+    <svg class="lexicon-icon lexicon-icon-exclamation-full" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#exclamation-full"></use>
     </svg>
   </span>
@@ -20,14 +18,12 @@ exports[`ClayToast should render a "danger" style toast 1`] = `
 exports[`ClayToast should render a "success" style toast 1`] = `
 <div class="alert alert-success fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-      <title>times</title>
+    <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full" focusable="false">
-      <title>check-circle-full</title>
+    <svg class="lexicon-icon lexicon-icon-check-circle-full" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#check-circle-full"></use>
     </svg>
   </span>
@@ -37,14 +33,12 @@ exports[`ClayToast should render a "success" style toast 1`] = `
 exports[`ClayToast should render a "warning" style toast 1`] = `
 <div class="alert alert-warning fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-      <title>times</title>
+    <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full" focusable="false">
-      <title>warning-full</title>
+    <svg class="lexicon-icon lexicon-icon-warning-full" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#warning-full"></use>
     </svg>
   </span>
@@ -54,14 +48,12 @@ exports[`ClayToast should render a "warning" style toast 1`] = `
 exports[`ClayToast should render an "info" style toast 1`] = `
 <div class="alert alert-info fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-      <title>times</title>
+    <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-      <title>info-circle</title>
+    <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
@@ -71,14 +63,12 @@ exports[`ClayToast should render an "info" style toast 1`] = `
 exports[`ClayToast should render an toast with classes 1`] = `
 <div class="alert alert-info fade alert-dismissible my-custom-class show" role="alert">
   <button class="btn close btn-unstyled" aria-label="close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-      <title>times</title>
+    <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-      <title>info-circle</title>
+    <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
@@ -88,14 +78,12 @@ exports[`ClayToast should render an toast with classes 1`] = `
 exports[`ClayToast should render an toast with id 1`] = `
 <div class="alert alert-info fade alert-dismissible show" id="myId" role="alert">
   <button class="btn close btn-unstyled" aria-label="close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-      <title>times</title>
+    <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-      <title>info-circle</title>
+    <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>
@@ -105,14 +93,12 @@ exports[`ClayToast should render an toast with id 1`] = `
 exports[`ClayToast should render default markup 1`] = `
 <div class="alert alert-info fade alert-dismissible show" role="alert">
   <button class="btn close btn-unstyled" aria-label="close" type="button">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-times" focusable="false">
-      <title>times</title>
+    <svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#times"></use>
     </svg>
   </button>
   <span class="alert-indicator">
-    <svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle" focusable="false">
-      <title>info-circle</title>
+    <svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
       <use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#info-circle"></use>
     </svg>
   </span>