refactor(carousel): Improved focus management and accessibility

[rkaraivanov]

Description

The carousel component has been refactored to enhance focus management and accessibility. The component now delegates focus to its indicators, navigation buttons or the first focusable element in the active slide when the carousel gains focus, whichever is present in that order. This enhances the user experience for keyboard and screen reader users, ensuring that they can easily navigate through the carousel content.

Type of Change

• Behavioral change (fix or feature that causes existing behavior to change)

Related Issues

#2291

Checklist

• My code follows the project's coding standards
• I have tested my changes locally
• I have updated documentation if needed

[Copilot]

Pull request overview

Refactors igc-carousel to improve keyboard focus entry and accessibility by enabling Shadow DOM focus delegation and adjusting the shadow DOM order so indicators are reached before navigation controls.

Changes:

• Enabled Shadow DOM delegatesFocus for igc-carousel to improve focus behavior.
• Reordered rendering so the indicator container precedes navigation buttons in the shadow DOM (affecting focus/tab order).
• Updated carousel shadow DOM rendering assertion and added a changelog entry describing the behavior change.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/components/carousel/carousel.ts	Adds delegatesFocus and reorders indicator vs navigation rendering to improve keyboard focus entry.
src/components/carousel/carousel.spec.ts	Updates the expected shadow DOM structure to match the new render order.
CHANGELOG.md	Documents the carousel focus delegation behavior change under Unreleased.

Comments suppressed due to low confidence (1)

src/components/carousel/carousel.ts:100

• The new delegatesFocus behavior plus the DOM reorder changes the keyboard focus entry point (indicators now come before navigation). There’s no unit test asserting the new focus delegation / tab-order behavior (e.g., focusing the carousel host or tabbing into it lands on the active indicator when indicators are present, otherwise on the prev/next buttons, otherwise on the first focusable in the active slide). Adding a focused test would prevent regressions for issue #2291.

@shadowOptions({ delegatesFocus: true })
export default class IgcCarouselComponent extends EventEmitterMixin<
  IgcCarouselComponentEventMap,
  Constructor<LitElement>
>(LitElement) {

[kdinev]

@rkaraivanov Maybe a test for the tab order?

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

src/components/carousel/carousel.spec.ts:512

• The PR description/changelog mention delegating focus to the first focusable element in the active slide when indicators and navigation are not present, but the current Focus interaction tests only cover the indicator and previous-button cases. Adding a test for the “no indicators + no navigation” path will help prevent regressions and ensure the documented behavior is actually verified.

    describe('Focus', () => {
      it('should delegate focus to the active indicator in the indicator container when present', async () => {
        carousel.focus();
        expect(carousel.shadowRoot?.activeElement).to.equal(
          carousel.renderRoot.querySelector(
            'igc-carousel-indicator[tabindex="0"]'
          )
        );
      });

      it('should delegate focus to the previous button when the indicator container is not present', async () => {
        carousel.hideIndicators = true;
        await elementUpdated(carousel);

        carousel.focus();
        expect(carousel.shadowRoot?.activeElement).to.equal(prevButton);
      });
    });