Align DSR Split View to SLDS

[kwilloughby-sf]

Interaction Updates

• [Accessibility] Add instructions to the first item in the list to indicate Shift + Tab will take the user back to the list after selecting an item.
• Do not change the information on the right unless the user clicks on an item or presses enter
• The user should be able to navigate the items using the up/down arrow keys which should move a 1px blue border up/down
• The selected item should only have a 1px blue border if the use is focused on that item
• If the user is focused on another item the selected item should be indicated by the 4px blue box shadow
• Allow the Split View to be collapsed/expanded by clicking on the small triangle (triangle should change direction based on collapsed/expanded state...see SLDS)

Visual Updates

• Use <header class=slds-split-view__header"> instead of <div class="slds-page-header slds-page-header_object-home slds-split-view__header slds-has-bottom-magnet"> and update code in <header> to match the SLDS component
• Remove slds-scrollable_none from <div class="slds-grid slds-grid_vertical slds-scrollable_none"> and update code in <div> to match the SLDS component
• Make sure the Split View doesn't change width when selecting different items (when I had the DSR window smaller the width shifted as I used the arrow keys/clicked on an item)\

In general, the markup should match https://www.lightningdesignsystem.com/components/split-view/.

[kwilloughby-sf]

@jcjuett

[jcjuett]

@kwilloughby-sf just so I understand--we are using custom focus boxes and not relying on user agent focus?

[kwilloughby-sf]

@jcjuett, we're using the default SLDS styling which uses custom focus boxes.

[interactivellama]

@kwilloughby-sf The following ask is a good interaction pattern but is dependent on how the consumer sets up their app. In summary, we can't guarantee this UX interaction and therefore can not back it into the component UI.

[Accessibility] Add instructions to the first item in the list to indicate Shift + Tab will take the user back to the list after selecting an item.

[interactivellama]

Moved interaction patterns to issue #2310

[kwilloughby-sf]

@interactivellama, regarding "[Accessibility] Add instructions to the first item in the list to indicate Shift + Tab will take the user back to the list after selecting an item"...

Is the concern that the consumer might not move the focus to the right side content, therefore, Shift + tab might not go back to the correct thing?

CC @jcjuett

[interactivellama]

yes, that issue and most likely it would be multiple shift tabs needed to return to SplitView and the SplitView could be at the bottom of the DOM so it could be Tab forward instead to. We can't control it.