Repository navigation
Text char count new - #2001
Text char count new#2001shravani-0811 wants to merge 6 commits into
Conversation
There was a problem hiding this comment.
can you please share the canvas theme code changes for the same
repo : https://github.com/adobe/aem-forms-theme-canvas
There was a problem hiding this comment.
|
There are test failures related to the text input component only, can you please resolve the same https://app.circleci.com/pipelines/github/adobe/aem-core-forms-components?branch=text-char-count-new |
5de1eb5 to
2242461
Compare
Accessibility Violations Found
|
1 similar comment
Accessibility Violations Found
|
|
still some tests are failing can you please check why (as dev doesn't have any failing tests http://app.circleci.com/pipelines/github/adobe/aem-core-forms-components/10157/workflows/0bd778d4-e8d6-4e28-8b8f-7c6564be04a2/jobs/42266/tests)? Out of these the tests related to your component is "shows a static character count placeholder in the authoring canvas", can you please check this ? |
| charCountCurrent.textContent = this.widget.value ? this.widget.value.length : 0; | ||
| }; | ||
| updateCharCount(); | ||
| this.widget.addEventListener('input', updateCharCount); |
There was a problem hiding this comment.
The counter only refreshes on the input event, so it goes stale whenever the value changes without typing like using rules, prefill service, default value, and reset/clear. None of these fire input, also add test cases around this in textinput.runtime.cy.js
| <div data-sly-test="${text.showCharacterCount}" | ||
| id="${widgetId}-charcount" | ||
| class="cmp-adaptiveform-textinput__charcount" | ||
| aria-live="polite"><span class="cmp-adaptiveform-textinput__charcount-current">0</span><span data-sly-test="${text.maxLength}" class="cmp-adaptiveform-textinput__charcount-max"> / ${text.maxLength}</span></div> |
There was a problem hiding this comment.
Two a11y points on this div:
id="${widgetId}-charcount"isn't referenced anywhere. If the intent is to associate the count with the field, add it to the textarea'saria-describedby. Note thatFormFieldBasebuildsaria-describedbyin#syncAriaDescribedBy, so it may need to be added there or it could get overwritten at runtime. Otherwise drop the id.aria-live="polite"on a counter that changes every keystroke will make screen readers announce constantly. Suggestaria-live="off"on the counter. If an announcement is wanted, do it at thresholds (for example when approaching or reachingmaxLength) through a separate visually-hidden live region.
| <div data-sly-test="${text.showCharacterCount}" | ||
| id="${widgetId}-charcount" | ||
| class="cmp-adaptiveform-textinput__charcount" | ||
| aria-live="polite"><span class="cmp-adaptiveform-textinput__charcount-current">0</span><span data-sly-test="${text.maxLength}" class="cmp-adaptiveform-textinput__charcount-max"> / ${text.maxLength}</span></div> |
There was a problem hiding this comment.
We need to ensure every component follows proper accessibility compliance, can you please follow the latest accessibility requirements for this ?
Accessibility Violations Found
|
1 similar comment
Accessibility Violations Found
|
one test related to your change is still failing can you please look into the same, |
- Keep character count in sync when the value changes via rules, prefill, default value, or reset/clear (not just on typing), by also refreshing it from an overridden updateValue(). - Drop the unused charcount div id and set aria-live="off" so screen readers don't announce the count on every keystroke. - Fix a save/reload race in the authoring canvas char-count test by using cy.submitConfigureDialog() instead of a raw dialog-submit click. - Add a runtime test verifying the char count stays in sync when the value is set programmatically (simulating rules/prefill/reset). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
4f3a484 to
39fb26d
Compare
Accessibility Violations Found
|
1 similar comment
Accessibility Violations Found
|
This branch has not been deployed
4 participants
Description
Enhancing the text area to show the character count.
Related Issue
https://jira.corp.adobe.com/browse/FORMS-13475
Motivation and Context
How Has This Been Tested?
Backend (Java) unit tests — bundles/af-core :
• mvn clean test -Dtest=TextInputImplTest → 66/66 tests passed, covering the new characterCount / maxLength -driven counter logic in TextInputImpl , TextInput model, and the exporter-textinput-charactercount.json exporter fixture.
• Full module regression: mvn clean test -Dspotbugs.skip=true → 944/944 tests passed, 0 failures/errors (BUILD SUCCESS), confirming no regressions in other components.
• (SpotBugs check was skipped for this run only because of pre-existing findings in unrelated files, e.g. FormStructureParserImpl , ReviewDataSourceServlet , ComponentUtils , AbstractOptionsFieldImpl — none touched by this change.)
Frontend/e2e (Cypress specs):
• Added textinput.authoring.cy.js and textinput.runtime.cy.js covering character-count display/behavior in the dialog and runtime views.
• Verified with node --check (syntax valid) since running the full Cypress suite requires a live AEM author instance (per docs/architecture/overview.md ), which wasn't available in this environment — these should be run against CircleCI/local AEM before merge.
• Manually reviewed textinputview.js , editDialog.js , and textinput.html changes against the added specs for correctness.
Manual verification: Confirmed character-count clientlib styling ( textinput.less , textinputview.css ) and dialog changes ( _cq_dialog , editDialog.js ) render as expected in the sample content ( samples/textinput/basic/.content.xml ).
Screenshots (if appropriate):
Types of changes
Checklist: