I was having an accessibility issue when using Material-UI with React. Specifically when placing a Menu on a Drawer. Essentially the normal behaviour of a Menu is to highlight the top MenuItem. This behaviour is different if that menu is placed on a Material UI Drawer.
I have recreated the problem here using just the example Material-UI Menu and Drawer:
https://codesandbox.io/s/material-ui-menu-and-drawer-accessibility-issues-xjj3h?file=/src/App.js
The following images show the difference between the two menus when opened. I am using the chromevox extension while testing:
A normal menu when using chromevox to show accessability:
A menu when it is placed on a material UI drawer:
Would anyone be able to point out if this is an error in my code or if perhaps there are any workarounds? Was going to raise this as a new github issue but felt it was worth asking the question here first. :)
By default, the drawer enforces (so long as it is open) that focus stays within itself. So when the menu opens and grabs focus, the drawer notices that it lost focus and it grabs it back.
There are two options for fixing this:
You can turn off this drawer behavior by specifying the disableEnforceFocus prop (example here).
You can specify the disablePortal prop on the menu (example here). This will cause the menu to be a descendant of the drawer in the DOM (by default the menu uses portals and is added as a child of the <body> element), so the drawer will not try to "take back" the focus, because when focus is in the menu it will still be within the drawer.
I would recommend option 2 since the drawer's focus enforcement is generally a good thing from an accessibility standpoint.
Related
I use React MUI and some components disable my draggables.
I have put draggables on my page, that works perfectly.
When my draggable is dragged, I change some nodes in the page.
I'm on React MUI and I use tooltips, modals and menus on that page. After opening one of them and close it, no draggables can be dragged anymore. I mean that changing some nodes in the page makes that the drag ends directly.
Is there an event inserted or something like that that ends the drag action if an element is changing in the page ?
I found a workaround.
Actually this happens on Chrome and Safari only. Adding a setTimeout of 10ms before changing the DOM makes the job.
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
With MUI 5.0.2, When all the IconButton-s in a ButtonGroup go on the same side, the hover background shape will change.
And other elements also affects this (a Button with/without href property on one side)
It is said in another question by #Ryan Cogswell, that the styling for the border is using :not(:last-of-type) in the selector. This implies that MUI is using class on and , which seemes very slopy to me.
Is this is a bug?
I hosted a minimal environment with GitHub Pages. The question is shown on the first and forth chapter.
(all pictures shown here are showing with on hover)
Button with href
Button without href
Button without href on hover
Also I made a related issue on official repo, and in my Learning note
My issue stems from wishing to have a mobile phone rendered in the page, which mimics that of an actual phone. I would like to use components from Material UI such as AppBar and Dialog, however they do not stay confined to the container of the phone, and instead still show in the entire browser window.
When I use a Dialog Component however, it's still relative to the actual browser viewport, and not that of the "phone", such as the following:
I would like it to do what is seen in the picture below, without using an IFrame.
Is there a way I can set an anchor for the components - or at least force them to treat a specific element as their boundary? Thanks.
For those wondering if this is resolved, the solution was to roll my own Dialog and Backdrop Components with Paper, and Box components.
A ref was passed into a Box component which surrounds the entire "Phone App", and it's current Element is passed into a Mui Portal's container property.
This allows for the container of the Custom "Dialog" to be the container I wished to have things bounded by.
First, the nomenclature here is somewhat vague. I will be explicitly using "collapse" to refer to react-bootstrap's behavior of collapsing the Navbar on smaller viewport widths, and "expand" in reference to toggling a collapsed menu into and out of view.
My goal is to create a navigation bar that, while collapsed (mobile), uses the whole Navbar as a toggle to expand the menu. On wider displays (not collapsed) clicking the Navbar should have no action. For this, I need to know if the Navbar has collapsed. (Note that Navbar's expanded prop doesn't cut it here.)
The obvious solution is to modify behavior based on viewport width. However, I'd like not to copy bootstrap's breakpoint widths, but rather refer to the actual state of the Navbar. That would allow for using Navbar's expand prop to change breakpoint setting, etc. Is it possible to access this information in a reasonable manner?
Thanks, all!