@cypress-design/react-modal 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +6 -0
  3. package/Modal.tsx +8 -5
  4. package/dist/Modal.d.ts.map +1 -1
  5. package/dist/index.es.mjs +2 -2
  6. package/dist/index.es.mjs.map +1 -1
  7. package/dist/index.umd.js +2 -2
  8. package/dist/index.umd.js.map +1 -1
  9. package/package.json +1 -1
package/.turbo/turbo-build.log CHANGED
@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
2
2
  $ rollup -c ./rollup.config.mjs
3
3
  
4
4
  ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
5
- created ./dist/index.umd.js, ./dist/index.es.mjs in 16.7s
5
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 47.3s
6
6
  $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @cypress-design/react-modal
2
2
 
3
+ ## 0.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#288](https://github.com/cypress-io/cypress-design/pull/288) [`2c53ea8`](https://github.com/cypress-io/cypress-design/commit/2c53ea8ffa13baaf299bd3168de819166ad071ce) Thanks [@elevatebart](https://github.com/elevatebart)! - fix accessibility
8
+
3
9
  ## 0.2.0
4
10
 
5
11
  ### Minor Changes
package/Modal.tsx CHANGED
@@ -50,7 +50,7 @@ export const Modal: React.FC<ModalProps> = ({
50
50
  () => () => {
51
51
  freeBodyScroll()
52
52
  },
53
- []
53
+ [],
54
54
  )
55
55
 
56
56
  return (
@@ -63,18 +63,21 @@ export const Modal: React.FC<ModalProps> = ({
63
63
  className={ClassModalContainer}
64
64
  tabIndex={-1}
65
65
  aria-modal="true"
66
- role="modal"
66
+ aria-labelledby="cy_modal_label"
67
+ role="dialog"
67
68
  >
68
69
  <div
69
70
  className={clsx(
70
71
  ClassModal,
71
72
  fullscreen
72
73
  ? ClassModalFullscreenDimensions
73
- : ClassModalStandardDimensions
74
+ : ClassModalStandardDimensions,
74
75
  )}
75
76
  >
76
77
  <div className={ClassTitleBox}>
77
- <div className={ClassTitle}>{title}</div>
78
+ <div id="cy_modal_label" className={ClassTitle}>
79
+ {title}
80
+ </div>
78
81
  {helpLink ? <div className={ClassHelpLinkDash} /> : null}
79
82
  {helpLink ? (
80
83
  <a href={helpLink} className={ClassHelpLink}>
@@ -105,7 +108,7 @@ export const Modal: React.FC<ModalProps> = ({
105
108
  </div>
106
109
  </div>
107
110
  </div>,
108
- document.body
111
+ document.body,
109
112
  )
110
113
  )
111
114
  }
package/dist/Modal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8EtC,CAAA;AAED,eAAe,KAAK,CAAA"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiFtC,CAAA;AAED,eAAe,KAAK,CAAA"}
package/dist/index.es.mjs CHANGED
@@ -31059,12 +31059,12 @@ var Modal = function (_a) {
31059
31059
  return (show &&
31060
31060
  reactDomExports.createPortal(React.createElement("div", null,
31061
31061
  React.createElement("div", { className: ClassBackDrop, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }),
31062
- React.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", role: "modal" },
31062
+ React.createElement("div", { className: ClassModalContainer, tabIndex: -1, "aria-modal": "true", "aria-labelledby": "cy_modal_label", role: "dialog" },
31063
31063
  React.createElement("div", { className: clsx(ClassModal, fullscreen
31064
31064
  ? ClassModalFullscreenDimensions
31065
31065
  : ClassModalStandardDimensions) },
31066
31066
  React.createElement("div", { className: ClassTitleBox },
31067
- React.createElement("div", { className: ClassTitle }, title),
31067
+ React.createElement("div", { id: "cy_modal_label", className: ClassTitle }, title),
31068
31068
  helpLink ? React.createElement("div", { className: ClassHelpLinkDash }) : null,
31069
31069
  helpLink ? (React.createElement("a", { href: helpLink, className: ClassHelpLink },
31070
31070
  "Need help",