Disable carousel autoadvance

[PeterBreen]

Per the accessibility team, we should disable the carousel automatic advance, meaning the only way to advance a slide is manually.

Our version of react-bootstrap (1.6, using Bootstrap 4.x) may not support interval={null} to disable autoadvance; that seems to be a react-bootstrap 2.x/Bootstrap 5.x function. However, if we can use null, let's do so.

To close this item, two things are required:

• remove the ability to set a custom interval via props for the carousel components
• remove any props.intervals from instances of those components.
• test that carousels effectively do not auto advance, and only change slides on user action (clicking the arrow)

If interval={null} does not work, set interval={315569520000}. When I discussed this with the accessibility team, they allowed as how users are probably not going to wait ten years for a slide to advance. ;)

We have two Carousel components which need work: TestimonialCarousel and BlogCarousel.

code locations

First, remove the logic allowing for custom intervals and simply have it set it to interval={null}, then remove interval from our type statement; we won't accept custom values via props anymore.

TestimonialCarousel:

• CivicTechExchange/common/components/common/carousel/TestimonialCarousel.jsx

  Line 37 in 1deba2d

  <Carousel interval={this.props.interval ? this.props.interval : 6000}>

• CivicTechExchange/common/components/common/carousel/TestimonialCarousel.jsx

  Lines 8 to 9 in 1deba2d

  	type Props = {|
  	interval: number,

BlogCarousel:

• CivicTechExchange/common/components/common/carousel/BlogCarousel.jsx

  Line 36 in 1deba2d

  <Carousel interval={this.props.interval ? this.props.interval : 6000}>

• CivicTechExchange/common/components/common/carousel/BlogCarousel.jsx

  Lines 8 to 9 in 1deba2d

  	type Props = {|
  	interval: number,

Second, remove any use of props.interval:

• CivicTechExchange/common/components/controllers/CorporateHackathonController.jsx

  Lines 264 to 266 in 2c5651d

  	<TestimonialCarousel
  	category="partner-highlights"
  	interval={600000}

• CivicTechExchange/common/components/controllers/CorporateHackathonController.jsx

  Lines 410 to 413 in 2c5651d

  	<TestimonialCarousel
  	category="hackathon-highlights"
  	interval={600000}
  	/>

• CivicTechExchange/common/components/controllers/LandingController.jsx

  Line 366 in 3b48220

  <TestimonialCarousel interval={15000} />

Third and finally, remove props.interval from this component which doesn't use it and really doesn't need it declared. This is just a cleanup task, but it's worth doing:

• CivicTechExchange/common/components/componentsBySection/Landing/LatestBlogPosts.jsx

  Lines 6 to 9 in 2c5651d

  	//props.interval is optional, default 6000ms
  	//props.tag filters blog posts to show
  	type Props = {|
  	interval: number,

In short, set Carousels to have no autoadvance interval and remove support for custom autoadvance intervals.

reference documentation

https://react-bootstrap-v4.netlify.app/components/carousel/