diff --git a/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx b/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx
index df64c62bda8..64395a8c59d 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx
@@ -13,7 +13,7 @@ import {
 
 export const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
index e792e32a058..803d1d92aab 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBasic.tsx
@@ -14,7 +14,7 @@ import {
 
 export const DrawerBasic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
index a9ceb86666e..2df988d7740 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBasicInline.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx
index dda20e8229c..fdea78cbfe7 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBasicPill.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicPill: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
index 74eb0eb514f..0401fa35331 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerBreakpoint.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerBreakpoint: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
index 9574c6a5360..071cd9a3244 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
index c1ed8445748..ffe46a2b9e1 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerInlinePanelStart.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerInlinePanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
index 218f7b44889..9a06d057e3f 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
index 5f28bd3e451..afabeb0f9df 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
index c89f7f13e1f..1b765555597 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelBottom.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
index 852b9eff4c1..6c3460ace2f 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelEnd.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
index 60c8cc515e0..a1acde0be10 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPanelStart.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx
index 2e3a42c2c81..16ae9532739 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerPillInline.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicPill: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
index 252c683ce33..939fcf4a441 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtEnd.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
index b5d2ef2da8f..32e56665aa0 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableAtStart.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
index 86da473b620..ecce2daa1ca 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnBottom.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
index e4dd4a57bd5..16299b6db8e 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerResizableOnInline.tsx
@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
diff --git a/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
index 773d693207b..2f5229223cc 100644
--- a/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
+++ b/packages/react-core/src/components/Drawer/examples/DrawerStatic.tsx
@@ -13,7 +13,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
 
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();