Merge branch 'master' into xulingzhihou/fixSelectA11y

mui · Sep 25, 2023 · 1acf350 · 1acf350
2 parents 1c43753 + fcf2f60
commit 1acf350
Show file tree

Hide file tree

Showing 105 changed files with 785 additions and 498 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -119,6 +119,7 @@ module.exports = {
     'material-ui/docgen-ignore-before-comment': 'error',
     'material-ui/rules-of-use-theme-variants': 'error',
     'material-ui/no-empty-box': 'error',
+    'material-ui/straight-quotes': 'error',
 
     'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
     'react-hooks/rules-of-hooks': 'error',

diff --git a/.gitignore b/.gitignore
@@ -30,6 +30,8 @@
 /test/regressions/screenshots
 /tmp
 .next
+# created by netlify dev (to perform local debug)
+.netlify
 build
 node_modules
 package-lock.json

diff --git a/benchmark/browser/index.js b/benchmark/browser/index.js
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import PropTypes from 'prop-types';
 import { logReactMetrics } from './utils';
 
 // Get all the scenarios
 const requirePerfScenarios = require.context('./scenarios', true, /(js|ts|tsx)$/);
 
 const rootEl = document.getElementById('root');
+const root = ReactDOMClient.createRoot(rootEl);
 
 const scenarioSuitePath = window.location.search.replace('?', '');
 
@@ -35,11 +36,10 @@ Measure.propTypes = {
   children: PropTypes.node,
 };
 
-ReactDOM.render(
+root.render(
   <React.Profiler id={scenarioSuitePath} onRender={logReactMetrics}>
     <Measure>
       <Component />
     </Measure>
   </React.Profiler>,
-  rootEl,
 );
diff --git a/crowdin.yml b/crowdin.yml
@@ -10,7 +10,7 @@ files:
       - /docs/src/pages/discover-more/backers/*
       - /docs/src/pages/discover-more/roadmap/*
       - /docs/src/pages/company/**/*
-      - /docs/src/pages/careers/**/*
+      - /docs/pages/careers/**/*
     translation: /%original_path%/%file_name%-%two_letters_code%.%file_extension%
   - source: /docs/data/**/*.md
     ignore:

diff --git a/docs/data/about/teamMembers.json b/docs/data/about/teamMembers.json
@@ -140,14 +140,6 @@
     "about": "Passionate about videogames and football",
     "github": "apedroferreira"
   },
-  {
-    "name": "Gerda Mostonaite",
-    "title": "Senior Designer - X",
-    "location": "New York, USA",
-    "locationCountry": "us",
-    "about": "🎨 Art & design, traveling, and asking questions",
-    "github": "gerdadesign"
-  },
   {
     "name": "Greg Abaoag",
     "title": "Executive Assistant",
@@ -204,15 +196,6 @@
     "about": "Open-source tinkerer",
     "github": "romgrk"
   },
-  {
-    "name": "Rich Bustos",
-    "title": "Developer Advocate",
-    "location": "Daly City, CA, USA",
-    "locationCountry": "us",
-    "about": "I enjoy collecting sports cards and practicing jiu-jitsu",
-    "github": "richbustos",
-    "twitter": "bustos_rich"
-  },
   {
     "name": "Victor Zanivan",
     "title": "Senior Designer - Core",

diff --git a/docs/data/base/components/focus-trap/BasicFocusTrap.js b/docs/data/base/components/focus-trap/BasicFocusTrap.js
@@ -6,7 +6,14 @@ export default function BasicFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>

diff --git a/docs/data/base/components/focus-trap/BasicFocusTrap.tsx b/docs/data/base/components/focus-trap/BasicFocusTrap.tsx
@@ -6,7 +6,14 @@ export default function BasicFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>

diff --git a/docs/data/base/components/focus-trap/DisableEnforceFocus.js b/docs/data/base/components/focus-trap/DisableEnforceFocus.js
@@ -6,7 +6,14 @@ export default function DisableEnforceFocus() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>

diff --git a/docs/data/base/components/focus-trap/DisableEnforceFocus.tsx b/docs/data/base/components/focus-trap/DisableEnforceFocus.tsx
@@ -6,7 +6,14 @@ export default function DisableEnforceFocus() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>

diff --git a/docs/data/base/components/focus-trap/LazyFocusTrap.js b/docs/data/base/components/focus-trap/LazyFocusTrap.js
@@ -6,7 +6,14 @@ export default function LazyFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>

diff --git a/docs/data/base/components/focus-trap/LazyFocusTrap.tsx b/docs/data/base/components/focus-trap/LazyFocusTrap.tsx
@@ -6,7 +6,14 @@ export default function LazyFocusTrap() {
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>

diff --git a/docs/data/base/components/focus-trap/PortalFocusTrap.js b/docs/data/base/components/focus-trap/PortalFocusTrap.js
@@ -8,7 +8,14 @@ export default function PortalFocusTrap() {
   const [container, setContainer] = React.useState(null);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>

diff --git a/docs/data/base/components/focus-trap/PortalFocusTrap.tsx b/docs/data/base/components/focus-trap/PortalFocusTrap.tsx
@@ -8,7 +8,14 @@ export default function PortalFocusTrap() {
   const [container, setContainer] = React.useState<HTMLElement | null>(null);
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        '& [tabindex]:focus': { outline: '1px solid green' },
+      }}
+    >
       <button type="button" onClick={() => setOpen(true)}>
         Open
       </button>

diff --git a/docs/data/joy/components/card/CardUsage.js b/docs/data/joy/components/card/CardUsage.js
@@ -63,7 +63,7 @@ export default function CardUsage() {
               Yosemite - Your Next Adventure
             </Typography>
             <Typography>
-              Yosemite National Park is in California’s Sierra Nevada mountains.
+              {"Yosemite National Park is in California's Sierra Nevada mountains."}
             </Typography>
             <CardActions>
               <Button variant="outlined" size="sm">

diff --git a/docs/data/joy/components/drawer/DrawerAnchor.js b/docs/data/joy/components/drawer/DrawerAnchor.js
@@ -51,13 +51,13 @@ export default function DrawerAnchor() {
   return (
     <React.Fragment>
       <ButtonGroup variant="outlined">
-        {['left', 'right', 'top', 'bottom'].map((anchor) => (
+        {['top', 'right', 'bottom', 'left'].map((anchor) => (
           <Button key={anchor} onClick={toggleDrawer(anchor, true)}>
             {anchor}
           </Button>
         ))}
       </ButtonGroup>
-      {['left', 'right', 'top', 'bottom'].map((anchor) => (
+      {['top', 'right', 'bottom', 'left'].map((anchor) => (
         <Drawer
           key={anchor}
           anchor={anchor}

diff --git a/docs/data/joy/components/drawer/DrawerAnchor.tsx b/docs/data/joy/components/drawer/DrawerAnchor.tsx
@@ -59,13 +59,13 @@ export default function DrawerAnchor() {
   return (
     <React.Fragment>
       <ButtonGroup variant="outlined">
-        {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
+        {(['top', 'right', 'bottom', 'left'] as const).map((anchor) => (
           <Button key={anchor} onClick={toggleDrawer(anchor, true)}>
             {anchor}
           </Button>
         ))}
       </ButtonGroup>
-      {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
+      {(['top', 'right', 'bottom', 'left'] as const).map((anchor) => (
         <Drawer
           key={anchor}
           anchor={anchor}

diff --git a/docs/data/joy/components/drawer/DrawerFilters.js b/docs/data/joy/components/drawer/DrawerFilters.js
@@ -71,9 +71,12 @@ export default function DrawerFilters() {
         >
           <DialogTitle>Filters</DialogTitle>
           <ModalClose />
+          <Divider sx={{ mt: 'auto' }} />
           <DialogContent sx={{ gap: 2 }}>
             <FormControl>
-              <FormLabel sx={{ typography: 'title-md' }}>Property Type</FormLabel>
+              <FormLabel sx={{ typography: 'title-md', fontWeight: 'bold' }}>
+                Property type
+              </FormLabel>
               <RadioGroup
                 value={type || ''}
                 onChange={(event) => {
@@ -145,28 +148,19 @@ export default function DrawerFilters() {
               </RadioGroup>
             </FormControl>
 
-            <Typography component="div" level="title-md">
+            <Typography level="title-md" fontWeight="bold" sx={{ mt: 1 }}>
               Amenities
             </Typography>
             <div role="group" aria-labelledby="rank">
               <List
                 orientation="horizontal"
                 size="sm"
-                wrap
                 sx={{
                   '--List-gap': '12px',
                   '--ListItem-radius': '20px',
                 }}
               >
-                {[
-                  'Wifi',
-                  'Washer',
-                  'Air Conditioner',
-                  'Kitchen',
-                  'Dryer',
-                  'Heating',
-                  'Dedicated Workspace',
-                ].map((item, index) => {
+                {['Wi-fi', 'Washer', 'A/C', 'Kitchen'].map((item, index) => {
                   const selected = amenities.includes(index);
                   return (
                     <ListItem key={item}>
@@ -212,34 +206,26 @@ export default function DrawerFilters() {
               </List>
             </div>
 
-            <Typography level="title-md" sx={{ mt: 1 }}>
-              Booking Options
+            <Typography level="title-md" fontWeight="bold" sx={{ mt: 2 }}>
+              Booking options
             </Typography>
             <FormControl orientation="horizontal">
               <Box sx={{ flex: 1, pr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Instant Book</FormLabel>
-                <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Listings you can book without waiting for host approval
-                </FormHelperText>
-              </Box>
-              <Switch />
-            </FormControl>
-
-            <FormControl orientation="horizontal">
-              <Box sx={{ flex: 1, mt: 1, mr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Self Check-in</FormLabel>
+                <FormLabel sx={{ typography: 'title-sm' }}>
+                  Instant booking
+                </FormLabel>
                 <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Easy access to the property when you arrive
+                  Listings that you can book without waiting for host approval.
                 </FormHelperText>
               </Box>
               <Switch />
             </FormControl>
 
             <FormControl orientation="horizontal">
               <Box sx={{ flex: 1, mt: 1, mr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Superhost</FormLabel>
+                <FormLabel sx={{ typography: 'title-sm' }}>Self check-in</FormLabel>
                 <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Stay with top tier recognized hosts
+                  Easy access to the property when you arrive.
                 </FormHelperText>
               </Box>
               <Switch />