summaryrefslogtreecommitdiff
path: root/docs/guide/coding-standards
diff options
context:
space:
mode:
authorPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
committerPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
commit7385e139b0c9efca7430458cee982e63e282f4ae (patch)
tree1bbdb0164e556b76eec72cb558c66974c8f95dd8 /docs/guide/coding-standards
parentb24a483eda5ca0b0ecdb4f0c61b90d76d0d8e1e0 (diff)
downloadwebui-vue-7385e139b0c9efca7430458cee982e63e282f4ae.tar.xz
prettier: re-format
Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML files to have consistent formatting for these file types. Re-run the formatter on the whole repository. Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779 Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
Diffstat (limited to 'docs/guide/coding-standards')
-rw-r--r--docs/guide/coding-standards/accessibility.md42
-rw-r--r--docs/guide/coding-standards/readme.md13
2 files changed, 30 insertions, 25 deletions
diff --git a/docs/guide/coding-standards/accessibility.md b/docs/guide/coding-standards/accessibility.md
index 0a9a1a75..63cc870f 100644
--- a/docs/guide/coding-standards/accessibility.md
+++ b/docs/guide/coding-standards/accessibility.md
@@ -2,18 +2,19 @@
It is important that the OpenBMC Web UI meet accessibility guidelines
established by the [World Wide Web Consortium (W3C)](https://www.w3.org/). These
-guidelines are known as the [Web Content Accessibility Guidelines
-(WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/). Making the Web UI
-accessible to as many users as possible is the right thing to do. In many
-countries, it is also legally required. Organizations providing interfaces that
-users with permanent or temporary disabilities can not use, may lose sales or be
-susceptible to discriminatory lawsuits.
+guidelines are known as the
+[Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/).
+Making the Web UI accessible to as many users as possible is the right thing to
+do. In many countries, it is also legally required. Organizations providing
+interfaces that users with permanent or temporary disabilities can not use, may
+lose sales or be susceptible to discriminatory lawsuits.
## Accessibility Principles
+
These
[principles](https://www.w3.org/WAI/fundamentals/accessibility-principles/)
-reference a set of international standards from the [W3C Web Accessibility
-Intitiative (WAI)](https://www.w3.org/WAI/).
+reference a set of international standards from the
+[W3C Web Accessibility Intitiative (WAI)](https://www.w3.org/WAI/).
- [Perceiveable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable)
- [Operable](https://www.w3.org/WAI/fundamentals/accessibility-principles/#operable)
@@ -21,6 +22,7 @@ Intitiative (WAI)](https://www.w3.org/WAI/).
- [Robust](https://www.w3.org/WAI/fundamentals/accessibility-principles/#robust)
## Semantic HTML
+
Coding the UI using semantic markup is the most important step in creating an
inclusive interface. The use of
[WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) can help make an
@@ -31,6 +33,7 @@ rules to follow:
2. No ARIA is better than Bad ARIA
## Testing
+
Assuring the Web UI meets accessibility guidelines requires a combination of
automated and manual testing. Automated tests will test the application against
common problems such as color contrast and ARIA use. Automated testing can be
@@ -41,35 +44,32 @@ The OpenBMC Web UI developers should test their development pages using one of
the tools listed in the tools section below. If using Chrome, the Lighthouse
application comes bundled with the browser and also includes testing for
performance and best practices. If there is an issue that is created when using
-a Bootstrap-Vue component, we can [create an issue in the Bootstrap-vue
-repo](https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose).
+a Bootstrap-Vue component, we can
+[create an issue in the Bootstrap-vue repo](https://github.com/bootstrap-vue/bootstrap-vue/issues/new/choose).
Contributing to the Bootstrap-Vue open-source library, when possible, is
strongly encouraged.
## Tools
+
- [Deque Axe](https://www.deque.com/axe/)
-- [Firefox Accessibility
- Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
+- [Firefox Accessibility Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
- [IBM Accessibility Tools](https://www.ibm.com/able/toolkit/tools)
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
## Screen Readers
+
- [Jaws - (Windows only)](https://webaim.org/articles/jaws/)
-- [Narrator - (Windows
- only)](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)
+- [Narrator - (Windows only)](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)
- [NVDA (Windows only)](https://webaim.org/articles/nvda/)
- [Voiceover (Mac only)](https://webaim.org/articles/voiceover/)
## Resources
-- [Mozilla Developer Network -
- Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
-- [Web Content Accessibility Guidelines
- (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
+
+- [Mozilla Developer Network - Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
- [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/)
-- [WAI-ARIA
- Basics](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [WAI-ARIA Basics](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
- [WebAIM Articles](https://webaim.org/articles/)
- [A11Y Project](https://a11yproject.com/)
- [IBM Accessibility](https://www.ibm.com/able/)
- [Inclusive Components](https://inclusive-components.design/)
-
diff --git a/docs/guide/coding-standards/readme.md b/docs/guide/coding-standards/readme.md
index a6ab3669..48d6cfc7 100644
--- a/docs/guide/coding-standards/readme.md
+++ b/docs/guide/coding-standards/readme.md
@@ -1,31 +1,36 @@
# JavaScript and SASS
+
This project uses the following libraries to determine the best practices and
guidelines for both SCSS and JavaScript syntax.
+
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)
- [ESLint Plugin for Vue](https://eslint.vuejs.org/)
The guidelines we are following are:
-- [Vue
- Recommended](https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-3-x)
+
+- [Vue Recommended](https://eslint.vuejs.org/rules/#priority-c-recommended-minimizing-arbitrary-choices-and-cognitive-overhead-for-vue-js-3-x)
- [ESLint Recommended](https://eslint.org/docs/rules/)
- [Prettier](https://prettier.io/docs/en/options.html)
The rules are applied in the following order:
+
1. Vue rules
1. ESLint recommended
1. Prettier
## Overrides
+
Any overrides to a rule are located in the ESLint configuration file,
`.eslintrc.js`, located in the root directory.
## Running the lint test
+
To test all files for linting, run `npm run lint`. This command will evaluate
the syntax of all files and update any code that that does not require manual
review.
-The linting script runs when code is committed, during pre-commit, and when the
+The linting script runs when code is committed, during pre-commit, and when the
CI tool runs after a push to Gerrit. There is a shell script named
`format-code.sh` that installs node package dependencies and runs the test
-script in your CI. \ No newline at end of file
+script in your CI.