feat: primary details mobile optimization

[wesruv]

• Adds styles and behaviors necessary for a mobile optimized layout
  • Adds breakpoint-width attribute with a default value of 800, if the width of the component goes below this number it goes to mobile layout
  • Adds breakpoint attribute, displays what breakpoint the component is using "compact" or "desktop"
  • Added better focus styles
• Moved to new testing framework
  • Added more thorough testing
  • Got rid of files for old testing framework
  • Fixed errors found while writing tests
• Added docs
  • for new functionality
  • for a11y information
  • for new testing framework

Related issues

• CPFED-4084 Primary Detail looks bad at mobile

Preview

Link(s) to demo page(s) where this element can be viewed:

• Demo Page

Testing instructions

• Check desktop layout
  1. Open window at 1000px+ wide window
  2. Make sure layout is two column
  3. Click on nav items, make sure the content on the right changes
  4. Use keyboard navigation, when on tabs the arrow keys are used to navigate the tabs, everything else uses tabs
• Check mobile layout
  1. Open page at 500px or less wide window
  2. Make sure the first column (the nav side) is visible
  3. Click on nav item, it should slide over to the content side
  4. Click back or escape and it should go back to the nav side
• Check going from one breakpoint to another
  1. Make sure if something is open at desktop, it remains open at mobile
  2. Make sure that something is always open at desktop, the right column should never be empty (have nothing selected at mobile then go to desktop)

Run the tests on the component

Test in older browsers

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Edge
• Internet Explorer 11 (should be useable, not pixel perfect)
• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Firefox 78 (or latest version for Red Hat Enterprise Linux distribution)
• Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Android mobile device (such as the Galaxy S9)
• Apple mobile device (such as the iPhone X)
• Apple tablet device (such as the iPhone Pro)

Ready-for-merge Checklist

• Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
• Tests have been updated to cover these changes.
• Browser testing passed.
• Changelog updated.
• Documentation (README.md, WHY.md, etc.) updated or added.
• Link to the demo recording:
• Approved by designer.

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the [email protected] mailing list!

[wesruv]

Ahh, coolio. Next time I'd push a different branch unless this is a show-stopping issue?

[kelsS]

Ahh, coolio. Next time I'd push a different branch unless this is a show-stopping issue?

Hey @wesruv unfortunately it is a show stopping issue. The issues I found make the component unusable on mobile with a screen reader. I am working on the fixes and will keep you posted.

[kelsS]

Hey @kylebuch8 Wes updated the tests and I tested with a screen reader again on desktop and mobile and we are golden there. Also below is the latest a11y lighthouse report.

Latest Lighthouse report
pfe-primary-detail-a11y-audit-08-05-21.pdf

[kelsS]

LGTM ♿🎉