@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.60

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -21,6 +21,8 @@ export interface MultipleFileUploadStatusProps extends React.HTMLProps<HTMLDivEl
   statusToggleText?: string;
   /** Icon to show in the status toggle */
   statusToggleIcon?: 'danger' | 'success' | 'inProgress' | React.ReactNode;
+  /** Adds an accessible label to the list of status items. */
+  'aria-label'?: string;
 }
 
 export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploadStatusProps> = ({
@@ -28,6 +30,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   className,
   statusToggleText,
   statusToggleIcon,
+  'aria-label': ariaLabel,
   ...props
 }: MultipleFileUploadStatusProps) => {
   const [icon, setIcon] = React.useState<React.ReactNode>();
@@ -63,7 +66,9 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   return (
     <div className={css(styles.multipleFileUploadStatus, className)} {...props}>
       <ExpandableSection toggleContent={toggle} isExpanded={isOpen} onToggle={toggleExpandableSection}>
-        <ul className="pf-c-multiple-file-upload__status-list">{children}</ul>
+        <ul className="pf-c-multiple-file-upload__status-list" role="list" aria-label={ariaLabel}>
+          {children}
+        </ul>
       </ExpandableSection>
     </div>
   );

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -18,12 +18,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 256 512"
-            width="1em"
           >
             <path
               d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -51,6 +49,7 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       >
         <ul
           class="pf-c-multiple-file-upload__status-list"
+          role="list"
         >
           Foo
         </ul>
@@ -78,12 +77,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 256 512"
-            width="1em"
           >
             <path
               d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -101,12 +98,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
             >
               <svg
                 aria-hidden="true"
+                class="pf-svg"
                 fill="currentColor"
-                height="1em"
                 role="img"
-                style="vertical-align: -0.125em;"
                 viewBox="0 0 1024 1024"
-                width="1em"
               >
                 <path
                   d="M513.417211,16.013668 L513.417211,112.013668 C513.406007,120.539653 520.082422,127.576718 528.597211,128.013668 C732.697211,136.513668 896.147211,305.013668 896.147211,511.343668 C896.147211,723.013668 724.007211,895.163668 512.417211,895.163668 C437.186239,895.277345 363.602574,873.135095 300.927211,831.523668 C294.58293,827.2982 286.138663,828.135095 280.747211,833.523668 L211.807211,902.353668 C208.502935,905.676185 206.82123,910.280199 207.20607,914.950237 C207.590911,919.620275 210.00361,923.886884 213.807211,926.623668 C300.709573,989.398037 405.213535,1023.13146 512.417211,1023.01398 C794.537211,1023.01398 1023.91724,793.433668 1023.91724,511.413668 C1024.00721,235.103668 804.007211,9.22366802 529.897211,0.00645736761 C525.571205,-0.116171039 521.377128,1.51204372 518.271915,4.52681369 C515.166702,7.54158367 513.415263,11.6857144 513.417211,16.013668 M97.1272107,212.923668 C64.2190689,258.479443 39.0698895,309.162997 22.6972107,362.923668 C21.2705092,367.756559 22.2039184,372.979173 25.2163356,377.018685 C28.2287528,381.058197 32.9681443,383.442545 38.0072107,383.453683 L139.407211,383.453683 C145.970195,383.46249 151.873012,379.462528 154.297211,373.363668 C164.307669,347.593304 177.068112,322.977652 192.357211,299.943668 C196.579666,293.633658 195.741339,285.216847 190.357211,279.863668 L121.497211,211.013668 C118.186635,207.662531 113.567544,205.940538 108.871166,206.30669 C104.174788,206.672841 99.8783994,209.089927 97.1272107,212.913668 M112.907211,511.433663 L17.0072107,511.433663 C12.679257,511.433663 8.5351263,513.183159 5.52035633,516.288373 C2.50558635,519.393586 0.877371594,523.587662 1.00721065,527.913668 C4.13104542,629.408217 37.6085847,727.635936 97.1172107,809.913668 C99.8539943,813.717268 104.120603,816.129968 108.790642,816.514809 C113.46068,816.899649 118.064693,815.217944 121.387211,811.913668 L190.217211,743.073668 C195.605784,737.682216 196.442679,729.237949 192.217211,722.893668 C153.520825,664.580171 131.611534,596.745437 128.887211,526.813668 C128.553964,518.220138 121.487197,511.427209 112.887211,511.433663"
@@ -125,6 +120,7 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       >
         <ul
           class="pf-c-multiple-file-upload__status-list"
+          role="list"
         >
           Foo
         </ul>
@@ -152,12 +148,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 256 512"
-            width="1em"
           >
             <path
               d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -187,6 +181,7 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       >
         <ul
           class="pf-c-multiple-file-upload__status-list"
+          role="list"
         >
           Foo
         </ul>
@@ -214,12 +209,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 256 512"
-            width="1em"
           >
             <path
               d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -247,6 +240,7 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       >
         <ul
           class="pf-c-multiple-file-upload__status-list"
+          role="list"
         >
           Foo
         </ul>

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -10,12 +10,10 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 384 512"
-        width="1em"
       >
         <path
           d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
@@ -99,12 +97,10 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -126,12 +122,10 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 384 512"
-        width="1em"
       >
         <path
           d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
@@ -212,12 +206,10 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -239,12 +231,10 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 384 512"
-        width="1em"
       >
         <path
           d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
@@ -327,12 +317,10 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -354,12 +342,10 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 384 512"
-        width="1em"
       >
         <path
           d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
@@ -442,12 +428,10 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -469,12 +453,10 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 384 512"
-        width="1em"
       >
         <path
           d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
@@ -528,12 +510,10 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
           >
             <svg
               aria-hidden="true"
+              class="pf-svg"
               fill="currentColor"
-              height="1em"
               role="img"
-              style="vertical-align: -0.125em;"
               viewBox="0 0 576 512"
-              width="1em"
             >
               <path
                 d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
@@ -574,12 +554,10 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -601,12 +579,10 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 384 512"
-        width="1em"
       >
         <path
           d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
@@ -689,12 +665,10 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -716,12 +690,10 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 384 512"
-        width="1em"
       >
         <path
           d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
@@ -802,12 +774,10 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
@@ -829,12 +799,10 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
-        height="1em"
         role="img"
-        style="vertical-align: -0.125em;"
         viewBox="0 0 384 512"
-        width="1em"
       >
         <path
           d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
@@ -917,12 +885,10 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
       >
         <svg
           aria-hidden="true"
+          class="pf-svg"
           fill="currentColor"
-          height="1em"
           role="img"
-          style="vertical-align: -0.125em;"
           viewBox="0 0 512 512"
-          width="1em"
         >
           <path
             d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -1,6 +1,7 @@
 ---
-id: File upload - multiple
+id: Multiple file upload
 section: components
+subsection: file-upload
 cssPrefix: pf-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
@@ -8,7 +9,7 @@ propComponents:
 
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
-File upload - multiple is able to:
+Multiple file upload is able to:
 
 - Accept one or more files via browse or drag-and-drop
 - Provide their data to you using file objects via the `onFileDrop` callback prop

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -34,7 +34,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   React.useEffect(() => {
     if (readFileData.length < currentFiles.length) {
       setStatusIcon('inProgress');
-    } else if (readFileData.every(file => file.loadResult === 'success')) {
+    } else if (readFileData.every((file) => file.loadResult === 'success')) {
       setStatusIcon('success');
     } else {
       setStatusIcon('danger');
@@ -44,13 +44,13 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   // remove files from both state arrays based on their name
   const removeFiles = (namesOfFilesToRemove: string[]) => {
     const newCurrentFiles = currentFiles.filter(
-      currentFile => !namesOfFilesToRemove.some(fileName => fileName === currentFile.name)
+      (currentFile) => !namesOfFilesToRemove.some((fileName) => fileName === currentFile.name)
     );
 
     setCurrentFiles(newCurrentFiles);
 
     const newReadFiles = readFileData.filter(
-      readFile => !namesOfFilesToRemove.some(fileName => fileName === readFile.fileName)
+      (readFile) => !namesOfFilesToRemove.some((fileName) => fileName === readFile.fileName)
     );
 
     setReadFileData(newReadFiles);
@@ -60,34 +60,34 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
    * only used in this example for demonstration purposes */
   const updateCurrentFiles = (files: File[]) => {
     if (fileUploadShouldFail) {
-      const corruptedFiles = files.map(file => ({ ...file, lastModified: ('foo' as unknown) as number }));
-      setCurrentFiles(prevFiles => [...prevFiles, ...corruptedFiles]);
+      const corruptedFiles = files.map((file) => ({ ...file, lastModified: 'foo' as unknown as number }));
+      setCurrentFiles((prevFiles) => [...prevFiles, ...corruptedFiles]);
     } else {
-      setCurrentFiles(prevFiles => [...prevFiles, ...files]);
+      setCurrentFiles((prevFiles) => [...prevFiles, ...files]);
     }
   };
 
   // callback that will be called by the react dropzone with the newly dropped file objects
   const handleFileDrop = (droppedFiles: File[]) => {
     // identify what, if any, files are re-uploads of already uploaded files
-    const currentFileNames = currentFiles.map(file => file.name);
-    const reUploads = droppedFiles.filter(droppedFile => currentFileNames.includes(droppedFile.name));
+    const currentFileNames = currentFiles.map((file) => file.name);
+    const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name));
 
     /** this promise chain is needed because if the file removal is done at the same time as the file adding react
      * won't realize that the status items for the re-uploaded files needs to be re-rendered */
     Promise.resolve()
-      .then(() => removeFiles(reUploads.map(file => file.name)))
+      .then(() => removeFiles(reUploads.map((file) => file.name)))
       .then(() => updateCurrentFiles(droppedFiles));
   };
 
   // callback called by the status item when a file is successfully read with the built-in file reader
   const handleReadSuccess = (data: string, file: File) => {
-    setReadFileData(prevReadFiles => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);
+    setReadFileData((prevReadFiles) => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);
   };
 
   // callback called by the status item when a file encounters an error while being read with the built-in file reader
   const handleReadFail = (error: DOMException, file: File) => {
-    setReadFileData(prevReadFiles => [
+    setReadFileData((prevReadFiles) => [
       ...prevReadFiles,
       { loadError: error, fileName: file.name, loadResult: 'danger' }
     ]);
@@ -95,7 +95,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
 
   // add helper text to a status item showing any error encountered during the file reading process
   const createHelperText = (file: File) => {
-    const fileResult = readFileData.find(readFile => readFile.fileName === file.name);
+    const fileResult = readFileData.find((readFile) => readFile.fileName === file.name);
     if (fileResult?.loadError) {
       return (
         <HelperText isLiveRegion>
@@ -105,7 +105,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     }
   };
 
-  const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;
+  const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length;
 
   return (
     <>
@@ -131,8 +131,9 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
           <MultipleFileUploadStatus
             statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
             statusToggleIcon={statusIcon}
+            aria-label="Current uploads"
           >
-            {currentFiles.map(file => (
+            {currentFiles.map((file) => (
               <MultipleFileUploadStatusItem
                 file={file}
                 key={file.name}

package/src/components/Nav/Nav.tsx

@@ -61,6 +61,7 @@ export interface NavContextProps {
   isHorizontal?: boolean;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
+  navRef?: React.RefObject<HTMLElement>;
 }
 export const navContextDefaults = {};
 export const NavContext = React.createContext<NavContextProps>(navContextDefaults);
@@ -83,6 +84,8 @@ export class Nav extends React.Component<
     flyoutRef: null as React.Ref<HTMLLIElement>
   };
 
+  navRef = React.createRef<HTMLElement>();
+
   // Callback from NavItem
   onSelect(
     event: React.FormEvent<HTMLInputElement>,
@@ -150,7 +153,8 @@ export class Nav extends React.Component<
           updateIsScrollable: (isScrollable: boolean) => this.setState({ isScrollable }),
           isHorizontal: ['horizontal', 'tertiary', 'horizontal-subnav'].includes(variant),
           flyoutRef: this.state.flyoutRef,
-          setFlyoutRef: flyoutRef => this.setState({ flyoutRef })
+          setFlyoutRef: flyoutRef => this.setState({ flyoutRef }),
+          navRef: this.navRef
         }}
       >
         <nav
@@ -164,6 +168,7 @@ export class Nav extends React.Component<
             className
           )}
           aria-label={ariaLabel || (['tertiary', 'horizontal-subnav'].includes(variant) ? 'Local' : 'Global')}
+          ref={this.navRef}
           {...getOUIAProps(Nav.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           {...props}
         >

package/src/components/Nav/NavExpandable.tsx

@@ -29,7 +29,7 @@ export interface NavExpandableProps
   /** Identifier to use for the section aria label */
   id?: string;
   /** allow consumer to optionally override this callback and manage expand state externally. if passed will not call Nav's onToggle. */
-  onExpand?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void;
+  onExpand?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, val: boolean) => void;
   /** Additional props added to the NavExpandable <button> */
   buttonProps?: any;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -71,7 +71,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
   }
 
   onExpand = (
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     onToggle: (
       event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
       groupId: string | number,
@@ -80,11 +80,11 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
   ) => {
     const { expandedState } = this.state;
     if (this.props.onExpand) {
-      this.props.onExpand(e, !expandedState);
+      this.props.onExpand(event, !expandedState);
     } else {
-      this.setState(prevState => ({ expandedState: !prevState.expandedState }));
+      this.setState((prevState) => ({ expandedState: !prevState.expandedState }));
       const { groupId } = this.props;
-      onToggle(e, groupId, !expandedState);
+      onToggle(event, groupId, !expandedState);
     }
   };
 
@@ -112,7 +112,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
 
     return (
       <NavContext.Consumer>
-        {context => (
+        {(context) => (
           <li
             className={css(
               styles.navItem,
@@ -129,7 +129,7 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
                 <button
                   className={styles.navLink}
                   id={srText ? null : this.id}
-                  onClick={e => this.onExpand(e, context.onToggle)}
+                  onClick={(event) => this.onExpand(event, context.onToggle)}
                   aria-expanded={expandedState}
                   tabIndex={isNavOpen ? null : -1}
                   {...buttonProps}
@@ -149,7 +149,9 @@ export class NavExpandable extends React.Component<NavExpandableProps, NavExpand
                   {srText}
                 </h2>
               )}
-              <ul className={css(styles.navList)}>{children}</ul>
+              <ul className={css(styles.navList)} role="list">
+                {children}
+              </ul>
             </section>
           </li>
         )}

package/src/components/Nav/NavGroup.tsx

@@ -35,7 +35,9 @@ export const NavGroup: React.FunctionComponent<NavGroupProps> = ({
           {title}
         </h2>
       )}
-      <ul className={css(styles.navList, className)}>{children}</ul>
+      <ul className={css(styles.navList, className)} role="list">
+        {children}
+      </ul>
     </section>
   );
 };

package/src/components/Nav/NavItem.tsx

@@ -58,7 +58,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   zIndex = 9999,
   ...props
 }: NavItemProps) => {
-  const { flyoutRef, setFlyoutRef } = React.useContext(NavContext);
+  const { flyoutRef, setFlyoutRef, navRef } = React.useContext(NavContext);
   const { isNavOpen } = React.useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const [isHovered, setIsHovered] = React.useState(false);
@@ -145,7 +145,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       if (flyoutVisible) {
         const flyoutItems = Array.from(
           (popperRef.current as HTMLElement).getElementsByTagName('UL')[0].children
-        ).filter(el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+        ).filter((el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
         (flyoutItems[0].firstChild as HTMLElement).focus();
       } else {
         flyoutTarget.focus();
@@ -221,16 +221,18 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
   const flyoutPopper = (
     <Popper
-      reference={ref}
+      triggerRef={ref}
       popper={
         <div ref={popperRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
           {flyout}
         </div>
       }
+      popperRef={popperRef}
       placement="right-start"
       isVisible={flyoutVisible}
       onDocumentKeyDown={handleFlyout}
       zIndex={zIndex}
+      appendTo={navRef?.current}
     />
   );
 
@@ -243,7 +245,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         {...ouiaProps}
       >
         <NavContext.Consumer>
-          {context =>
+          {(context) =>
             React.isValidElement(children)
               ? renderClonedChild(context, children as React.ReactElement)
               : renderDefaultLink(context)

package/src/components/Nav/NavList.tsx

@@ -125,6 +125,7 @@ export class NavList extends React.Component<NavListProps> {
                   ref={this.navList}
                   className={css(styles.navList, className)}
                   onScroll={this.handleScrollButtons}
+                  role="list"
                   {...props}
                 >
                   {children}

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -21,12 +21,10 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
         >
           <svg
             aria-hidden="true"
+            class="pf-svg"
             fill="currentColor"
-            height="1em"
             role="img"
-            style="vertical-align: -0.125em;"
             viewBox="0 0 256 512"
-            width="1em"
           >
             <path
               d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
@@ -48,6 +46,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       </h2>
       <ul
         class="pf-c-nav__list"
+        role="list"
       />
     </section>
   </li>