fix(Tabs): keep selected tab in view #7045
Conversation
|
Deploy preview for carbon-elements ready! Built with commit 2011d31 |
|
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit 2011d31 https://deploy-preview-7045--carbon-components-react.netlify.app |
|
@emyarod random question, is there a chance that this |
|
no it shouldn't be scrolled in the y direction (related #6974) edit: I am assuming you are not referring to the default behavior where changing focus also scrolls the focused element into view |
|
Seeing an issue where you are not able to click to scroll to other tabs since it seems like it wants to keep the focus on the first tab
|
|
@tw15egan I'm unable to replicate that issue. Can you provide more details about how you're getting that to occur? |
|
Seeing the same bug as @tw15egan on Firefox latest Windows 10 |
emyarod
force-pushed
the
6917-scroll-to-selected-tab-on-mount
branch
from
18103e2
to
cd0702d
Compare
|
can you take another look with the latest PR changes? |
emyarod
force-pushed
the
6917-scroll-to-selected-tab-on-mount
branch
2 times, most recently
from
a093c0c
to
15b43b8
Compare
emyarod
force-pushed
the
6917-scroll-to-selected-tab-on-mount
branch
from
15b43b8
to
f5b1cec
Compare
|
bump @dakahn based on comment above |
|
Scrolling works swell! 👍 |
* fix(Tab): update role * fix(Tab): place aria attributes on inner anchor instead of li * test(Tabs): update tab role test * fix(Tab): convert anchor to button * test(Tabs): update inner anchor tests * chore: update snapshots * test(Tab): update test descriptions * test(Tab): remove obsolete test * fix(Tab): remove tabIndex from wrapper li * fix(Tab): add role to button * fix(Tab): deprecate required href prop * fix(TabContent): remove `aria-live` and `aria-hidden` * chore: update snapshots * test(Tab): update test description * chore(Tab): deprecate tabIndex prop * docs(Tabs): add tabpanel role to custom tab content wrapper * chore: update snapshots * fix(Tabs): activate scroll buttons with LMB only * fix(Tabs): prevent keyboard focus of scroll buttons * fix(Tabs): prevent ul from being focusable * refactor(Tabs): carry over changes from #7045 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Closes #6917
This PR makes sure the selected tab in the component state is visible (component scrolls to the selected tab) when the component updates
Changelog
Changed
Testing / Reviewing
Change the selected tab and confirm that the tab is in view on initial render in addition to subsequent renders