From 504423c5351cd2be97db0f4c99a8a51bd9e640d9 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Tue, 23 Apr 2024 10:37:29 +0200 Subject: [PATCH 01/68] docs: add getting started and clean up docs (#2490) --------- Co-authored-by: Davide Mininni <101575400+DavideMininni-Fincons@users.noreply.github.com> Co-authored-by: Tommmaso Menga Co-authored-by: Lukas Spirig --- .github/ISSUE_TEMPLATE/bug-report.yml | 4 +- .../ISSUE_TEMPLATE/contributing-request.yml | 4 +- .../feature-request-or-enhancement.yml | 4 +- .github/ISSUE_TEMPLATE/question.yml | 4 +- .github/pull_request_template.md | 6 +- CODE_OF_CONDUCT.md | 4 - LICENSE | 2 +- README.md | 55 ++-- STORYBOOK.md | 45 --- docs/CICD.md | 27 -- docs/CODE_OF_CONDUCT.md | 110 +++++++ .../CODING_STANDARDS.md | 161 ++++++---- CONTRIBUTING.md => docs/CONTRIBUTING.md | 5 +- docs/DEVELOP.md | 132 -------- DEVELOPER.md => docs/DEVELOPER.md | 16 +- docs/GETTING_STARTED.md | 290 ++++++++++++++++++ docs/README.md | 17 - REVIEW.md => docs/REVIEW.md | 12 +- docs/STATES.md | 49 --- docs/TERMINOLOGY.md | 3 - docs/VISION.md | 99 +++++- 21 files changed, 658 insertions(+), 391 deletions(-) delete mode 100644 CODE_OF_CONDUCT.md delete mode 100644 STORYBOOK.md delete mode 100644 docs/CICD.md create mode 100644 docs/CODE_OF_CONDUCT.md rename CODING_STANDARDS.md => docs/CODING_STANDARDS.md (76%) rename CONTRIBUTING.md => docs/CONTRIBUTING.md (97%) delete mode 100644 docs/DEVELOP.md rename DEVELOPER.md => docs/DEVELOPER.md (84%) create mode 100644 docs/GETTING_STARTED.md delete mode 100644 docs/README.md rename REVIEW.md => docs/REVIEW.md (92%) delete mode 100644 docs/STATES.md delete mode 100644 docs/TERMINOLOGY.md diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index 79992defb9..a9bcad9d01 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -15,9 +15,9 @@ body: attributes: label: Preflight Checklist options: - - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project. + - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project. required: true - - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to. + - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to. required: true - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success. required: true diff --git a/.github/ISSUE_TEMPLATE/contributing-request.yml b/.github/ISSUE_TEMPLATE/contributing-request.yml index 6d7d499d8e..8a2c2b2129 100644 --- a/.github/ISSUE_TEMPLATE/contributing-request.yml +++ b/.github/ISSUE_TEMPLATE/contributing-request.yml @@ -10,9 +10,9 @@ body: attributes: label: Preflight Checklist options: - - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project. + - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project. required: true - - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to. + - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to. required: true - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success. required: true diff --git a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml index cc8ba44309..4a8e3ee19f 100644 --- a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml +++ b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml @@ -10,9 +10,9 @@ body: attributes: label: Preflight Checklist options: - - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project. + - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project. required: true - - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to. + - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to. required: true - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success. required: true diff --git a/.github/ISSUE_TEMPLATE/question.yml b/.github/ISSUE_TEMPLATE/question.yml index c07a0c8f92..6d6443291f 100644 --- a/.github/ISSUE_TEMPLATE/question.yml +++ b/.github/ISSUE_TEMPLATE/question.yml @@ -10,9 +10,9 @@ body: attributes: label: Preflight Checklist options: - - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project. + - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project. required: true - - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to. + - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to. required: true - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success. required: true diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 1c376c50bf..af6a71f28a 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -2,8 +2,8 @@ -- [ ] I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project. -- [ ] I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to. +- [ ] I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project. +- [ ] I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to. - [ ] I have searched the [pull request tracker](https://github.com/lyne-design-system/lyne-components/pulls) for a Pull Request (PR) that matches the one I want to submit, without success. ## Issue @@ -17,7 +17,7 @@ Please check if your PR fulfills the following requirements: - [ ] Tests for the changes have been added (for bug fixes / features) - [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features) -See [Review Guidelines](../REVIEW.md) for more information what is checked during review process. +See [Review Guidelines](../docs/REVIEW.md) for more information what is checked during review process. ## Changes diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index 5a0a3772cd..0000000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,4 +0,0 @@ -# Code of Conduct - -This project is governed by [Lyne's Code of Conduct](https://github.com/lyne-design-system/lyne/blob/main/CODE_OF_CONDUCT.md). -All contributors and participants agree to abide by its terms. diff --git a/LICENSE b/LICENSE index a5b37cc3a7..70a7c91766 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018-2023, SBB AG +Copyright (c) 2018-2024, SBB AG Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 3fd5b61341..507cea4f10 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,30 @@ -

- Lyne Components -

+# Lyne Components -> _Lyne Components_ are the building blocks of the [Lyne Design System](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#lyne) -> and are based on standard compliant [Web Components](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#web-components) -> created using [Lit](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#lit) and -> browsable through [Storybook](https://github.com/lyne-design-system/lyne/blob/main/docs/TERMINOLOGY.md#storybook) +> Lyne Components are the building blocks of the Lyne Design System +> and are based on standard compliant Web Components +> created using [Lit](https://lit.dev/) and +> browsable through [Storybook](https://lyne-storybook.app.sbb.ch/) -
+## 🎯 Our aim -## ⚠️ Notice +To fulfill our [Vision](./docs/VISION.md), we are building and maintaining Lyne, our Design System, which is and acts +as our common language β€” our Single Source of Truth. +For this purpose we use [Design Tokens](https://github.com/lyne-design-system/lyne-design-tokens) as our design abstractions. +Those [Design Tokens](https://github.com/lyne-design-system/lyne-design-tokens) are consumed by Lyne Components and are integrated within our documentation. -**_Lyne Components_ are πŸ§ͺexperimental at the moment β€” with enthusiasm.
Don't use the project until it has left infancy.** +Lyne Design Tokens and Lyne Components are available for developers and designers. -
+## πŸ“š Documentation + +- General docs: [digital.sbb.ch](https://digital.sbb.ch) +- Component docs: [Storybook](https://lyne-storybook.app.sbb.ch) +- [Getting started guide](./docs/GETTING_STARTED.md) -## πŸ’» What we're working on right now +## πŸ”— Packages -Check the current tasks we're working on over [here](https://github.com/lyne-design-system/lyne-components/projects/4) but since the project is still **πŸ§ͺ experimental** and in rapid development not all tasks we're working on are reflected as issues (or tickets) since this would be too cumbersome at the current development stage. Also check out over [TODOS](./TODOS.md) what all needs to be done (at some point). +- [NPM Packages](https://www.npmjs.com/search?q=%40sbb-esta%2Flyne-) -## Browser and screen reader support +## πŸ–₯ Browser and screen reader support This library supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and Edge. @@ -30,24 +35,14 @@ macOS: VoiceOver with Safari / Chrome. iOS: VoiceOver with Safari Android: Android Accessibility Suite (formerly TalkBack) with Chrome. -## ⛩️ Storybook - -The latest still **πŸ§ͺ experimental** version of the Storybook component browser for _Lyne Components_ can be found [here](https://lyne-storybook.app.sbb.ch/). - -## 🍱 npm - -The current **πŸ§ͺ experimental** build of Lyne Components can be found on [npm](https://www.npmjs.com/package/@sbb-esta/lyne-components). - -## πŸ“š Documentation - -Check the [docs](docs/README.md) directory for our documentation which we will continuously enhance. -Component specific docs are available on our [storybook](https://lyne-storybook.app.sbb.ch). -General docs can be read on [digital.sbb.ch](https://digital.sbb.ch). - ## πŸ™Œ Contributing -See our [contributing guide](CONTRIBUTING.md) and check also our [code of conduct](CODE_OF_CONDUCT.md) πŸ‘€. +- [General contribution guide](./docs/CONTRIBUTING.md) +- [Developer guide](./docs/DEVELOPER.md) for developers to get started working with this repo. +- [Coding standards](./docs/CODING_STANDARDS.md) for developers. +- [Code of conduct](./docs/CODE_OF_CONDUCT.md) ## πŸ“ License -This software is published by SBB-CFF-FFS under the [MIT](/LICENSE) licence and unsupported unless otherwise clearly stated. Use at your own risk. +This software is published by SBB-CFF-FFS under the [MIT](/LICENSE) licence and unsupported unless otherwise clearly stated. +Use at your own risk. diff --git a/STORYBOOK.md b/STORYBOOK.md deleted file mode 100644 index 2075c6bb9d..0000000000 --- a/STORYBOOK.md +++ /dev/null @@ -1,45 +0,0 @@ -# Connection between lyne-components and lyne-documentation - -## Workflow - -To automate the documentation process, we use the information that we provide in the `.stories.js` files render the components and their variants on the documentation platform automatically. - -Therefore, we have some extra information that we provide inside the `.stories.js` files. - -## Stories Example - -Let's look at a simple story: - -```javascript -export const SimpleStory = (args) => ; -``` - -You can define properties like title and specific container styling for a story like this: - -```javascript -SimpleStory.documentation = { - container: { - styles: { - 'background-color': '#eb0000', - }, - }, - title: 'Title for the story', -}; -``` - -## Global properties - -Sometimes, we need to use args on component to render a story which would not be necessary to render the component. We just might have to use it for the story to work properly. - -Look at the `sbb-button.stories.js` stories for example: there we use the property `iconslot` to define which icon should be rendered for the button. But in a real world application, developers would define the icon via a slot directly. - -In this case it is important that we `hide` this property from the documentation. To do so, you can define such properties in the default export of the stories file: - -```javascript -export default { - documentation: { - disableArgs: ['iconslot'], - }, - title: 'Sample Lyne Component', -}; -``` diff --git a/docs/CICD.md b/docs/CICD.md deleted file mode 100644 index 092fb2d8de..0000000000 --- a/docs/CICD.md +++ /dev/null @@ -1,27 +0,0 @@ -# CI/CD - -## SemVer - -We adhere to the semantic versioning standard. With each merge into main, the potential next version is automatically determined by the `sematic-release` package. - -Only commits that adhere to the `Conventional Commits` standard ([https://www.conventionalcommits.org/](https://www.conventionalcommits.org/)) will trigger semantic releases accordingly. - -To make sure developers properly style their commit messages, we use `husky` together with `commit-lint`. - -## Tools - -- [GitHub](https://github.com/lyne-design-system/lyne-components): Source code repository. -- [GitHub Actions](https://github.com/lyne-design-system/lyne-components/actions): CI & CD is done with GitHub Actions. -- [Netlify](https://app.netlify.com/): The storybook build and the deployments page are deployed to Netlify. -- [Codecov](https://codecov.io/bash): A report for code coverage is created for each release and uploaded to Codecov. -- [Deep Code](https://www.deepcode.ai/): analyzes the code -- [Git Guardian](https://gitguardian.com/): checks the code for security vulnerabilities -- [Snyk](https://snyk.io/): checks all the dependencies for vulnerabilities - -## Artefacts - -The following build artefacts are relevant for deployments: - -- `./dist/components`: web components that are published to npm -- `./dist/react`: react components that are published to npm -- `./dist/storybook`: the storybook build that is deployed to chromatic and to preview environment diff --git a/docs/CODE_OF_CONDUCT.md b/docs/CODE_OF_CONDUCT.md new file mode 100644 index 0000000000..31c0ba22cc --- /dev/null +++ b/docs/CODE_OF_CONDUCT.md @@ -0,0 +1,110 @@ +# Lyne Code of Conduct + +## tl;dr + +- **Be respectful & understanding.** Not all of us will agree all the time, but + disagreement is no excuse for poor behavior or poor manners. It is important + that we resolve disagreements and differing views constructively. + +- **Be welcoming.** We strive to be a community that welcomes and supports + people of all backgrounds and identities. + +## Our Pledge + +We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience +for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, +gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, +race, political and religious beliefs, or sexual identity and orientation. + +We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. + +## Our Standards + +Examples of behavior that contributes to a positive environment for our community include: + +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience +- Focusing on what is best not just for us as individuals, but for the overall community + +Examples of unacceptable behavior include: + +- The use of sexualized language or imagery, and sexual attention or + advances of any kind +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email + address, without their explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Enforcement Responsibilities + +Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will +take appropriate and fair corrective action in response to any behavior that they deem inappropriate, +threatening, offensive, or harmful. + +Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, +issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons +for moderation decisions when appropriate. + +## Scope + +This Code of Conduct applies within all community spaces, and also applies when an individual is officially +representing the community in public spaces. Examples of representing our community include using an official +e-mail address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders +responsible for enforcement at esta@sbb.ch. +All complaints will be reviewed and investigated promptly and fairly. + +All community leaders are obligated to respect the privacy and security of the reporter of any incident. + +## Enforcement Guidelines + +Community leaders will follow these Community Impact Guidelines in determining the consequences for any action +they deem in violation of this Code of Conduct: + +### 1. Correction + +**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. + +**Consequence**: A private, written warning from community leaders, providing clarity around the nature of +the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. + +### 2. Warning + +**Community Impact**: A violation through a single incident or series of actions. + +**Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, +including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. + +### 3. Temporary Ban + +**Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. + +**Consequence**: A temporary ban from any sort of interaction or public communication with the community for +a specified period of time. No public or private interaction with the people involved, including unsolicited interaction +with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. + +### 4. Permanent Ban + +**Community Impact**: Demonstrating a pattern of violation of community standards, including sustained +inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. + +**Consequence**: A permanent ban from any sort of public interaction within the community. + +## Attribution + +This Code of Conduct is adapted from + +- [Contributor Covenant](https://www.contributor-covenant.org/), version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html +- [IBM Carbon code of conduct](https://github.com/carbon-design-system/carbon/blob/master/.github/CODE_OF_CONDUCT.md) +- Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity) + +For answers to common questions about this code of conduct, see the FAQ at +https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations. diff --git a/CODING_STANDARDS.md b/docs/CODING_STANDARDS.md similarity index 76% rename from CODING_STANDARDS.md rename to docs/CODING_STANDARDS.md index 5bb879f505..51fbf84dbe 100644 --- a/CODING_STANDARDS.md +++ b/docs/CODING_STANDARDS.md @@ -1,4 +1,4 @@ -# lyne Coding Standards +# Lyne Coding Standards ## Code style @@ -13,17 +13,17 @@ This project uses [Prettier](https://prettier.io/) to enforce a consistent code Comments that explain what some block of code does are nice; they can tell you something in less time than it would take to follow through the code itself. -Comments that explain why some block of code exists at all, or does something the way it does, +Comments that explain why some block of code exists at all or does something the way it does, are _invaluable_. The "why" is difficult, or sometimes impossible, to track down without seeking out the original author. When collaborators are in the same room, this hurts productivity. -When collaborators are in different timezones, this can be devastating to productivity. +When collaborators are in different time zones, this can be devastating to productivity. For example, this is a not-very-useful comment: ```ts // Set default tabindex. -if (!$attrs['tabindex']) { - $element.attr('tabindex', '-1'); +if (!this.getAttribute('tabindex')) { + this.setAttribute('tabindex', '-1'); } ``` @@ -31,10 +31,10 @@ While this is much more useful: ```ts // Unless the user specifies so, the calendar should not be a tab stop. -// This is necessary because ngAria might add a tabindex to anything with an ng-model +// This is necessary because it might add a tabindex to anything with an ng-model // (based on whether or not the user has turned that particular feature on/off). -if (!$attrs['tabindex']) { - $element.attr('tabindex', '-1'); +if (!this.getAttribute('tabindex')) { + this.setAttribute('tabindex', '-1'); } ``` @@ -50,15 +50,15 @@ In HTML code, use `` comments, which will be stripped when packaging Every time a component is created, a `readme.md` file is generated; don't underestimate its value, as it will be the documentation entry point for consumers. -The `generate` script will create a base structure for the component description; try to stick at it if you can. +The `generate` script will create a base structure for the component description; try to stick to it if you can. Start with a brief sentence which describes the main purpose of the component and why it should be used; if it is related to other components, mention them and add a link to their documentation. Then describe how the component should be used, adding code examples: -if it's a presentational one explain its graphic variants using the `### Style` paragraph, +if it's a presentational one, explain its graphic variants using the `### Style` paragraph, while if it's a complex one you could use the `### Interaction` paragraph. -Almost all the components has `### Slots` and can have different `### States`; describe how they can be used. +Almost all the components have `### Slots` and can have different `### States`; describe how they can be used. #### Prefer small, focused modules @@ -66,15 +66,15 @@ Keeping modules to a single responsibility makes the code easier to test, consum ESM modules offer a straightforward way to organize code into logical, granular units. Ideally, individual files are 200 - 300 lines of code. -As a rule of thumb, once a file draws near 400 lines (barring abnormally long constants / comments), +As a rule of thumb, once a file draws near 400 lines (barring abnormally long constants/comments), start considering how to refactor into smaller pieces. -This might not always apply to components, but should be considered during implementation. +This might not always apply to components but should be considered during implementation. #### Less is more Once a feature is released, it never goes away. We should avoid adding features that don't offer -high user value for price we pay both in maintenance, complexity, and payload size. When in doubt, +high user value for the price we pay both in maintenance, complexity, and payload size. When in doubt, leave it out. This applies especially to providing two different APIs to accomplish the same thing. Always @@ -82,7 +82,7 @@ prefer sticking to a _single_ API for accomplishing something. #### Action elements -As we have to "reimplement" button and anchor functionality in order to comply with +Since we have to "reimplement" the button and anchor functionality in order to comply with accessibility, we need to consider all native behavior of a native `