feat: add accessibility and focusOnChange settings to carousel (#4156)

## Description

Adding these settings to help make the carousel component compliant with
a11y requirements. Settings default to off so that existing workflows
are not disrupted.

**JIRA ticket**
https://builder-io.atlassian.net/browse/ENG-10325

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds accessibility and focusOnSelect options to the Carousel and
upgrades react-slick, with a minor version bump and related dependency
updates.
> 
> - **Widgets/Carousel**:
> - Add `accessibility` and `focusOnSelect` inputs in
`Carousel.config.ts` (advanced, default `false`).
> - Pass `accessibility` and `focusOnSelect` props to `react-slick` in
`Carousel.tsx`.
> - **Dependencies**:
> - Upgrade `react-slick` to `^0.31.0` and `@types/react-slick` to
`^0.23.13`.
> - Lockfile reflects updated peer ranges and removal of transitive
`enquire.js`.
> - **Release & Scripts**:
>   - Bump package version to `2.1.0` and add `release:minor` script.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
692c7a5. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Signed-off-by: Sanyam Kamat <[email protected]>
Co-authored-by: Sanyam Kamat <[email protected]>

Author: murrayadam

packages/widgets/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/widgets",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "",
   "keywords": [],
   "main": "dist/builder-widgets.cjs.js",
@@ -35,6 +35,7 @@
     "commit": "git-cz",
     "release": "npm run build && ALLOW_PUBLISH=true npm publish",
     "release:major": "npm run build && npm version major && ALLOW_PUBLISH=true npm publish",
+    "release:minor": "npm run build && npm version minor && ALLOW_PUBLISH=true npm publish",
     "release:patch": "npm run build && npm version patch --no-git-tag-version && ALLOW_PUBLISH=true npm publish",
     "release:nightly": "npm run build && npm version prerelease --no-git-tag-version && ALLOW_PUBLISH=true npm publish --tag nightly",
     "release:dev": "npm run build && npm version prerelease --no-git-tag-version && ALLOW_PUBLISH=true npm publish --tag dev",
@@ -93,21 +94,23 @@
     "@types/react": "^16.4.1",
     "@types/react-dom": "^16.0.7",
     "@types/react-loadable": "^5.5.1",
-    "@types/react-slick": "^0.23.4",
+    "@types/react-slick": "^0.23.13",
     "colors": "^1.1.2",
     "commitizen": "^4.3.1",
+    "concurrently": "^5.3.0",
     "coveralls": "^3.0.0",
     "cross-env": "^5.0.1",
     "cz-conventional-changelog": "^2.0.0",
-    "concurrently": "^5.3.0",
-    "rollup-plugin-serve": "^1.0.1",
     "husky": "^0.14.0",
     "jest": "^29.0.0",
     "lint-staged": "^15.3.0",
     "lodash.camelcase": "^4.3.0",
+    "next": "^12.1.0",
     "npm-install-peers": "^1.2.1",
     "prettier": "^1.4.4",
     "prompt": "^1.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "replace-in-file": "^3.0.0-beta.2",
     "rimraf": "^2.6.1",
     "rollup": "^2.33.3",
@@ -117,6 +120,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-re": "^1.0.7",
     "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-typescript2": "^0.31.2",
     "semantic-release": "^19.0.3",
@@ -127,18 +131,15 @@
     "tslint-config-standard": "^7.0.0",
     "typedoc": "^0.26.10",
     "typescript": "^5.4.5",
-    "validate-commit-msg": "^2.12.2",
-    "next": "^12.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "validate-commit-msg": "^2.12.2"
   },
   "peerDependencies": {
+    "@builder.io/react": ">=5.0.11",
+    "next": ">=12.1.0",
     "preact": "^8.4.2",
     "preact-compat": "^3.18.4",
     "preact-context": "^1.1.3",
     "prop-types": "^15.7.2",
-    "next": ">=12.1.0",
-    "@builder.io/react": ">=5.0.11",
     "react": ">=16.0.0-0 || ^19.0.0-rc",
     "react-dom": ">=16.0.0-0 || ^19.0.0-rc"
   },
@@ -165,7 +166,7 @@
     "lodash-es": "^4.17.10",
     "react-loadable": "^5.5.0",
     "react-masonry-component": "^6.2.1",
-    "react-slick": "^0.28.1",
+    "react-slick": "^0.31.0",
     "tslib": "^1.10.0"
   },
   "gitHead": "4d96fbc32864698afbb355ab991c6d90be991951"

packages/widgets/package.json

@@ -200,5 +200,19 @@ export const carouselConfig: any = {
         },
       ],
     },
+    {
+      name: 'accessibility',
+      helperText: 'Enable accessibility features for screen readers and keyboard navigation',
+      type: 'boolean',
+      defaultValue: false,
+      advanced: true,
+    },
+    {
+      name: 'focusOnSelect',
+      helperText: 'Focus on slide after slide change for better accessibility',
+      type: 'boolean',
+      defaultValue: false,
+      advanced: true,
+    },
   ],
 };

packages/widgets/src/components/Carousel.config.ts

@@ -25,6 +25,8 @@ interface CarouselProps {
   useChildrenForSlides?: boolean;
   slickProps?: Settings;
   responsive?: ResponsiveObject[];
+  accessibility?: boolean;
+  focusOnSelect?: boolean;
 }
 
 // TODO: change to slick grid
@@ -100,6 +102,8 @@ export class CarouselComponent extends React.Component<CarouselProps> {
                       this.props.autoplaySpeed ? this.props.autoplaySpeed * 1000 : undefined
                     }
                     dots={!this.props.hideDots}
+                    accessibility={this.props.accessibility}
+                    focusOnSelect={this.props.focusOnSelect}
                     // TODO: on change emit event on element?
                     // renderBottomCenterControls={this.props.hideDots ? () => null : undefined}