Create modal carousel component

[reemhamz]

Please describe the use case(s) for this component

There are several pages in Bedrock that use the modal component, which is overlayed with bespoke Javascript to make the modals have carousel-like/slide-like behaviour. They are clickable through directional controls, and will loop when the user reaches the "last" slide in the carousel.

Some examples:

• Careers pages in the testimonials section
• State of Mozilla 2019-2021 annual reports found in content cards:
  • 2019 annual report
  • 2020 annual report
  • 2021 annual report
• Diversity 2021 reports found in following pages' content cards:
  • Who we Are page
  • What we Build page
  • Beyond our Products page

The bespoke modal carousel code was first used in the 2019 SOM annual report, and it's been used in several other pages since.

Once is happenstance. Twice is coincidence. Three times is a pattern

We should add this modal carousel feature variant to our already-existing modal component in Protocol that we can easily use throughout Bedrock instead of having to always copy-and-paste the same bespoke JavaScript code that was only meant for the 2019 annual report.

Please provide any designs or previous implementations of the proposed component

• From the Careers pages:
  

• From the Diversity pages
  

A worry that I have is accessibility issues that may come with building such a component. It's not a very well-loved component in the web development community because of lack of a11y best practices, disruptiveness to SEO, and can impact performance.
Things to consider are also how disruptive implementing this component may be to already-existing modal carousels in Bedrock, and how what path we'd be taking to structure our modal components in arrays to work as a carousel.
This also requires a great deal of user testing to get right, so it's a triumph of a component if achieved.

[alexgibson]

Rather than make a new component for this, would it make sense to add this as a new feature to the existing modal component?

[reemhamz]

Oop, that was already the plan -- to extend this feature to the existing modal. I should have mentioned it. Going to add it now, thanks for heads up :)

[reemhamz]

Discussed this change in our last Protocol meeting with @craigcook, Emma and Jessica, and we decided that this component shouldn't be developed as it's an accessibility liability and not a very utilized component.

Going forward, if we receive designs that have modal carousel features, we're going to give the designer + stakeholders other recommendations to make sure we develop more accessible and comfortable experiences to the user.

With that said, we concluded that developing an inline carousel component would be a good middle ground. In this component, we wouldn't be placing any important information that is crucial to the webpage, but rather place secondary information that is just a nice add-on -- a good example of what would be updated to use the inline component would be the Quotes section in the Careers page.