Comments (5)
for the focus indicator issue at least, suggest adding some :focus-visible
styles (so they won't get in the way of mouse/touch users, but will show when keyboard users navigate). possibly, this is something more fundamental that should be added to the default styles for this component itself.
from react-tabs.
having played around with this some more, it seems :focus-visible
won't work here - the styles show even for mouse clicks. I suspect, though haven't jumped into the underlying code of the component, that it's because the <li>
s are completely ripped out of the document and then regenerated, and focus is then programmatically moved to the newly selected tab ... which the browser then counts as being a case where :focus-visible
would show.
from react-tabs.
Hey Patrick, thanks for the research! Kudos for posting a video with your issue. Is this something you'd like to create a PR for? I'm not sure if it's just an issue with the docs; it could be that the library itself has some issues with focus management (it's one of the more complex pieces of code in this repo if I recall correctly).
from react-tabs.
the first part (focus being swallowed by the textarea that's been extended to be a full code highlighted/editor, and the textarea also receiving focus even when not visible) is definitely an issue with the docs/demo.
the lack of focus indication, on the other hand, seems to be fundamentally a react-tabs problem.
I can have a look at both, but can't make promises on when/if I manage to crack those two problems. we'll see...
from react-tabs.
had another closer look, and purely for the demo/example, the issue of the code editor swallowing Tab
seems to be something that was fixed upstream in https://github.com/satya164/react-simple-code-editor - using the slightly unusual Ctrl+M
shortcut, I can switch tab capture off and proceed out of the code editor. Suggest this should be provided as part of the hint text, so users know (as it's not a common thing/pattern). I can make a small PR just for this aspect.
the fact that the code editor is focusable even when not shown is due to the styles used to hide the editor only visually hiding, rather than fully using display:none
. This is likely because display:none
can't be animated/transitioned. So you'd either want to add display:none
when it's closed, and quickly change to display:block
just before it starts animating (and vice-versa, once the closing animation finished, swapping it back from display:block
to display:none
). alternatively, if there's some way to make the editor non-focusable when not visible - for instance having disabled
attribute on the <textarea>
- and then making it focusable when visible - removing disabled
- that would solve this as well, and would probably be easier than timed style changes. this is the part where my weak react skills unfortunately won't help, so won't be able to tackle this.
as for the focus indication, i can propose something in a PR. however, my initial idea of using :focus-visible
to only have it for keyboard users won't work, as mentioned above (due to the way the whole <li>
is removed, and then re-added to the DOM and focus programmatically moved, the :focus-visible
heuristic in the browser is overridden and it will always show, even as a result of a mouse click or touch tap). so it'll have to be some kind of focus indication that will also show on click/tap i'm afraid. but that can probably be hashed out in the separate PR.
from react-tabs.
Related Issues (20)
- Property 'tabsRole' is missing in type 'ReactElement<any, any>' but required in type 'ReactTabsFunctionComponent<TabProps> HOT 1
- No content after refresh HOT 5
- about prop types
- UncontrolledTabs.js Eror: Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.useId) is not a function HOT 5
- React-tabs closes React-select (onclick)
- Issues when implementing the same Tabs for different TabPanels HOT 2
- export 'useId' (imported as 'useId') was not found in 'react' HOT 2
- Possible to disable using TabPanel when in controlled mode? HOT 1
- How I can fix this error in react version dependency? HOT 2
- Components Rendering Issue HOT 3
- typo
- React-tabs dropped clicks on tab switch when inspecting on mobile device HOT 1
- defaultProps warning - Support for defaultProps will be removed from function component will be removed HOT 5
- Could not find a declaration file for module 'react-tabs' on v4.2.1 HOT 2
- Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelines HOT 3
- Support hiding of all TabPanels HOT 1
- How can I stop re-rendering in React when switching between tabs? HOT 7
- How to set the tab container's width to be the width of the widest tab? HOT 1
- Errors when using react-tabs in an Astro page
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-tabs.