qpp-style 9.34.6 → 9.34.7-beta.0

package/components/Footer/FooterUI.jsx

@@ -98,6 +98,7 @@ const FooterUI = () => (
                 1-866-288-8292 (TRS: 711)
                 <span className="footer-trs-infotip">
                   <InfoTip
+                    aria-labelledby="footer-trs-infotip"
                     ariaLabel="TRS Communications Assistant Information"
                     label={infoTipLabel}
                   />

package/components/Infotip/Infotip.jsx

@@ -37,7 +37,7 @@ const touchHandlers = {
  * Tooltip with styled information icon
  */
 const Infotip = ({ ariaLabel, label, lightIcon, ...props }) => (
-  <InfotipContent label={label} {...props}>
+  <InfotipContent label={label} id="info-tip" {...props}>
     <button
       type="button"
       aria-label={ariaLabel}

package/components/Infotip/InfotipContent.jsx

@@ -10,7 +10,7 @@ import {
 const TEXT_COLOR = "#FFF";
 const BACKGROUND_COLOR = "#333";
 
-const InfotipContent = ({ children, label }) => {
+const InfotipContent = ({ children, label, id }) => {
   const tooltip = useTooltipState();
 
   const cssStyles = {
@@ -27,6 +27,7 @@ const InfotipContent = ({ children, label }) => {
         {children}
       </TooltipAnchor>
       <TooltipAriaKit
+        aria-labelledby={id}
         state={tooltip}
         className="tooltip-content"
         style={cssStyles}
@@ -41,6 +42,7 @@ const InfotipContent = ({ children, label }) => {
 InfotipContent.propTypes = {
   children: PropTypes.node.isRequired,
   label: PropTypes.node.isRequired,
+  id: PropTypes.node.isRequired,
 };
 
 export default InfotipContent;