From 1f97423895546cb0a3f9a95bd5f2f4159c48305c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karol=20Szafra=C5=84ski?= Date: Wed, 4 Jun 2025 11:24:55 +0200 Subject: [PATCH 01/14] [WIP] Add `isAccessibilityElement` to Widget Change-Id: I788b689cfa800e7d9928a58769dcb3011475f88d --- doc/api/Widget.json | 5 ++ snippets/accessibility-base.jsx | 145 ++++++++++++++++++++++++++++++++ src/tabris/Widget.ts | 8 +- 3 files changed, 156 insertions(+), 2 deletions(-) create mode 100644 snippets/accessibility-base.jsx diff --git a/doc/api/Widget.json b/doc/api/Widget.json index c16875b7..885c5324 100644 --- a/doc/api/Widget.json +++ b/doc/api/Widget.json @@ -365,6 +365,11 @@ "accessibilityLabel": { "type": "string", "description": "Provides a textual description of the widget for screen readers, describing its purpose or function to visually impaired users." + }, + "isAccessibilityElement": { + "type": "boolean", + "default": "false", + "description": "If true, this widget is treated as accessibility element by assistive technologies." } }, "events": { diff --git a/snippets/accessibility-base.jsx b/snippets/accessibility-base.jsx new file mode 100644 index 00000000..7e4a9576 --- /dev/null +++ b/snippets/accessibility-base.jsx @@ -0,0 +1,145 @@ +import {Button, TextInput, Switch, Slider, Picker, CheckBox, TextView, ImageView, ProgressBar, ActivityIndicator, Composite, ScrollView, Page, TabFolder, Tab, Canvas, WebView, CollectionView, contentView, drawer, StackLayout, RowLayout} from 'tabris'; + +// Accessibility Properties Visualization Snippet + +function getAccessibilityPropsText(id) { + const widget = contentView.find('#' + id).only(); + if (!widget) { + return id + ': not found'; + } + return ( + id + ' props:\n' + + 'accessibilityLabel: ' + widget.accessibilityLabel + '\n' + + 'accessibilityHidden: ' + widget.accessibilityHidden + '\n' + + 'isAccessibilityElement: ' + widget.isAccessibilityElement + ); +} + +function logAccessibilityProps(id, name) { + setTimeout(() => { + const widget = contentView.find('#' + id).only(); + if (widget) { + console.log(`${name} [id=${id}]:`, { + accessibilityLabel: widget.accessibilityLabel, + accessibilityHidden: widget.accessibilityHidden, + isAccessibilityElement: widget.isAccessibilityElement + }); + } else { + console.log(`${name} [id=${id}]: not found`); + } + }, 0); +} + +function updateAllAccessibilityTextViews() { + const textViews = contentView.find(TextView).toArray(); + textViews.forEach(tv => { + if (tv.id && tv.id.startsWith('accessibility-')) { + const widgetId = tv.id.replace('accessibility-', ''); + tv.text = getAccessibilityPropsText(widgetId); + } + }); +} + +contentView.append( + + + +