From f42e37ee1255ab724ed53842b37db354fe70d449 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Mon, 5 Jun 2023 19:34:04 +0200 Subject: [PATCH 01/15] migrate PressableWithotFocus to GenericPressable --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 7 +++++-- src/components/PressableWithoutFocus.js | 6 +++--- src/pages/DetailsPage.js | 2 ++ 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index eb23efdfe58e..53b625e6f05c 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -8,6 +8,7 @@ import CONST from '../../../CONST'; import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContextMenuContext'; import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot'; import * as ReportUtils from '../../../libs/ReportUtils'; +import withLocalize, {withLocalizePropTypes} from '../../withLocalize'; const ImageRenderer = (props) => { const htmlAttribs = props.tnode.attributes; @@ -63,6 +64,8 @@ const ImageRenderer = (props) => { styles={[styles.noOutline, styles.alignItemsStart]} onPress={show} onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} + accessibilityRole="button" + accessibilityLabel={props.translate('common.attachment')} > { ); }; -ImageRenderer.propTypes = htmlRendererPropTypes; +ImageRenderer.propTypes = {...htmlRendererPropTypes, ...withLocalizePropTypes}; ImageRenderer.displayName = 'ImageRenderer'; -export default ImageRenderer; +export default withLocalize(ImageRenderer); diff --git a/src/components/PressableWithoutFocus.js b/src/components/PressableWithoutFocus.js index 5b441f4ee9f4..9953c4834101 100644 --- a/src/components/PressableWithoutFocus.js +++ b/src/components/PressableWithoutFocus.js @@ -1,6 +1,6 @@ import React from 'react'; -import {Pressable} from 'react-native'; import PropTypes from 'prop-types'; +import GenericPressable from './Pressable/GenericPressable'; const propTypes = { /** Element that should be clickable */ @@ -42,14 +42,14 @@ class PressableWithoutFocus extends React.Component { render() { return ( - (this.pressableRef = el)} style={this.props.styles} > {this.props.children} - + ); } } diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 3c1f124aca1a..2315dbc3860e 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -144,6 +144,8 @@ class DetailsPage extends React.PureComponent { Date: Tue, 6 Jun 2023 23:42:53 +0200 Subject: [PATCH 02/15] hoist GenericPressable proptypes to PressableWithoutFocus --- src/components/PressableWithoutFocus.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/PressableWithoutFocus.js b/src/components/PressableWithoutFocus.js index 9953c4834101..45d60eb6892a 100644 --- a/src/components/PressableWithoutFocus.js +++ b/src/components/PressableWithoutFocus.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import GenericPressable from './Pressable/GenericPressable'; +import genericPressablePropTypes from './Pressable/GenericPressable/PropTypes'; const propTypes = { /** Element that should be clickable */ @@ -15,6 +16,9 @@ const propTypes = { /** Styles that should be passed to touchable container */ // eslint-disable-next-line react/forbid-prop-types styles: PropTypes.arrayOf(PropTypes.object), + + /** Proptypes of pressable component used for implementation */ + ...genericPressablePropTypes.pressablePropTypes, }; const defaultProps = { From c1d7329eab59eea5f9ef0e20c488eac38181d4c1 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Thu, 8 Jun 2023 00:04:57 +0200 Subject: [PATCH 03/15] move PressableWithoutFoucs to Pressable folder --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- src/components/{ => Pressable}/PressableWithoutFocus.js | 8 ++++++-- src/pages/DetailsPage.js | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) rename src/components/{ => Pressable}/PressableWithoutFocus.js (84%) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 53b625e6f05c..c2e8615a834f 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -3,7 +3,7 @@ import htmlRendererPropTypes from './htmlRendererPropTypes'; import AttachmentModal from '../../AttachmentModal'; import styles from '../../../styles/styles'; import ThumbnailImage from '../../ThumbnailImage'; -import PressableWithoutFocus from '../../PressableWithoutFocus'; +import PressableWithoutFocus from '../../Pressable/PressableWithoutFocus'; import CONST from '../../../CONST'; import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContextMenuContext'; import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot'; diff --git a/src/components/PressableWithoutFocus.js b/src/components/Pressable/PressableWithoutFocus.js similarity index 84% rename from src/components/PressableWithoutFocus.js rename to src/components/Pressable/PressableWithoutFocus.js index 45d60eb6892a..fb31e8faaed7 100644 --- a/src/components/PressableWithoutFocus.js +++ b/src/components/Pressable/PressableWithoutFocus.js @@ -1,7 +1,8 @@ import React from 'react'; +import _ from 'underscore'; import PropTypes from 'prop-types'; -import GenericPressable from './Pressable/GenericPressable'; -import genericPressablePropTypes from './Pressable/GenericPressable/PropTypes'; +import GenericPressable from './GenericPressable'; +import genericPressablePropTypes from './GenericPressable/PropTypes'; const propTypes = { /** Element that should be clickable */ @@ -45,12 +46,15 @@ class PressableWithoutFocus extends React.Component { } render() { + const restProps = _.omit(this.props, ['children', 'onPress', 'onLongPress', 'styles']); return ( (this.pressableRef = el)} style={this.props.styles} + // eslint-disable-next-line react/jsx-props-no-spreading + {...restProps} > {this.props.children} diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index 2315dbc3860e..b51d6081b16d 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -23,7 +23,7 @@ import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from '../components/Icon/Expensicons'; import MenuItem from '../components/MenuItem'; import AttachmentModal from '../components/AttachmentModal'; -import PressableWithoutFocus from '../components/PressableWithoutFocus'; +import PressableWithoutFocus from '../components/Pressable/PressableWithoutFocus'; import * as Report from '../libs/actions/Report'; import OfflineWithFeedback from '../components/OfflineWithFeedback'; import AutoUpdateTime from '../components/AutoUpdateTime'; From bcea8ea507c73c520c25e129f286ff86076dca15 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Thu, 8 Jun 2023 00:05:46 +0200 Subject: [PATCH 04/15] fix propTypes of PressableWithFeedback - add missing propTypes --- src/components/Pressable/PressableWithFeedback.js | 11 +++++++++-- src/components/Pressable/PressableWithoutFocus.js | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 281492568867..630e2b5b4946 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -7,11 +7,12 @@ import GenericPressablePropTypes from './GenericPressable/PropTypes'; import OpacityView from '../OpacityView'; import variables from '../../styles/variables'; import * as StyleUtils from '../../styles/StyleUtils'; +import stylePropType from '../../styles/stylePropTypes'; const omittedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrapperStyle']; const PressableWithFeedbackPropTypes = { - ..._.omit(GenericPressablePropTypes.pressablePropTypes, omittedProps), + ...GenericPressablePropTypes.pressablePropTypes, /** * Determines what opacity value should be applied to the underlaying view when Pressable is pressed. * To disable dimming, pass 1 as pressDimmingValue @@ -24,10 +25,16 @@ const PressableWithFeedbackPropTypes = { * @default variables.hoverDimValue */ hoverDimmingValue: propTypes.number, + + /** + * Style to apply for wrapper pressable component + * @default [] + */ + wrapperStyle: stylePropType, }; const PressableWithFeedbackDefaultProps = { - ..._.omit(GenericPressablePropTypes.defaultProps, omittedProps), + ...GenericPressablePropTypes.defaultProps, pressDimmingValue: variables.pressDimValue, hoverDimmingValue: variables.hoverDimValue, wrapperStyle: [], diff --git a/src/components/Pressable/PressableWithoutFocus.js b/src/components/Pressable/PressableWithoutFocus.js index fb31e8faaed7..c5c858b52ee2 100644 --- a/src/components/Pressable/PressableWithoutFocus.js +++ b/src/components/Pressable/PressableWithoutFocus.js @@ -17,7 +17,7 @@ const propTypes = { /** Styles that should be passed to touchable container */ // eslint-disable-next-line react/forbid-prop-types styles: PropTypes.arrayOf(PropTypes.object), - + /** Proptypes of pressable component used for implementation */ ...genericPressablePropTypes.pressablePropTypes, }; From 0f9bc390ef138b7df56c84d9a182f802cf454192 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Thu, 8 Jun 2023 01:39:23 +0200 Subject: [PATCH 05/15] hoist propTypes of ImageRenderer to the top of the file as stated in guidelines --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index c2e8615a834f..cc492ac1a830 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -10,6 +10,8 @@ import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot'; import * as ReportUtils from '../../../libs/ReportUtils'; import withLocalize, {withLocalizePropTypes} from '../../withLocalize'; +const propTypes = {...htmlRendererPropTypes, ...withLocalizePropTypes}; + const ImageRenderer = (props) => { const htmlAttribs = props.tnode.attributes; @@ -82,7 +84,7 @@ const ImageRenderer = (props) => { ); }; -ImageRenderer.propTypes = {...htmlRendererPropTypes, ...withLocalizePropTypes}; +ImageRenderer.propTypes = propTypes; ImageRenderer.displayName = 'ImageRenderer'; export default withLocalize(ImageRenderer); From af0e8c4705e2727d80cb42a8ff75eedded9b9822 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Mon, 12 Jun 2023 11:21:48 +0200 Subject: [PATCH 06/15] Remove wrapperStyle proptype from PressableWithFeedback.js Co-authored-by: Rajat Parashar --- src/components/Pressable/PressableWithFeedback.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 630e2b5b4946..1326b77b9baa 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -25,12 +25,6 @@ const PressableWithFeedbackPropTypes = { * @default variables.hoverDimValue */ hoverDimmingValue: propTypes.number, - - /** - * Style to apply for wrapper pressable component - * @default [] - */ - wrapperStyle: stylePropType, }; const PressableWithFeedbackDefaultProps = { From 1f4d4b94d79c2cc5bc2dc6f8c10820ebdd30d4d2 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Mon, 12 Jun 2023 11:30:52 +0200 Subject: [PATCH 07/15] rename styling prop of PressableWithoutFocus to 'style' --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- src/components/Pressable/PressableWithoutFocus.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index cc492ac1a830..65c1011864fc 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -63,7 +63,7 @@ const ImageRenderer = (props) => { > {({show}) => ( showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} accessibilityRole="button" diff --git a/src/components/Pressable/PressableWithoutFocus.js b/src/components/Pressable/PressableWithoutFocus.js index c5c858b52ee2..32f73ccbecaf 100644 --- a/src/components/Pressable/PressableWithoutFocus.js +++ b/src/components/Pressable/PressableWithoutFocus.js @@ -16,14 +16,14 @@ const propTypes = { /** Styles that should be passed to touchable container */ // eslint-disable-next-line react/forbid-prop-types - styles: PropTypes.arrayOf(PropTypes.object), + style: PropTypes.arrayOf(PropTypes.object), /** Proptypes of pressable component used for implementation */ ...genericPressablePropTypes.pressablePropTypes, }; const defaultProps = { - styles: [], + style: [], onLongPress: undefined, }; @@ -52,7 +52,7 @@ class PressableWithoutFocus extends React.Component { onPress={this.pressAndBlur} onLongPress={this.props.onLongPress} ref={(el) => (this.pressableRef = el)} - style={this.props.styles} + style={this.props.style} // eslint-disable-next-line react/jsx-props-no-spreading {...restProps} > From a6333e5ec0562bd658ab4c2275afba16d8f8c1cc Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Mon, 12 Jun 2023 11:43:26 +0200 Subject: [PATCH 08/15] fix lint --- src/components/Pressable/PressableWithFeedback.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js index 1326b77b9baa..eac46ce9d2ba 100644 --- a/src/components/Pressable/PressableWithFeedback.js +++ b/src/components/Pressable/PressableWithFeedback.js @@ -7,7 +7,6 @@ import GenericPressablePropTypes from './GenericPressable/PropTypes'; import OpacityView from '../OpacityView'; import variables from '../../styles/variables'; import * as StyleUtils from '../../styles/StyleUtils'; -import stylePropType from '../../styles/stylePropTypes'; const omittedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrapperStyle']; From 6e47178b1c08df8ad2bb83a45a52bc6c3a5a5f09 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Mon, 12 Jun 2023 12:54:22 +0200 Subject: [PATCH 09/15] change import of PressableWithoutFocus in ProfilePage.js --- src/pages/ProfilePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 932f489be5f4..e2a9cc04454c 100755 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -23,7 +23,7 @@ import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from '../components/Icon/Expensicons'; import MenuItem from '../components/MenuItem'; import AttachmentModal from '../components/AttachmentModal'; -import PressableWithoutFocus from '../components/PressableWithoutFocus'; +import PressableWithoutFocus from '../components/Pressable/PressableWithoutFocus'; import * as Report from '../libs/actions/Report'; import OfflineWithFeedback from '../components/OfflineWithFeedback'; import AutoUpdateTime from '../components/AutoUpdateTime'; From 6bfc85a47f992f6ac3a207f8c59abefec1279a57 Mon Sep 17 00:00:00 2001 From: Robert Kozik Date: Mon, 12 Jun 2023 18:24:31 +0200 Subject: [PATCH 10/15] add accessibilityLabel for ProfilePage, pass styles as arrays --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- src/pages/DetailsPage.js | 2 +- src/pages/ProfilePage.js | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 4f1d4f66f247..c253d3ee9746 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -63,7 +63,7 @@ const ImageRenderer = (props) => { > {({show}) => ( showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} accessibilityRole="button" diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index d37447823ce9..eed3408c77b1 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -137,7 +137,7 @@ class DetailsPage extends React.PureComponent { > {({show}) => ( {({show}) => ( Date: Wed, 14 Jun 2023 14:21:11 +0200 Subject: [PATCH 11/15] Change accessibility role of ImageRenderer pressable to imagebutton Co-authored-by: Rajat Parashar --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 55271a2eccfc..11f67a2a5ff6 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -66,7 +66,7 @@ function ImageRenderer(props) { style={[styles.noOutline]} onPress={show} onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} - accessibilityRole="button" + accessibilityRole="imagebutton" accessibilityLabel={props.translate('common.attachment')} > Date: Wed, 14 Jun 2023 14:22:01 +0200 Subject: [PATCH 12/15] fix omitted prop name in PressableWithoutFocus Co-authored-by: Rajat Parashar --- src/components/Pressable/PressableWithoutFocus.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pressable/PressableWithoutFocus.js b/src/components/Pressable/PressableWithoutFocus.js index 32f73ccbecaf..39f0cd34abec 100644 --- a/src/components/Pressable/PressableWithoutFocus.js +++ b/src/components/Pressable/PressableWithoutFocus.js @@ -46,7 +46,7 @@ class PressableWithoutFocus extends React.Component { } render() { - const restProps = _.omit(this.props, ['children', 'onPress', 'onLongPress', 'styles']); + const restProps = _.omit(this.props, ['children', 'onPress', 'onLongPress', 'style']); return ( Date: Wed, 14 Jun 2023 14:35:31 +0200 Subject: [PATCH 13/15] change accessibilityRole from button to imagebutton --- src/pages/DetailsPage.js | 2 +- src/pages/ProfilePage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js index ae32b265295f..ccc43ac18c26 100755 --- a/src/pages/DetailsPage.js +++ b/src/pages/DetailsPage.js @@ -139,7 +139,7 @@ class DetailsPage extends React.PureComponent { diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 9d176c07d16a..51ebbefe01f7 100755 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -151,7 +151,7 @@ function ProfilePage(props) { style={[styles.noOutline]} onPress={show} accessibilityLabel={props.translate('common.profile')} - accessibilityRole="button" + accessibilityRole="imagebutton" > Date: Thu, 15 Jun 2023 11:07:36 +0200 Subject: [PATCH 14/15] change accessibility label for ImageRenderer component --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.js | 2 +- src/languages/en.js | 1 + src/languages/es.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js index 11f67a2a5ff6..cd9c05344e82 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js @@ -67,7 +67,7 @@ function ImageRenderer(props) { onPress={show} onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))} accessibilityRole="imagebutton" - accessibilityLabel={props.translate('common.attachment')} + accessibilityLabel={props.translate('accessibilityHints.viewAttachment')} > Date: Thu, 15 Jun 2023 11:11:43 +0200 Subject: [PATCH 15/15] fix typo in translations Co-authored-by: Rajat Parashar --- src/languages/en.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/en.js b/src/languages/en.js index a4ee14d70c96..55fba198d7d0 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1397,7 +1397,7 @@ export default { chatUserDisplayNames: 'Chat user display names', scrollToNewestMessages: 'Scroll to newest messages', prestyledText: 'Prestyled text', - viewAttachment: 'View Attachment', + viewAttachment: 'View attachment', }, parentReportAction: { deletedMessage: '[Deleted message]',