Add "id" as a configurable a11y option in order to pass snapshot tests

[jonathanprizeout]

Clear and concise description of the problem

I love all of the accessibility features that come with Swiper but my snapshot tests are failing because of the dynamic id that is generated on the swiper-wrapper div when enabling a11y. The wrapper div is generated on the fly so I cannot control the markup in order to override the id manually. I would like to see an "id" as an option of a11y.

React Example:

const returnSlides = () => {
	return slides.map((slide) => (
		<SwiperSlide key={swiperSlideId}>
			...
		</SwiperSlide>
	));
};

<Swiper
	key={swiperId}
	grabCursor={true}
	slidesPerView={2.3}
	pagination={{ clickable: true }}
	navigation={true}
	scrollbar={true}
	mousewheel={false}
	spaceBetween={8}
	slidesOffsetBefore={16}
	slidesOffsetAfter={16}
	freeMode={true}
	freeModeMomentum={false}
	freeModeMomentumBounce={false}
	a11y={{ enabled: true }}
	breakpoints={{
		481: {
			slidesPerView: 'auto',
			spaceBetween: 16,
			slidesOffsetBefore: 32,
			slidesOffsetAfter: 32,
		},
	}}
>
	{returnSlides()}
</Swiper>

Screenshot of the DOM with dynamic wrapper and id

Screenshot of tests failing due to dynamic id

Suggested solution

Allow user to configure id to override dynamic id

a11y={
	{
		enabled: true,
		id: 'swiper-wrapper-id'
	}
}

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[perusoa]

I have this same issue, but currently I need to use v6.8.4, is there a workaround/solution I can implement in my version to do this by any chance?