Migrate #1031 to the v6 codebase (#1036)

* Migrate accessibility roles from v5 to v6

* Fix storybook configuration

* Fix existing Cypress tests

* Add query param support to demo used by cypress

* Fix serializing params for tests.

* Update demos.tsx

* Fix auto install peers

* Update cypress.config.ts

* Update carousel.test.tsx

* Add axe test violation checker for a carousel with control callbacks

* Add changeset

* Switch to major bump for new a11y props.

.changeset/hot-doors-perform.md

@@ -0,0 +1,5 @@
+---
+'nuka-carousel': major
+---
+
+Adjusts roles and aria attributes. Adds new "carouselId", "tabbed", and "landmark" props.

.npmrc

@@ -1,2 +1,3 @@
 strict-peer-dependencies=false
 prefer-workspace-packages=true
+auto-install-peers=false

package.json

@@ -8,7 +8,6 @@
     "build:website:vercel": "pnpm run --filter website build:vercel",
     "lint": "pnpm run --parallel lint",
     "lint:fix": "pnpm run --parallel lint --fix",
-    "start:nextjs": "pnpm run --filter nuka-carousel-nextjs-example dev",
     "start:storybook": "pnpm run --filter nuka-carousel storybook",
     "start:website": "pnpm run --filter website start",
     "test": "pnpm run -r test",
@@ -32,11 +31,11 @@
     "@changesets/cli": "^2.23.1",
     "@svitejs/changesets-changelog-github-compact": "^0.1.1",
     "@types/jest": "^27.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@typescript-eslint/parser": "^5.4.0",
     "babel-eslint": "^10.1.0",
     "builder": "^5.0.0",
-    "cypress": "^9.3.1",
+    "cypress": "10.3.0",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",

packages/nuka/.storybook/main.js

@@ -3,9 +3,15 @@ module.exports = {
     '../stories/**/*.stories.mdx',
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
+
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: '@storybook/react',
-  core: {
-    builder: 'webpack5',
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
+
+  docs: {
+    autodocs: true
+  }
 };

packages/nuka/cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  retries: 3,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.ts')(on, config);
+    },
+  },
+});

packages/nuka/cypress/integration/standard-carousel.spec.ts → packages/nuka/cypress/e2e/standard-carousel.cy.ts

@@ -6,10 +6,10 @@ describe('Standard Carousel', () => {
   it('should render carousel with 5 slides and only 1 visible slide and go through all of the slides', () => {
     cy.visitCarousel();
 
-    cy.get(stdDemoSel + '.slider-frame').should(
+    cy.get(stdDemoSel + '.slider-container').should(
       'have.attr',
       'aria-label',
-      'carousel-slider'
+      'Carousel Demo'
     );
 
     assertVisibleSlide(stdDemoSel, 1);
@@ -41,4 +41,22 @@ describe('Standard Carousel', () => {
       'be.disabled'
     );
   });
+
+  it('should be a landmark region', () => {
+    const params = {
+      carouselId: 'region-carousel',
+      landmark: true,
+    };
+
+    const url = `http://localhost:3000/open-source/nuka-carousel?params='${JSON.stringify(
+      params
+    )}'`;
+
+    cy.visit(url);
+
+    cy.get(stdDemoSel + '.slider-container')
+      .should('have.attr', 'aria-label', 'Carousel Demo')
+      .should('have.attr', 'role', 'region')
+      .and('have.attr', 'aria-roledescription', 'carousel');
+  });
 });

packages/nuka/cypress/integration/wrap-around-carousel.spec.ts → packages/nuka/cypress/e2e/wrap-around-carousel.cy.ts

@@ -12,10 +12,10 @@ describe('Wrap-Around Carousel', () => {
 
     cy.get('li').contains('Wrap Around').click();
 
-    cy.get(waDemoSel + '.slider-frame').should(
+    cy.get(waDemoSel + '.slider-container').should(
       'have.attr',
       'aria-label',
-      'carousel-slider'
+      'Carousel Demo'
     );
 
     assertVisibleSlide(waDemoSel, 1);

packages/nuka/jest-setup.ts

@@ -1 +1,4 @@
 import '@testing-library/jest-dom';
+import { toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);

packages/nuka/package.json

@@ -28,22 +28,22 @@
     "package": "pnpm pack",
     "prepublishOnly": "shx cp ../../README.md ./README.md && shx cp ../../LICENSE ./LICENSE && pnpm run build",
     "postpack": "shx rm ./README.md && shx rm ./LICENSE",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "devDependencies": {
     "@babel/core": "^7.17.2",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-actions": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-webpack5": "^7.4.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@types/d3-ease": "^3.0.0",
     "@types/exenv": "^1.2.0",
+    "@types/jest-axe": "^3.5.6",
     "@types/node": "^18.7.5",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -52,12 +52,14 @@
     "chromatic": "^6.2.0",
     "d3-ease": "^3.0.1",
     "exenv": "^1.2.0",
+    "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^28.1.3",
     "prop-types": "^15.6.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-move": "^6.5.0",
     "require-from-string": "^2.0.2",
+    "storybook": "^7.4.6",
     "tsup": "^6.7.0",
     "typescript": "^4.5.2",
     "url-loader": "^4.1.1",