chore(clearbutton): add aria-labels

Author: mlogsdon18

components/clearbutton/metadata/clearbutton.yml

@@ -25,7 +25,7 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
 
-          <button class="spectrum-ClearButton spectrum-ClearButton--sizeS">
+          <button class="spectrum-ClearButton spectrum-ClearButton--sizeS" aria-label="Clear textfield">
             <div class="spectrum-ClearButton-fill">
               <svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Cross75" />
@@ -36,7 +36,7 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
 
-          <button class="spectrum-ClearButton spectrum-ClearButton--sizeM">
+          <button class="spectrum-ClearButton spectrum-ClearButton--sizeM" aria-label="Clear textfield">
             <div class="spectrum-ClearButton-fill">
               <svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Cross100" />
@@ -48,7 +48,7 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
 
-          <button class="spectrum-ClearButton spectrum-ClearButton--sizeL">
+          <button class="spectrum-ClearButton spectrum-ClearButton--sizeL" aria-label="Clear textfield">
             <div class="spectrum-ClearButton-fill">
               <svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Cross200" />
@@ -60,7 +60,7 @@ examples:
         <div class="spectrum-Examples-item">
           <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
 
-          <button class="spectrum-ClearButton spectrum-ClearButton--sizeXL">
+          <button class="spectrum-ClearButton spectrum-ClearButton--sizeXL" aria-label="Clear textfield">
             <div class="spectrum-ClearButton-fill">
               <svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-Cross300" />
@@ -82,7 +82,7 @@ examples:
   - id: clearbutton-quiet
     name: Quiet
     markup: |
-      <button class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-ClearButton--quiet">
+      <button class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-ClearButton--quiet" aria-label="Clear textfield">
         <div class="spectrum-ClearButton-fill">
           <svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-Cross100" />
@@ -93,7 +93,7 @@ examples:
     name: Overbackground
     markup: |
       <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
-        <button class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-ClearButton--overBackground">
+        <button class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-ClearButton--overBackground" aria-label="Clear textfield">
           <div class="spectrum-ClearButton-fill">
             <svg class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-Cross100" />