From f7320b47727c872ea2e47b0e503b0008b7335304 Mon Sep 17 00:00:00 2001 From: Uraz Akgultan Date: Tue, 3 Jan 2023 07:29:34 +0100 Subject: [PATCH 01/26] feat(accordion-native): add accessibility --- .../accordion-native/CHANGELOG.md | 4 ++ .../accordion-native/package.json | 2 +- .../src/Accordion.editorConfig.ts | 4 ++ .../accordion-native/src/Accordion.tsx | 2 +- .../accordion-native/src/Accordion.xml | 60 +++++++++++-------- .../src/components/AccordionGroup.tsx | 15 ++++- .../src/components/GroupIcon.tsx | 12 +++- .../accordion-native/src/package.xml | 2 +- .../typings/AccordionProps.d.ts | 8 +++ 9 files changed, 78 insertions(+), 31 deletions(-) diff --git a/packages/pluggableWidgets/accordion-native/CHANGELOG.md b/packages/pluggableWidgets/accordion-native/CHANGELOG.md index f00e0ad25..a2e6aebc4 100644 --- a/packages/pluggableWidgets/accordion-native/CHANGELOG.md +++ b/packages/pluggableWidgets/accordion-native/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Added + +- Added accessibility. + ## [2.2.0] - 2022-04-07 ### Added diff --git a/packages/pluggableWidgets/accordion-native/package.json b/packages/pluggableWidgets/accordion-native/package.json index b14e55dad..a7b63fdf9 100644 --- a/packages/pluggableWidgets/accordion-native/package.json +++ b/packages/pluggableWidgets/accordion-native/package.json @@ -1,7 +1,7 @@ { "name": "accordion-native", "widgetName": "Accordion", - "version": "2.2.0", + "version": "2.3.0", "license": "Apache-2.0", "repository": { "type": "git", diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts b/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts index 906d50241..52c5ca693 100644 --- a/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts +++ b/packages/pluggableWidgets/accordion-native/src/Accordion.editorConfig.ts @@ -126,6 +126,10 @@ export function getProperties(values: AccordionPreviewProps, defaultProperties: if (group.groupCollapsed !== "groupStartDynamic") { hidePropertyIn(defaultProperties, values, "groups", index, "groupCollapsedDynamic"); } + if (group.accessible !== "yes") { + hidePropertyIn(defaultProperties, values, "groups", index, "screenReaderCaption"); + hidePropertyIn(defaultProperties, values, "groups", index, "screenReaderHint"); + } }); if (!values.collapsible) { diff --git a/packages/pluggableWidgets/accordion-native/src/Accordion.tsx b/packages/pluggableWidgets/accordion-native/src/Accordion.tsx index 39b74cf41..348fafcce 100644 --- a/packages/pluggableWidgets/accordion-native/src/Accordion.tsx +++ b/packages/pluggableWidgets/accordion-native/src/Accordion.tsx @@ -78,7 +78,7 @@ export function Accordion(props: Props): ReactElement | null { }, [props.groups]); return ( - + {props.groups.map( (group, index): ReactElement => ( - + + Accordion Toggle the display of sections of content Input elements @@ -13,12 +9,12 @@ Groups - + Header type - + Text Custom @@ -26,7 +22,7 @@ Render mode - + Heading 1 Heading 2 @@ -38,7 +34,7 @@ Text - + Header Koptekst @@ -46,20 +42,20 @@ Header - + Content - + Visible - - + + Start as - + Expanded Collapsed @@ -68,21 +64,37 @@ Collapsed expression - - + + + + + Accessible + + + Yes + No + + + + Screen reader caption + + + + Screen reader hint + Collapsed attribute - + - + On change - + @@ -91,7 +103,7 @@ Collapsible - + Expanded groups @@ -106,7 +118,7 @@ Show Icon - + Right Left @@ -115,11 +127,11 @@ Icon collapsed - + Icon expanded - + diff --git a/packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx b/packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx index b02da4dc1..d5d9173bf 100644 --- a/packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx +++ b/packages/pluggableWidgets/accordion-native/src/components/AccordionGroup.tsx @@ -32,21 +32,32 @@ export function AccordionGroup({ visible, style }: AccordionGroupProps): ReactElement | null { + const isAccessible = group.accessible === "yes"; return visible ? ( onPressGroupHeader(group, index) : null} + accessible={isAccessible} + accessibilityLabel={ + group.screenReaderCaption?.value || + (group.headerRenderMode === "text" ? group.headerText.value : undefined) + } + accessibilityHint={group.screenReaderHint?.value} + accessibilityState={{ expanded: isExpanded }} > {group.headerRenderMode === "text" ? ( - + {group.headerText.value} ) : ( - {group.headerContent} + + {group.headerContent} + )} {icon !== "no" && collapsible ? ( | undefined; iconExpanded: DynamicValue | undefined; style: AccordionIconStyle; + accessible: boolean; } -export function GroupIcon({ iconCollapsed, iconExpanded, isExpanded, style }: GroupIconProps): ReactElement | null { +export function GroupIcon({ + iconCollapsed, + iconExpanded, + isExpanded, + style, + accessible +}: GroupIconProps): ReactElement | null { const customIconsConfigured = iconCollapsed?.value ?? iconExpanded?.value; const customIconSource = iconCollapsed?.value || { type: "glyph", iconClass: "glyphicon-chevron-down" }; const customExpandedIconSource = iconExpanded?.value || { type: "glyph", iconClass: "glyphicon-chevron-up" }; @@ -41,11 +48,12 @@ export function GroupIcon({ iconCollapsed, iconExpanded, isExpanded, style }: Gr }, [isExpanded, animatedValue]); return customIconsConfigured ? ( - + ) : ( - + diff --git a/packages/pluggableWidgets/accordion-native/typings/AccordionProps.d.ts b/packages/pluggableWidgets/accordion-native/typings/AccordionProps.d.ts index 893ff1f71..a40d2962c 100644 --- a/packages/pluggableWidgets/accordion-native/typings/AccordionProps.d.ts +++ b/packages/pluggableWidgets/accordion-native/typings/AccordionProps.d.ts @@ -12,6 +12,8 @@ export type HeaderTextRenderModeEnum = "heading1" | "heading2" | "heading3" | "h export type GroupCollapsedEnum = "groupStartExpanded" | "groupStartCollapsed" | "groupStartDynamic"; +export type AccessibleEnum = "yes" | "no"; + export interface GroupsType { headerRenderMode: HeaderRenderModeEnum; headerTextRenderMode: HeaderTextRenderModeEnum; @@ -21,6 +23,9 @@ export interface GroupsType { visible: DynamicValue; groupCollapsed: GroupCollapsedEnum; groupCollapsedDynamic?: DynamicValue; + accessible: AccessibleEnum; + screenReaderCaption?: DynamicValue; + screenReaderHint?: DynamicValue; groupCollapsedAttribute?: EditableValue; groupOnChange?: ActionValue; } @@ -38,6 +43,9 @@ export interface GroupsPreviewType { visible: string; groupCollapsed: GroupCollapsedEnum; groupCollapsedDynamic: string; + accessible: AccessibleEnum; + screenReaderCaption: string; + screenReaderHint: string; groupCollapsedAttribute: string; groupOnChange: {} | null; } From 091c5be7e5d6341a253d9910fba4222088b3bf69 Mon Sep 17 00:00:00 2001 From: Uraz Akgultan Date: Tue, 3 Jan 2023 07:51:55 +0100 Subject: [PATCH 02/26] test(accordion-native): fix unit test --- .../src/__tests__/Accordion.spec.tsx | 2 ++ .../__snapshots__/Accordion.spec.tsx.snap | 16 ++++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/packages/pluggableWidgets/accordion-native/src/__tests__/Accordion.spec.tsx b/packages/pluggableWidgets/accordion-native/src/__tests__/Accordion.spec.tsx index f620a3ba2..1b90d841a 100644 --- a/packages/pluggableWidgets/accordion-native/src/__tests__/Accordion.spec.tsx +++ b/packages/pluggableWidgets/accordion-native/src/__tests__/Accordion.spec.tsx @@ -11,6 +11,7 @@ const defaultProps = (): Props => ({ style: [], groups: [ { + accessible: "yes", headerRenderMode: "text", headerTextRenderMode: "heading1", headerText: dynamicValue("Header1"), @@ -23,6 +24,7 @@ const defaultProps = (): Props => ({ groupOnChange: actionValue() }, { + accessible: "yes", headerRenderMode: "custom", headerTextRenderMode: "heading1", headerText: dynamicValue(undefined), diff --git a/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap b/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap index 2e98e9cb1..331c7050f 100644 --- a/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap +++ b/packages/pluggableWidgets/accordion-native/src/__tests__/__snapshots__/Accordion.spec.tsx.snap @@ -2,6 +2,7 @@ exports[`Accordion in collapsible & single expanded group mode renders correctly 1`] = ` Date: Tue, 3 Jan 2023 07:52:49 +0100 Subject: [PATCH 03/26] feat(activity-indicator-native): add accessibility --- .../activity-indicator-native/CHANGELOG.md | 4 +++ .../activity-indicator-native/package.json | 2 +- .../src/ActivityIndicator.editorConfig.ts | 10 ++++++ .../src/ActivityIndicator.tsx | 33 ++++++++++--------- .../src/ActivityIndicator.xml | 24 ++++++++++++-- .../src/__tests__/ActivityIndicator.spec.tsx | 1 + .../ActivityIndicator.spec.tsx.snap | 12 +++++++ .../activity-indicator-native/src/package.xml | 2 +- .../typings/ActivityIndicatorProps.d.ts | 11 +++++-- 9 files changed, 78 insertions(+), 21 deletions(-) diff --git a/packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md b/packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md index bc3858add..bd72e49ae 100644 --- a/packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md +++ b/packages/pluggableWidgets/activity-indicator-native/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +### Added + +- Added accessibility. + ## [2.2.0] - 2022-04-07 ### Added diff --git a/packages/pluggableWidgets/activity-indicator-native/package.json b/packages/pluggableWidgets/activity-indicator-native/package.json index 04c218e07..132c7164e 100644 --- a/packages/pluggableWidgets/activity-indicator-native/package.json +++ b/packages/pluggableWidgets/activity-indicator-native/package.json @@ -1,7 +1,7 @@ { "name": "activity-indicator-native", "widgetName": "ActivityIndicator", - "version": "2.2.0", + "version": "2.3.0", "license": "Apache-2.0", "repository": { "type": "git", diff --git a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.editorConfig.ts b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.editorConfig.ts index 066565891..9f4483b61 100644 --- a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.editorConfig.ts +++ b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.editorConfig.ts @@ -1,5 +1,6 @@ import { RowLayoutProps } from "@mendix/piw-utils-internal"; import { ActivityIndicatorPreviewProps } from "../typings/ActivityIndicatorProps"; +import { hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools"; import StructurePreviewActivityIndicatorPrimaryLightSVG from "./assets/ActivityIndicator.primary.light.svg"; import StructurePreviewActivityIndicatorPrimaryDarkSVG from "./assets/ActivityIndicator.primary.dark.svg"; @@ -23,3 +24,12 @@ export const getPreview = (_: ActivityIndicatorPreviewProps, isDarkMode: boolean } ] }); + +export function getProperties(values: ActivityIndicatorPreviewProps, defaultProperties: Properties): Properties { + if (values.accessible === "no") { + hidePropertyIn(defaultProperties, values, "screenReaderCaption"); + hidePropertyIn(defaultProperties, values, "screenReaderHint"); + } + + return defaultProperties; +} diff --git a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tsx b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tsx index 79576deb3..9cc77a0f1 100644 --- a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tsx +++ b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.tsx @@ -1,24 +1,27 @@ -import { flattenStyles } from "@mendix/piw-native-utils-internal"; -import { Component, createElement } from "react"; +import { createElement, ReactElement } from "react"; import { ActivityIndicator as RNActivityIndicator, View } from "react-native"; +import { flattenStyles } from "@mendix/piw-native-utils-internal"; + import { ActivityIndicatorProps } from "../typings/ActivityIndicatorProps"; import { ActivityIndicatorStyle, defaultActivityStyle } from "./ui/Styles"; export type Props = ActivityIndicatorProps; -export class ActivityIndicator extends Component { - private readonly styles = flattenStyles(defaultActivityStyle, this.props.style); +export function ActivityIndicator(props: Props): ReactElement { + const styles = flattenStyles(defaultActivityStyle, props.style); - render(): JSX.Element { - return ( - - - - ); - } + return ( + + + + ); } diff --git a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.xml b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.xml index 9a4aa1a67..b9d975bd9 100644 --- a/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.xml +++ b/packages/pluggableWidgets/activity-indicator-native/src/ActivityIndicator.xml @@ -1,4 +1,4 @@ - + Activity indicator Display a circular loading indicator. @@ -6,7 +6,27 @@ Display - + + + + + + Accessible + + + Yes + No + + + + Screen reader caption + + + + Screen reader hint + + + diff --git a/packages/pluggableWidgets/activity-indicator-native/src/__tests__/ActivityIndicator.spec.tsx b/packages/pluggableWidgets/activity-indicator-native/src/__tests__/ActivityIndicator.spec.tsx index 89259c0d4..5a6592f63 100644 --- a/packages/pluggableWidgets/activity-indicator-native/src/__tests__/ActivityIndicator.spec.tsx +++ b/packages/pluggableWidgets/activity-indicator-native/src/__tests__/ActivityIndicator.spec.tsx @@ -5,6 +5,7 @@ import { ActivityIndicator, Props } from "../ActivityIndicator"; const defaultProps: Props = { name: "activity-indicator-test", + accessible: "yes", style: [] }; diff --git a/packages/pluggableWidgets/activity-indicator-native/src/__tests__/__snapshots__/ActivityIndicator.spec.tsx.snap b/packages/pluggableWidgets/activity-indicator-native/src/__tests__/__snapshots__/ActivityIndicator.spec.tsx.snap index 5febbfc61..49a07ea01 100644 --- a/packages/pluggableWidgets/activity-indicator-native/src/__tests__/__snapshots__/ActivityIndicator.spec.tsx.snap +++ b/packages/pluggableWidgets/activity-indicator-native/src/__tests__/__snapshots__/ActivityIndicator.spec.tsx.snap @@ -9,6 +9,12 @@ exports[`ActivityIndicator renders with custom styles 1`] = ` } > - + diff --git a/packages/pluggableWidgets/activity-indicator-native/typings/ActivityIndicatorProps.d.ts b/packages/pluggableWidgets/activity-indicator-native/typings/ActivityIndicatorProps.d.ts index 5c2c727e7..00a809abf 100644 --- a/packages/pluggableWidgets/activity-indicator-native/typings/ActivityIndicatorProps.d.ts +++ b/packages/pluggableWidgets/activity-indicator-native/typings/ActivityIndicatorProps.d.ts @@ -4,11 +4,16 @@ * @author Mendix UI Content Team */ import { CSSProperties } from "react"; +import { DynamicValue } from "mendix"; + +export type AccessibleEnum = "yes" | "no"; export interface ActivityIndicatorProps