- TypeScript 74%
- MDX 16.1%
- SCSS 5.5%
- JavaScript 3.1%
- CSS 1.1%
- Other 0.2%
e77c7d9f7a<!-- @license CC0-1.0 --> # Correct two contradictions on the Character Count page ## Links - [Character Count docs on this branch](https://designsystem.amsterdam/demo-DES-1996-char-counter-docs-contradictions/?path=/docs/components-forms-character-count--docs#accessibility) - [#2796](https://github.com/Amsterdam/design-system/pull/2796) — added `formatText` and the six locale formatters. - [#2841](https://github.com/Amsterdam/design-system/pull/2841) — wrote the Design and Accessibility prose a week earlier. ## What Corrects two statements on the Character Count documentation page that contradict other statements on the same page. - Features said the user "are told they've entered too many characters". - Accessibility said the text "is fixed Dutch … and cannot be configured". ## Why Both were true when written and are not true now. `formatText` and six locale formatters (`ar`, `de`, `en`, `fr`, `nl`, `tr`) arrived in #2796 on 5 August. The Design and Accessibility sections came from #2841 on 27 July and were never revisited, so the page documents `formatText` under Examples and denies it exists under Accessibility. The Features claim was never true. Nothing tells the user in words that they are over the limit — that is exactly the WCAG 1.4.1 shortcoming the Accessibility section reports, and the claim talked readers out of noticing it. An accessibility section that overstates what a component does is worse than no section: it is the part a reader is most likely to take on trust. ## How Prose only, three lines changed in one file. Features now says what actually happens over the limit: the count keeps counting, so it reads '12 van 10 tekens'. The surrounding sentences about not restricting input and editing down are unchanged. Accessibility now describes `formatText`, what the function receives, and why that leaves word order and plural rules to the caller. A third sentence covers setting `lang` to match, which is the part that affects pronunciation. The Design section and the "signalled by colour alone" paragraph are untouched. Both are accurate, and the second describes the shortcoming that DES-1958 fixes by replacing this component with Form Field Status. ## Checklist - [x] Add or update unit tests - [x] Add or update documentation - [x] Add or update stories - [x] Add or update exports in index.\* files - [x] Comment `/chromatic test` and verify visual regression tests pass - [x] Start the PR title with a Conventional Commit prefix, [as explained here](https://github.com/Amsterdam/design-system/blob/main/documentation/publishing.md?plain=1#L11) ## Additional notes - This lands ahead of DES-1958, which replaces Character Count with Form Field Status and rewrites this page. It is split out because a false accessibility claim should not sit on `develop` for the length of that ticket. --------- Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl> |
||
|---|---|---|
| .github | ||
| .husky | ||
| documentation | ||
| packages | ||
| packages-proprietary | ||
| plop-templates | ||
| storybook | ||
| stylelint | ||
| .editorconfig | ||
| .gitattributes | ||
| .gitignore | ||
| .nano-staged.json | ||
| .npmpackagejsonlintrc.json | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc.json | ||
| .release-please-manifest.json | ||
| .stylelintignore | ||
| .stylelintrc.json | ||
| AGENTS.md | ||
| CONTRIBUTING.md | ||
| eslint.config.mjs | ||
| eslint.rules.mjs | ||
| LICENSE.md | ||
| LICENSE.txt | ||
| NOTICE.md | ||
| package.json | ||
| plopfile.mjs | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| publiccode.yml | ||
| README.md | ||
| release-please-config.json | ||
| tsconfig.json | ||
Amsterdam Design System
This is the guide for the user interfaces of all digital products and services provided by the City of Amsterdam.
We offer reusable components, patterns and guides for teams that work on our websites. This helps everyone work faster and better, with more time to create value. To our citizens and businesses, all our channels look the same and work similarly; they are broadly accessible and evoke trust.
We aim to create libraries for, or support otherwise, Figma, CSS, React, React Native, Mendix, and Drupal.
Related resources
A Storybook portal demonstrates our components and documentation.
Our Figma Library contains the design of our components and patterns.
Getting started
See the getting started documentation for developers on how to use our React components.
AI assistance
If you build with an AI coding assistant, connect it to our Model Context Protocol (MCP) server. Your assistant then works with real Amsterdam Design System components and their correct properties, instead of inventing markup. See connecting AI assistants to set it up.
Contributing
See the documentation for contributors.
Code of conduct
We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. Read our Code of Conduct if you haven’t already.
NL Design System
This project is part of a community initiative to use NL Design System components for websites that comply with the Amsterdam Design System.
Join the #nl-design-system Slack via praatmee.codefor.nl for more information and to learn about things happening in our open-source community.
Thanks
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.
Licence
This project is free and open-source software licenced under the European Union Public License (EUPL) v1.2 or higher.
Documentation is licenced as Creative Commons Zero 1.0 Universal (CC0-1.0).
The open-source licences do not cover the assets in the packages-proprietary directory.
Each directory in the packages-proprietary directory specifies the applicable licence for that directory.
Please read the notice for more information about proprietary assets.