Tab Panel Refinements #6477
Merged
Tab Panel Refinements #6477
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… so far, fixing alignment on misaligned panels
Jskobos
reviewed
May 29, 2020
johnwcallahan
approved these changes
May 29, 2020
|
I've updated this to remove the manual focus that was occurring for those headers. |
acourdavault
added
the
Accessibility
WilkinsKa1
pushed a commit
that referenced
this pull request
Jul 16, 2020
* removing old a11y attributes from tabPanels that have been refactored so far, fixing alignment on misaligned panels * removing focus if header is rendered as an h2
WilkinsKa1
pushed a commit
that referenced
this pull request
Aug 5, 2020
* removing old a11y attributes from tabPanels that have been refactored so far, fixing alignment on misaligned panels * removing focus if header is rendered as an h2
WilkinsKa1
pushed a commit
that referenced
this pull request
Aug 7, 2020
* Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Tab Refactor: Account Landing, OBJ Landing, FW Details (#6375) * updating account landing, FW detail and OBJ landing to new linked tab pattern * fixing index for key issue * Tab Refactor: LKE Details, Support Tickets Landing, Linode Clone Landing (#6378) * updating to use reach tab pattern for LKE detail, tickets landing, and clone landing * remove handleTabChange * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * Managed Tabs Refactor (#6462) * refactoring managed tabs to use reach * fixing alignment of managed tabs * update to using SafeTabPanel * Tab Panel Refinements (#6477) * removing old a11y attributes from tabPanels that have been refactored so far, fixing alignment on misaligned panels * removing focus if header is rendered as an h2 * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Tab Refactor: Account Landing, OBJ Landing, FW Details (#6375) * updating account landing, FW detail and OBJ landing to new linked tab pattern * fixing index for key issue * Tab Refactor: LKE Details, Support Tickets Landing, Linode Clone Landing (#6378) * updating to use reach tab pattern for LKE detail, tickets landing, and clone landing * remove handleTabChange * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * [Tabs] M3-4119: Refactor Tabs - Lish (#6467) * Refactor to Reach UI * Add keyboardActivation prop * Working on focusing on tabs * Add ref to tabs * removing redundant a11y attributes * Switch to SafeTabPanel * Move styles to Lish and get rid of ref * Remove TabPanel import Co-authored-by: Kayla Wilkins <kwilkins@linode.com> * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Tab Refactor: Account Landing, OBJ Landing, FW Details (#6375) * updating account landing, FW detail and OBJ landing to new linked tab pattern * fixing index for key issue * Tab Refactor: LKE Details, Support Tickets Landing, Linode Clone Landing (#6378) * updating to use reach tab pattern for LKE detail, tickets landing, and clone landing * remove handleTabChange * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * Managed Tabs Refactor (#6462) * refactoring managed tabs to use reach * fixing alignment of managed tabs * update to using SafeTabPanel * Tab Panel Refinements (#6477) * removing old a11y attributes from tabPanels that have been refactored so far, fixing alignment on misaligned panels * removing focus if header is rendered as an h2 * fixing tabs * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Tab Refactor: Account Landing, OBJ Landing, FW Details (#6375) * updating account landing, FW detail and OBJ landing to new linked tab pattern * fixing index for key issue * Tab Refactor: LKE Details, Support Tickets Landing, Linode Clone Landing (#6378) * updating to use reach tab pattern for LKE detail, tickets landing, and clone landing * remove handleTabChange * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * M3-4128 Refactor User details, NodeBalancer details, Profile, Longview landing and details (#6423) * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing dupe props issue * changing tab patterns for user details, Nodebalancer details, and profile + cleanup * attempting to fix oauth and NB issues * removing stray again after branch cleanup debacle * adding new SafeTabPanel abstraction to load content only on active tab selection instead of all * longview POC with safe tab panel * adding longview tabs with SafeTabPanel to fix graphs loading issue * checking for possible indexes based on existence of apps for a LV client * Add comment to SafeTabPanel Co-authored-by: John Callahan <johnwcallahan@gmail.com> * Managed Tabs Refactor (#6462) * refactoring managed tabs to use reach * fixing alignment of managed tabs * update to using SafeTabPanel * Tab Panel Refinements (#6477) * removing old a11y attributes from tabPanels that have been refactored so far, fixing alignment on misaligned panels * removing focus if header is rendered as an h2 * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * Refactor Tabbed Panel Component & Linode Details Navigation (#6331) * adding in arrows + functionality, beginnings of how to dynamically hide them * converting to a FC, adding in some state mgt for mobile buttons * remove mui mobile buttons * beginning to convert a tab nav with bare bones reach * using as for tabpanels so path routing works * using as for tabpanel prop and applying path * adding defaultIndex, removing old aria cruff from settings * fixing settings issue * fixing linting issues * loading css in app instead of each individual reach component * adding documentation for these tab patterns, referencing in contributing doc * Convert test to RTL and resolve key warnings * Tweak tab keys * Addressing PR feedback part 1 * fixing focus outline cutoff issue Co-authored-by: Jared Kobos <jaredkobos@gmail.com> * [Tabs] M3-4119: Refactor Tabs - Lish (#6467) * Refactor to Reach UI * Add keyboardActivation prop * Working on focusing on tabs * Add ref to tabs * removing redundant a11y attributes * Switch to SafeTabPanel * Move styles to Lish and get rid of ref * Remove TabPanel import Co-authored-by: Kayla Wilkins <kwilkins@linode.com> * fixing tabs * Linode Create Tab Refactor (#6661) * In progress * Extract add-on panel * Extract label/tags and password * Clean up code * Moving checkout bar over in-progress * Moving on to Marketplace * temp * temp * commenting out repeating code, putting one checkoout bar + functions in linode create * Stackscripts tab contains account and community * Cleanup * Working on ImageSelect * Fix ImageSelect issue * Remove console * Cleanup * More cleanup * Convert FromAppsContent to FC * Start adding types back * Fix merge conflict * adjustments to type interfaces for create refactor to fix prop errors * fixing tab routing issue and updating marketplace to one click for marketing match * adjustments to linking and conditional wrapping of components for clone and backup * adjustment to be able to create from clone * Clean up fromApps and fromStackscript * Clean up props and in-progress converting classes to FC * Fix routing issue * Minor fixes * adjustemnt to type definiton, props cleanup for LinodeCreate * adding it all back * fixing props issue * Addressing PR feeddback part 1 * adding missing error notice * Adding disabled notice top level in linode create * fixing broken tests, removing obsolete ones * reverting test back to RTL * Adding general error to create, adjusting individual error handling for FromContent Co-authored-by: Tiffany Wong <wong.tyan@gmail.com> * removing obsolete subtabs file * fixing build bc of sentry version * updating CMR tab components Co-authored-by: Jared Kobos <jaredkobos@gmail.com> Co-authored-by: John Callahan <johnwcallahan@gmail.com> Co-authored-by: Tiffany Wong <7692354+tiffwong@users.noreply.github.com> Co-authored-by: Tiffany Wong <wong.tyan@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
• Updating Linode details to use SafeTabPanel
• Updating alignment for tabPanels where margin/padding was being added (Linode details/Summary, Networking, Firewall Rules landing)
• Removing old a11y attributes from refactored panels (Reach handles this instead so they're duplicates)
Type of Change