qpp-style 9.34.5 → 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/Header/HeaderUI.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import axios from "axios";
 import HeaderAccountMenu from "./HeaderAccountMenu.jsx";
 import HeaderCancel from "./HeaderCancel.jsx";
 import HeaderContainer from "./HeaderContainer";
@@ -49,7 +48,8 @@ const HeaderUI = ({
     let navMenuItems;
     async function getHeaderConfig() {
       try {
-        const { data } = await axios.get(`${origin}/config/header`);
+        const response = await fetch(`${origin}/config/header`);
+        const data = await response.json();
         navMenuItems = data.data;
       } catch (error) {
         navMenuItems = { content: defaultContent };

package/components/Header/ImpersonatorBanner.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import cookie from "cookie";
-import axios from "axios";
 import { CloseIcon } from "../../lib/SvgComponents";
 import { TextButton } from "../Button";
 import {
@@ -37,7 +36,7 @@ const ImpersonatorBanner = () => {
     "qpp-u-color--gray-80",
   ].join(" ");
 
-  const onClick = () => {
+  const onClick = async () => {
     const fn = () => {
       deleteImpersonatedUser({
         qpp_impersonated_user: user,
@@ -51,14 +50,21 @@ const ImpersonatorBanner = () => {
       revertQppHasAuthsCookie();
       window.location.href = viewingToolUrl;
     };
-    return axios
-      .delete("/api/auth/helpdesk/view", {
+    try {
+      const { origin } = window.location;
+      const url = `${origin}/api/auth/helpdesk/view`;
+      const options = {
+        method: "DELETE",
         headers: {
           Accept: "application/vnd.qpp.cms.gov.v2+json",
           Authorization: `Bearer ${token}`,
         },
-      })
-      .then(fn, fn);
+      };
+      await fetch(url, options);
+      fn();
+    } catch (error) {
+      fn();
+    }
   };
 
   return (

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;

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
-import axios from "axios";
 
 import { setSideNavExpanded, isSideNavExpanded } from "../helpers";
 import { LevelOneContent } from "../Content";
@@ -93,7 +92,8 @@ const SideNavUI = ({
 
     async function getSideNavConfig() {
       try {
-        const { data } = await axios.get(`${origin}/config/side-navigation`);
+        const response = await fetch(`${origin}/config/side-navigation`);
+        const data = await response.json();
         sideNavMenuItems = data.markup;
       } catch (error) {
         if (isRunningLocally) {

package/components/hooks/useGetConfig.js

@@ -1,5 +1,4 @@
 import React from "react";
-import axios from "axios";
 import { useState, useEffect } from "react";
 
 // The content is populated with the following priority order:
@@ -29,9 +28,9 @@ const useGetConfig = ({
       setResult(storageContent);
     } else {
       const origin = window.location.origin;
-      axios
-        .get(`${origin}${url}`)
-        .then(({ data: { data = {} } }) => {
+      fetch(`${origin}${url}`)
+        .then((response) => response.json())
+        .then(({ data = {} }) => {
           const expiration = new Date().valueOf() + timeout * 60 * 1000;
           const storageItem = {
             expiration,