@skyscanner/backpack-web 41.13.0 → 41.14.0

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 (3) hide show
  1. package/bpk-component-input/src/withOpenEvents.d.ts +17 -10
  2. package/bpk-component-input/src/withOpenEvents.js +13 -3
  3. package/package.json +1 -1
package/bpk-component-input/src/withOpenEvents.d.ts CHANGED
@@ -15,6 +15,12 @@ export type WithOpenEventsProps = {
15
15
  */
16
16
  onOpen?: () => void;
17
17
  hasTouchSupport?: boolean;
18
+ /**
19
+ * @deprecated Use inputMode="none" instead. readOnly will be removed in a future version.
20
+ * Previously used to prevent the mobile keyboard from opening, but this caused a WCAG 1.3.1
21
+ * violation due to conflicting readonly + aria-readonly attributes.
22
+ */
23
+ readOnly?: boolean | string;
18
24
  };
19
25
  type EventHandlers = {
20
26
  onClick?: (event: UIEvent) => void;
@@ -23,10 +29,11 @@ type EventHandlers = {
23
29
  onTouchEnd?: (event: UIEvent) => void;
24
30
  onKeyDown?: (event: UIEvent) => void;
25
31
  onKeyUp?: (event: UIEvent) => void;
32
+ inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
26
33
  readOnly?: string;
27
34
  'aria-readonly'?: boolean;
28
35
  };
29
- type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'readOnly' | 'aria-readonly'>;
36
+ type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'inputMode' | 'readOnly' | 'aria-readonly'>;
30
37
  declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: ComponentType<P>) => {
31
38
  new (props: P & WithOpenEventsProps & InputProps): {
32
39
  focusCanOpen: boolean;
@@ -35,25 +42,25 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
35
42
  handleBlur: () => void;
36
43
  render(): ReactElement;
37
44
  context: unknown;
38
- setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
45
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
39
46
  forceUpdate(callback?: (() => void) | undefined): void;
40
- readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>;
47
+ readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>;
41
48
  state: Readonly<{}>;
42
49
  refs: {
43
50
  [key: string]: import("react").ReactInstance;
44
51
  };
45
52
  componentDidMount?(): void;
46
- shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
53
+ shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
47
54
  componentWillUnmount?(): void;
48
55
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
49
- getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
50
- componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
56
+ getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
57
+ componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
51
58
  componentWillMount?(): void;
52
59
  UNSAFE_componentWillMount?(): void;
53
- componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
54
- UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
55
- componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
56
- UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
60
+ componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
61
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
62
+ componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
63
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
57
64
  };
58
65
  displayName: string;
59
66
  defaultProps: {
package/bpk-component-input/src/withOpenEvents.js CHANGED
@@ -96,8 +96,12 @@ const withOpenEvents = WithOpenEventsInputComponent => {
96
96
  onKeyUp,
97
97
  onOpen,
98
98
  onTouchEnd,
99
+ readOnly,
99
100
  ...rest
100
101
  } = this.props;
102
+ if (readOnly !== undefined) {
103
+ console.warn('withOpenEvents: The readOnly prop is deprecated and will be removed in a future version. ' + 'The component now uses inputMode="none" to prevent mobile keyboards from opening, ' + 'which avoids WCAG 1.3.1 violations from conflicting readonly + aria-readonly attributes.');
104
+ }
101
105
  const eventHandlers = {
102
106
  onClick: withEventHandler(onOpen, onClick),
103
107
  // @ts-expect-error for some reason the type KeyboardEvent was not being recognized as
@@ -105,9 +109,15 @@ const withOpenEvents = WithOpenEventsInputComponent => {
105
109
  onKeyDown: withEventHandler(handleKeyEvent(onOpen), onKeyDown)
106
110
  };
107
111
  if (hasTouchSupport) {
108
- // Prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
109
- eventHandlers.readOnly = 'readOnly';
110
- eventHandlers['aria-readonly'] = false;
112
+ if (readOnly !== undefined) {
113
+ // Deprecated: prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
114
+ eventHandlers.readOnly = 'readOnly';
115
+ eventHandlers['aria-readonly'] = false;
116
+ } else {
117
+ // Prevents the mobile keyboard from opening (iOS / Android) using inputMode="none"
118
+ // This avoids WCAG 1.3.1 violation from conflicting readonly + aria-readonly attributes
119
+ eventHandlers.inputMode = 'none';
120
+ }
111
121
  eventHandlers.onTouchEnd = withEventHandler(this.handleTouchEnd, onTouchEnd);
112
122
  }
113
123
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "41.13.0",
3
+ "version": "41.14.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",