From d236b29499fa1e5d8d6ce0d8307b7c53f40ad8da Mon Sep 17 00:00:00 2001 From: Alessandro Senese Date: Fri, 26 Jul 2024 15:38:26 +0100 Subject: [PATCH 1/7] ama documentation --- website/docusaurus.config.ts | 7 + website/guidelines/accessibility-label.md | 2 + website/guidelines/accessibility-role.md | 2 + website/guidelines/accessibility-states.md | 2 + website/guidelines/animations.md | 2 + website/guidelines/bottomsheet.md | 2 + website/guidelines/carousel.md | 2 + website/guidelines/contrast.md | 2 + website/guidelines/focus.md | 1 + website/guidelines/forms.md | 1 + website/guidelines/headers.md | 2 + website/guidelines/lists-grids.md | 1 + website/guidelines/minimum-size.md | 1 + website/guidelines/text.md | 2 + website/guidelines/timed-actions.md | 2 + website/src/components/AMASection.jsx | 90 +++ website/src/components/index.js | 1 + website/src/css/custom.css | 602 +++++++++--------- .../theme/DocItem/TOC/Desktop/AMASidebar.js | 89 +-- .../src/theme/DocItem/TOC/Desktop/index.js | 2 +- website/src/theme/MDXComponents.js | 2 + yarn.lock | 55 ++ 22 files changed, 500 insertions(+), 372 deletions(-) create mode 100644 website/src/components/AMASection.jsx diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index ac496d3b..e85bc348 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -18,6 +18,7 @@ const defaultPresets = { admonitions: { keywords: ['dev', 'note', 'tip', 'caution', 'danger', 'info', 'warn'], }, + breadcrumbs: true }; const config: Config = { @@ -274,6 +275,12 @@ const config: Config = { selector: '.zoom-me', }, } satisfies ThemeConfig, + scripts: [ + { + src: '/custom.js' + } + ] + }; export default config; diff --git a/website/guidelines/accessibility-label.md b/website/guidelines/accessibility-label.md index ae550487..927bc3e0 100644 --- a/website/guidelines/accessibility-label.md +++ b/website/guidelines/accessibility-label.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # Accessibility Label + + The [accessibilityLabel](https://reactnative.dev/docs/accessibility#accessibilitylabel) is the text that assistive technology reads when the component is focused and AMA requires it by tappable elements. ## Expectations diff --git a/website/guidelines/accessibility-role.md b/website/guidelines/accessibility-role.md index a576ce13..2d371aa1 100644 --- a/website/guidelines/accessibility-role.md +++ b/website/guidelines/accessibility-role.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # Accessibility Role + + The [accessibilityRole](https://reactnative.dev/docs/accessibility#accessibilityrole) is required for all interactive components to communicate their purpose to assistive technology users. ## Expectations diff --git a/website/guidelines/accessibility-states.md b/website/guidelines/accessibility-states.md index 51d57d16..eafdae35 100644 --- a/website/guidelines/accessibility-states.md +++ b/website/guidelines/accessibility-states.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # Accessibility States + + Accessibility states are specific attributes that can be added to a component to communicate its current status to assistive technology. ## aria-busy diff --git a/website/guidelines/animations.md b/website/guidelines/animations.md index d9ad74a5..3af20531 100644 --- a/website/guidelines/animations.md +++ b/website/guidelines/animations.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # Animations + + Some people might turn off animation on the device because moving content can distract them, or they might be adversely affected by animations or other reasons. ## Expectations diff --git a/website/guidelines/bottomsheet.md b/website/guidelines/bottomsheet.md index d35cadb3..139381bb 100644 --- a/website/guidelines/bottomsheet.md +++ b/website/guidelines/bottomsheet.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # BottomSheet & Drawer + + When dealing with Drawers/BottomSheets, we need to take care of: 1. Check if animations are enabled diff --git a/website/guidelines/carousel.md b/website/guidelines/carousel.md index cb67c042..c60722f6 100644 --- a/website/guidelines/carousel.md +++ b/website/guidelines/carousel.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # Carousel + + When implementing a Carousel, it's essential to ensure that users can easily navigate through its items. ## Expectations diff --git a/website/guidelines/contrast.md b/website/guidelines/contrast.md index 11146d99..9f6f653c 100644 --- a/website/guidelines/contrast.md +++ b/website/guidelines/contrast.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # Contrast + + Contrast refers to the difference in luminance or colour that makes an object (or its representation in an image or display) distinguishable from its surroundings. ## Expectations diff --git a/website/guidelines/focus.md b/website/guidelines/focus.md index 8534c626..a2e85a10 100644 --- a/website/guidelines/focus.md +++ b/website/guidelines/focus.md @@ -8,6 +8,7 @@ displayed_sidebar: guidelines # Focus + It's crucial to ensure screen readers and other assistive technologies can navigate your app in a logical order, making sure that content is separate with meaningful titles. diff --git a/website/guidelines/forms.md b/website/guidelines/forms.md index 2d1267c8..852c2bb2 100644 --- a/website/guidelines/forms.md +++ b/website/guidelines/forms.md @@ -11,6 +11,7 @@ import NextKeyKeyboard from './next-key.jpg'; # Forms + ## Labels diff --git a/website/guidelines/headers.md b/website/guidelines/headers.md index da739914..4eac131e 100644 --- a/website/guidelines/headers.md +++ b/website/guidelines/headers.md @@ -10,6 +10,8 @@ import AndroidListFeature from './android-list-feature.gif'; # Headers + + Headers are crucial in organizing and structuring content in a mobile app. They provide a clear hierarchy, guiding users through the content and making it more accessible and understandable. In React Native, any text element can be designated as a header by assigning the [accessibilityRole](/guidelines/accessibility-role) property to "header". diff --git a/website/guidelines/lists-grids.md b/website/guidelines/lists-grids.md index 08deb010..709f3a9f 100644 --- a/website/guidelines/lists-grids.md +++ b/website/guidelines/lists-grids.md @@ -9,6 +9,7 @@ displayed_sidebar: guidelines ## Filtering + When a list changes because of something the user does, like typing in a search box or clicking a filter button, the screen reader should tell the user how many items are now showing. diff --git a/website/guidelines/minimum-size.md b/website/guidelines/minimum-size.md index 5a33fbf9..53b785ab 100644 --- a/website/guidelines/minimum-size.md +++ b/website/guidelines/minimum-size.md @@ -7,6 +7,7 @@ displayed_sidebar: guidelines # Minimum Size + AMA performs a minimum size check for tappable elements like Pressable, Button, etc. The expected minimum size is: - [44x44px on iOS](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/) diff --git a/website/guidelines/text.md b/website/guidelines/text.md index 98366362..db2e2adc 100644 --- a/website/guidelines/text.md +++ b/website/guidelines/text.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # Text + + The text in our app must be clear and easy for everyone to read. While this may seem obvious, sometimes, design choices can unintentionally make it harder for some people, especially those with disabilities, to understand the content. We must be mindful of this when making design decisions. diff --git a/website/guidelines/timed-actions.md b/website/guidelines/timed-actions.md index 2185ac98..1c3dd668 100644 --- a/website/guidelines/timed-actions.md +++ b/website/guidelines/timed-actions.md @@ -8,6 +8,8 @@ displayed_sidebar: guidelines # Timed actions + + Timed actions refer to tasks or functions within an app that are set to occur after a specific duration or at particular intervals. When implementing timed actions, it's essential to take into account the following considerations to ensure accessibility and a positive user experience: diff --git a/website/src/components/AMASection.jsx b/website/src/components/AMASection.jsx new file mode 100644 index 00000000..eddce2d2 --- /dev/null +++ b/website/src/components/AMASection.jsx @@ -0,0 +1,90 @@ +import { useDoc } from '@docusaurus/theme-common/internal'; +import React from 'react'; + +import { Severity } from './index'; + +const AMA_WHAT = { + ama_severity: 'Severity', + ama_category: 'Accessibility Principle', + ama_affected_users: 'Affected users', + ama_success_criterion: 'Success criterion', +}; + +const PRINCIPLES = { + Perceivable: '../guidelines/pour#perceivable', + Operable: '../guidelines/pour#operable', + Understandable: '../guidelines/pour#understandable', + Robust: '../guidelines/pour#robust', +}; + +const AFFECTED_USERS = { + Motor: '../guidelines/type-of-accessibility-issues#motormobility', + Mobility: '../guidelines/type-of-accessibility-issues#motormobility', +}; + +export const AMASection = ({ className }) => { + const { frontMatter } = useDoc(); + + return ( + <> + + + {Object.entries(AMA_WHAT).map(([key, label]) => { + let value = frontMatter[key]; + + if (key === 'ama_severity') { + value = ; + } else if (key === 'ama_success_criterion' && value) { + const [sc, link] = value.split('@'); + + value = ( + + {sc} + + ); + } else if (key === 'ama_category') { + const link = PRINCIPLES[value]; + + value = link ? {value} : null; + } else if (key === 'ama_affected_users') { + value = ; + } + + return value ? ( + + + + + ) : null; + })} + +
{label}{value}
+
+ + ); +}; + +const AffectedUsers = ({ users }) => { + const total = users.length - 1; + + return ( + <> + {users.map((user, index) => { + const link = + AFFECTED_USERS[user.trim()] || + `../guidelines/type-of-accessibility-issues#${user.toLowerCase()}`; + + return link ? ( + <> + + {user} + + {index < total ? ', ' : null} + + ) : ( + user + ); + })} + + ); +}; diff --git a/website/src/components/index.js b/website/src/components/index.js index 0f7d67d4..40c62a39 100644 --- a/website/src/components/index.js +++ b/website/src/components/index.js @@ -5,3 +5,4 @@ export * from './required'; export * from './platforms'; export * from './feature'; export * from './padding'; +export * from './AMASection'; diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 72dacaa6..b1cbd36b 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -3,297 +3,327 @@ @tailwind components; @tailwind utilities; -/** + /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */ -/* Override infima variables */ -:root { - --ifm-color-primary: #f04d21; - --ifm-color-primary-dark: #e63d10; - --ifm-color-primary-darker: #d93a0f; - --ifm-color-primary-darkest: #b3300c; - --ifm-color-primary-light: #f2623b; - --ifm-color-primary-lighter: #f36c47; - --ifm-color-primary-lightest: #f58b6e; - --ifm-navbar-background-color: #000e38; - --ifm-navbar-link-color: #ffffff; - --ifm-footer-background-color: #000e38; - --ifm-footer-padding-vertical: 1rem; - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: transparent; - --platform-color: #222; - --platform-color-android: #4f611a; - --scenario-color: #2e6b7f; - --must-color: #b60000; - --should-color: #807700; - --good-color: #0c6600; - --wrong-color: #b60000; - --good-wrong-color: #fff; - --tick: #0c6600; - - /* Spacing */ - --ifm-spacing-horizontal: 2rem; -} - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: #edaea6; - --ifm-color-primary-dark: #f6a892; - --ifm-color-primary-darker: #f8af9b; - --ifm-color-primary-darkest: #fba58e; - --ifm-color-primary-light: #f9ab95; - --ifm-color-primary-lighter: #f8af9b; - --ifm-color-primary-lightest: #f8a690; - --ifm-footer-background-color: #242526; - - --scenario-color: #bddce5; - --must-color: #ffb3b3; - --should-color: #e0d100; - - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); -} - -li .menu__list .menu__link--sublist-caret { - font-weight: bold; - font-size: 18px; -} - -/** + /* Override infima variables */ + :root { + --ifm-color-primary: #F47E5D; + --ifm-color-primary-dark: #e63d10; + --ifm-color-primary-darker: #d93a0f; + --ifm-color-primary-darkest: #b3300c; + --ifm-color-primary-light: #f2623b; + --ifm-color-primary-lighter: #f36c47; + --ifm-color-primary-lightest: #f58b6e; + --ifm-navbar-background-color: #000e38; + --ifm-navbar-link-color: #ffffff; + --ifm-footer-background-color: #000e38; + --ifm-footer-padding-vertical: 1rem; + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: transparent; + --platform-color: #222; + --platform-color-android: #4f611a; + --scenario-color: #2e6b7f; + --must-color: #b60000; + --should-color: #807700; + --good-color: #0c6600; + --wrong-color: #b60000; + --good-wrong-color: #fff; + --tick: #0c6600; + + /* Spacing */ + --ifm-spacing-horizontal: 2rem; + + /* */ + --ifm-sidebar-menu-color: #fff; + } + + /* For readability concerns, you should choose a lighter palette in dark mode. */ + [data-theme='dark'] { + --ifm-color-primary: #edaea6; + --ifm-color-primary-dark: #f6a892; + --ifm-color-primary-darker: #f8af9b; + --ifm-color-primary-darkest: #fba58e; + --ifm-color-primary-light: #f9ab95; + --ifm-color-primary-lighter: #f8af9b; + --ifm-color-primary-lightest: #f8a690; + --ifm-footer-background-color: #242526; + + --scenario-color: #bddce5; + --must-color: #ffb3b3; + --should-color: #e0d100; + + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + } + + li .menu__list .menu__link--sublist-caret { + font-weight: bold; + font-size: 18px; + } + + /** * Header GH/Nearform link styles */ -.header-github-link:hover { - opacity: 0.6; -} - -.header-github-link:before { - content: ''; - width: 24px; - height: 24px; - display: flex; - background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; -} - -[data-theme='dark'] .header-github-link:before { - background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") - no-repeat; -} - -.header-nearform-link:hover { - opacity: 0.6; -} - -.header-nearform-link:before { - content: ''; - width: 30px; - height: 22px; - margin-top: 4px; - display: flex; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 60 111.98 85.72'%3E%3Cpath class='cls-2' d='m60.18,60.18h11.3l36.71,53.4v-53.4h12.17v75.36h-11.3l-36.71-53.4v53.4h-12.17V60.18Z' stroke-width='0' fill='%23fff'/%3E%3Cpath class='cls-1' d='m126.51,135.54h45.29v11.09h-45.29v-11.09Z' fill='%2300e5a4'/%3E%3C/svg%3E") - no-repeat; -} - -.navbar__inner button svg { - color: white; -} - -/* Custom Footer */ -.footer__bottom.text--center { - display: flex; - justify-content: space-between; - align-items: center; -} - -.footer__bottom.text--center a { - opacity: 1 !important; -} - -.footer__copyright { - color: white; -} - - -/* Custom Landing Page */ -.hero-pattern { - background-image: url("/img/background-banner.png"); -} - -.token-line.dimmed { - opacity: 0.5; -} - -.platform { - position: relative; - display: inline-block; - padding-left: 24px; - font-size: 14px; - font-weight: 300; - background-color: var(--platform-color); - height: 26px; - top: -6px; - color: #fff; - padding-right: 10px; - line-height: 24px; - margin-left: 12px; -} - -.platform::before { - content: ''; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 13px 10px 13px 0; - border-color: #fff var(--platform-color) #fff #fff; - top: 0; - left: 0; -} - -.platform::after { - content: ''; - position: absolute; - width: 4px; - height: 4px; - background-color: #fff; - border-radius: 50%; - left: 10px; - top: 10px; -} - -.platform.android { - background-color: var(--platform-color-android); -} - -.platform.android::before { - border-right-color: var(--platform-color-android); -} - -.with-ama-sidebar { - position: sticky; - top: calc(var(--ifm-navbar-height) + 1rem); -} - -.with-ama-sidebar .theme-doc-toc-desktop { - position: static; -} - -.ama-sidebar * { - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} - -.ama-sidebar { - margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal); - margin-bottom: 24px; - font-size: 14px; - overflow: visible; -} - -.ama-sidebar th { - text-align: left; - width: 33%; - padding-bottom: 10px; - padding-right: 12px; -} - -.ama-sidebar tr, -.ama-sidebar tr:nth-child(2n) { - background-color: transparent; -} - -.ama-feature { - font-size: 1.2em; -} - -.ama-feature > strong { - color: var(--ifm-color-primary); -} - -.ama-feature li { - list-style: none; -} - -.ama-feature li svg { - margin-right: 12px; -} - -.ama-when > strong { - color: var(--scenario-color); -} - -.ama-then > strong { - color: var(--ifm-color-success); -} - -.ama-critical { - color: var(--must-color); -} - -.ama-warning { - color: var(--should-color); -} - -.ama-serious { - color: var(--scenario-color); -} - -.ama-icon-label-strong { - textdecoration: underline; - textunderlineoffset: 4; - display: inline-block; - verticalalign: top; -} - -.anchor .ama-icon-label { - font-size: 16px; -} -.anchor .ama-icon-label svg { - width: 12px; -} - -.anchor .ama-icon-label strong { - vertical-align: baseline; -} - -.ama-good-wrong { - padding: 8px 4px; - color: var(--good-wrong-color); - border-radius: 4px; - display: flex; - align-items: center; -} - -.ama-good-wrong svg { - margin-right: 4px; -} - -.ama-good { - font-size: 14px; - background-color: var(--good-color); -} - -.ama-wrong { - font-size: 14px; - background-color: var(--wrong-color); -} - -.ama-severity-padding { - margin-bottom: 12px; - display: block; -} - -.ama-tick { - color: var(--tick); -} - -.zoom-me { - max-width: 600px; -} + .header-github-link:hover { + opacity: 0.6; + } + + .header-github-link:before { + content: ''; + width: 24px; + height: 24px; + display: flex; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; + } + + [data-theme='dark'] .header-github-link:before { + background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; + } + + .header-nearform-link:hover { + opacity: 0.6; + } + + .header-nearform-link:before { + content: ''; + width: 30px; + height: 22px; + margin-top: 4px; + display: flex; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 60 111.98 85.72'%3E%3Cpath class='cls-2' d='m60.18,60.18h11.3l36.71,53.4v-53.4h12.17v75.36h-11.3l-36.71-53.4v53.4h-12.17V60.18Z' stroke-width='0' fill='%23fff'/%3E%3Cpath class='cls-1' d='m126.51,135.54h45.29v11.09h-45.29v-11.09Z' fill='%2300e5a4'/%3E%3C/svg%3E") no-repeat; + } + + .navbar__inner button svg { + color: white; + } + + /* Custom Footer */ + .footer__bottom.text--center { + display: flex; + justify-content: space-between; + align-items: center; + } + + .footer__bottom.text--center a { + opacity: 1 !important; + } + + .footer__copyright { + color: white; + } + + + /* Custom Landing Page */ + .hero-pattern { + background-image: url("/img/background-banner.png"); + } + + .token-line.dimmed { + opacity: 0.5; + } + + .platform { + position: relative; + display: inline-block; + padding-left: 24px; + font-size: 14px; + font-weight: 300; + background-color: var(--platform-color); + height: 26px; + top: -6px; + color: #fff; + padding-right: 10px; + line-height: 24px; + margin-left: 12px; + } + + .platform::before { + content: ''; + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 13px 10px 13px 0; + border-color: #fff var(--platform-color) #fff #fff; + top: 0; + left: 0; + } + + .platform::after { + content: ''; + position: absolute; + width: 4px; + height: 4px; + background-color: #fff; + border-radius: 50%; + left: 10px; + top: 10px; + } + + .platform.android { + background-color: var(--platform-color-android); + } + + .platform.android::before { + border-right-color: var(--platform-color-android); + } + + .with-ama-sidebar { + position: sticky; + top: calc(var(--ifm-navbar-height) + 1rem); + } + + .with-ama-sidebar .theme-doc-toc-desktop { + position: static; + } + + .ama-sidebar * { + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; + } + + .ama-sidebar { + margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal); + margin-bottom: 24px; + font-size: 14px; + overflow: visible; + border-left: 1px solid var(--ifm-toc-border-color); + padding: 16px; + margin: 0; + } + + .ama-sidebar th { + text-align: left; + width: 33%; + padding-bottom: 10px; + padding-right: 12px; + } + + .ama-sidebar tr, + .ama-sidebar tr:nth-child(2n) { + background-color: transparent; + } + + .ama-feature { + font-size: 1.2em; + } + + .ama-feature>strong { + color: var(--ifm-color-primary); + } + + .ama-feature li { + list-style: none; + } + + .ama-feature li svg { + margin-right: 12px; + } + + .ama-when>strong { + color: var(--scenario-color); + } + + .ama-then>strong { + color: var(--ifm-color-success); + } + + .ama-critical { + color: var(--must-color); + } + + .ama-warning { + color: var(--should-color); + } + + .ama-serious { + color: var(--scenario-color); + } + + .ama-icon-label-strong { + textdecoration: underline; + textunderlineoffset: 4; + display: inline-block; + verticalalign: top; + } + + .anchor .ama-icon-label { + font-size: 16px; + } + + .anchor .ama-icon-label svg { + width: 12px; + } + + .anchor .ama-icon-label strong { + vertical-align: baseline; + } + + .ama-good-wrong { + padding: 8px 4px; + color: var(--good-wrong-color); + border-radius: 4px; + display: flex; + align-items: center; + } + + .ama-good-wrong svg { + margin-right: 4px; + } + + .ama-good { + font-size: 14px; + background-color: var(--good-color); + } + + .ama-wrong { + font-size: 14px; + background-color: var(--wrong-color); + } + + .ama-severity-padding { + margin-bottom: 12px; + display: block; + } + + .ama-tick { + color: var(--tick); + } + + .zoom-me { + max-width: 600px; + } + + .navbar-sidebar__back { + color: var(--ifm-color-primary) + } + + .ama-mobile-section { + display: none; + } + .ama-mobile-section th { + text-align: left; + } + + @media screen and (max-width: 996px) { + .ama-mobile-section { + display: table; + width: 100%; + margin-top: 8px; + margin-bottom: 32px; + } + + .theme-doc-sidebar-menu { + a { + color: var(--ifm-sidebar-menu-color); + } + } + } diff --git a/website/src/theme/DocItem/TOC/Desktop/AMASidebar.js b/website/src/theme/DocItem/TOC/Desktop/AMASidebar.js index 83db9cb8..6fb35e57 100644 --- a/website/src/theme/DocItem/TOC/Desktop/AMASidebar.js +++ b/website/src/theme/DocItem/TOC/Desktop/AMASidebar.js @@ -1,90 +1,9 @@ -import { useDoc } from '@docusaurus/theme-common/internal'; import React from 'react'; -import { Severity } from '../../../../components'; - -const AMA_WHAT = { - ama_severity: 'Severity', - ama_category: 'Accessibility Principle', - ama_affected_users: 'Affected users', - ama_success_criterion: 'Success criterion', -}; - -const PRINCIPLES = { - Perceivable: '../guidelines/pour#perceivable', - Operable: '../guidelines/pour#operable', - Understandable: '../guidelines/pour#understandable', - Robust: '../guidelines/pour#robust', -}; - -const AFFECTED_USERS = { - Motor: '../guidelines/type-of-accessibility-issues#motormobility', - Mobility: '../guidelines/type-of-accessibility-issues#motormobility', -}; +import { AMASection } from '../../../../components'; export const AMASidebar = () => { - const { frontMatter } = useDoc(); - - return ( - <> - - - {Object.entries(AMA_WHAT).map(([key, label]) => { - let value = frontMatter[key]; - - if (key === 'ama_severity') { - value = ; - } else if (key === 'ama_success_criterion' && value) { - const [sc, link] = value.split('@'); - - value = ( - - {sc} - - ); - } else if (key === 'ama_category') { - const link = PRINCIPLES[value]; - - value = link ? {value} : null; - } else if (key === 'ama_affected_users') { - value = ; - } - - return value ? ( - - - - - ) : null; - })} - -
{label}{value}
-
- - ); -}; - -const AffectedUsers = ({ users }) => { - const total = users.length - 1; - - return ( - <> - {users.map((user, index) => { - const link = - AFFECTED_USERS[user.trim()] || - `../guidelines/type-of-accessibility-issues#${user.toLowerCase()}`; - - return link ? ( - <> - - {user} - - {index < total ? ', ' : null} - - ) : ( - user - ); - })} - - ); + return ( + + ) }; diff --git a/website/src/theme/DocItem/TOC/Desktop/index.js b/website/src/theme/DocItem/TOC/Desktop/index.js index ba8b94fa..87f7a75e 100644 --- a/website/src/theme/DocItem/TOC/Desktop/index.js +++ b/website/src/theme/DocItem/TOC/Desktop/index.js @@ -11,7 +11,7 @@ export default function DesktopWrapper(props) { return shouldRenderAMASidebar ? (
- +
) : ( diff --git a/website/src/theme/MDXComponents.js b/website/src/theme/MDXComponents.js index 673c2aab..cbfd6b6f 100644 --- a/website/src/theme/MDXComponents.js +++ b/website/src/theme/MDXComponents.js @@ -26,6 +26,7 @@ import { Wrong, Yes, iOS, + AMASection, } from '../components'; export default { @@ -57,4 +58,5 @@ export default { AssistiveTechnology, Padding, Tick, + AMASection, }; diff --git a/yarn.lock b/yarn.lock index 05e39393..756e317a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2162,6 +2162,61 @@ mkdirp "^1.0.4" rimraf "^3.0.2" +"@react-native-ama/animations@*": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@react-native-ama/animations/-/animations-1.0.0.tgz#d5497ddbf9592e02fed7620d710d9d681d076f2c" + integrity sha512-v2ikSd7gsZCc+s6ICo6y6AkprkMFFO+8Wy0wp97BlFFZzQOpJL37t4Iu4vg/qvLQqr/ickZt+MHwbuWeXp0siQ== + dependencies: + "@react-native-ama/core" "*" + "@react-native-ama/internal" "*" + +"@react-native-ama/core@*": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@react-native-ama/core/-/core-1.0.0.tgz#213fea00bb55dcf627c3316a491cd1b6794a2443" + integrity sha512-9z7oD7inbqLAUH/5PTHVhcpnQ53DempL+F4AiGTmYiSi8rCkEDtmb1s6FB7LB8j0HitGFDedsBk16vWzhftviA== + dependencies: + "@react-native-ama/internal" "*" + +"@react-native-ama/extras@*": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@react-native-ama/extras/-/extras-1.0.0.tgz#65a05e39f2665be3c94962523f8ab759e88321c3" + integrity sha512-00WHAnDKo+xtNJBK2wcRa6fGgFKmVeMLN9tyiPZ6h4Y1rYrJDsxIO+b0G2qpkcI6wdVS0oEUQB7+QrFwEkk/Cw== + dependencies: + "@react-native-ama/animations" "*" + "@react-native-ama/core" "*" + "@react-native-ama/internal" "*" + +"@react-native-ama/forms@*": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@react-native-ama/forms/-/forms-1.0.0.tgz#b7911763bc15412eeea0f4f5c789948c8d4797ef" + integrity sha512-Ikbh/qJEH9hRrro2ytUvJkUE4pprPYgaTDXl/Ze0vPst/Hvo2fJAxV9j6cb4CuvTHMSZw3hdFyv3idqKRoLH1w== + dependencies: + "@react-native-ama/core" "*" + "@react-native-ama/internal" "*" + "@react-native-ama/react-native" "*" + +"@react-native-ama/internal@*": + version "0.0.1" + resolved "https://registry.yarnpkg.com/@react-native-ama/internal/-/internal-0.0.1.tgz#829c4812b2687df20533f5f91ecb9c134503eff2" + integrity sha512-60/EoLHIjMSf0U+wIv2cutPvG6Je/9hlAcmrvVSVfdMksAx0KAd2NagyCSvMAZ3AjB3GHSbUKJq8rmJ8t3Ew2g== + dependencies: + wcag-color "^1.1.1" + +"@react-native-ama/lists@*": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@react-native-ama/lists/-/lists-1.0.0.tgz#697962f209555ff2fadd1ae26dbe1a5f5726af20" + integrity sha512-vEobld03sdrpzSTjYo4wNwhUIE9M5YZJJAoBdC8br7ybWuk9u5OntByF9doqqLCiMxQ5ZQoL5BCNOtb0FdDPlg== + dependencies: + "@react-native-ama/core" "*" + "@react-native-ama/internal" "*" + +"@react-native-ama/react-native@*": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@react-native-ama/react-native/-/react-native-1.0.0.tgz#0810e3b44486649d7b1abe2cf9cdbd40c655400b" + integrity sha512-Ce+pAnjK0VgqnYmMGTLvyabH08aAPgGHsG/A5aqLrpa6kVEcjR1xj/dSpHTFDb5XC1aqNn/opCr3sG2u78iOAA== + dependencies: + "@react-native-ama/core" "*" + "@react-native-community/cli-clean@11.3.6": version "11.3.6" resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.6.tgz#43a06cbee1a5480da804debc4f94662a197720f2" From d8990fb5183e01e70260493bcc39c3c1e4e1b405 Mon Sep 17 00:00:00 2001 From: Alessandro Senese Date: Fri, 26 Jul 2024 15:54:10 +0100 Subject: [PATCH 2/7] fix react warning --- website/src/components/AMASection.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/src/components/AMASection.jsx b/website/src/components/AMASection.jsx index eddce2d2..bd3cf404 100644 --- a/website/src/components/AMASection.jsx +++ b/website/src/components/AMASection.jsx @@ -75,12 +75,12 @@ const AffectedUsers = ({ users }) => { `../guidelines/type-of-accessibility-issues#${user.toLowerCase()}`; return link ? ( - <> + {user} {index < total ? ', ' : null} - + ) : ( user ); From f50f91cf854a3c3f2927030518b2fd4b24a6c3c5 Mon Sep 17 00:00:00 2001 From: Alessandro Senese Date: Fri, 26 Jul 2024 15:54:35 +0100 Subject: [PATCH 3/7] remove custom.js loading --- website/docusaurus.config.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index e85bc348..0a35cf6d 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -275,12 +275,6 @@ const config: Config = { selector: '.zoom-me', }, } satisfies ThemeConfig, - scripts: [ - { - src: '/custom.js' - } - ] - }; export default config; From db669ebaff4d1998a08e65a71e4c291bd27bee2e Mon Sep 17 00:00:00 2001 From: Alessandro Senese Date: Fri, 26 Jul 2024 16:06:27 +0100 Subject: [PATCH 4/7] remove test code --- website/docusaurus.config.ts | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 0a35cf6d..a244f8f5 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -146,21 +146,6 @@ const config: Config = { id: 'guidelines', path: 'guidelines', routeBasePath: 'guidelines', - async sidebarItemsGenerator({ - defaultSidebarItemsGenerator, - numberPrefixParser, - item, - version, - docs, - categoriesMetadata, - isCategoryIndex, - }) { - // Example: return an hardcoded list of static sidebar items - return [ - { type: 'doc', id: 'bottomsheet' }, - { type: 'doc', id: 'bottomsheet' }, - ]; - }, ...defaultPresets, }, ], From fff76b31585ef128082343262a2a59671c13657c Mon Sep 17 00:00:00 2001 From: Alessandro Senese Date: Fri, 26 Jul 2024 16:07:21 +0100 Subject: [PATCH 5/7] various fixes --- website/src/components/devOnly.jsx | 2 +- website/src/css/custom.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/website/src/components/devOnly.jsx b/website/src/components/devOnly.jsx index 02719ac3..8ddd86a5 100644 --- a/website/src/components/devOnly.jsx +++ b/website/src/components/devOnly.jsx @@ -13,7 +13,7 @@ export const DevOnly = props => { ); }; -export const DevOnlyChecks = props => { +export const DevOnlyChecks = () => { return ( Runtime checks are only performed when __DEV__ is set to{' '} diff --git a/website/src/css/custom.css b/website/src/css/custom.css index b1cbd36b..d3e639af 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -249,10 +249,10 @@ } .ama-icon-label-strong { - textdecoration: underline; - textunderlineoffset: 4; + text-decoration: underline; + text-underline-offset: 4; display: inline-block; - verticalalign: top; + vertical-align: top; } .anchor .ama-icon-label { From 0f670ecf6e39a7d3b6ea41ec680eaac749de30b1 Mon Sep 17 00:00:00 2001 From: Alessandro Senese Date: Fri, 26 Jul 2024 16:11:35 +0100 Subject: [PATCH 6/7] restore yarn.lock --- website/sidebars.ts | 2 +- yarn.lock | 55 --------------------------------------------- 2 files changed, 1 insertion(+), 56 deletions(-) diff --git a/website/sidebars.ts b/website/sidebars.ts index 0be2b7ad..e2012501 100644 --- a/website/sidebars.ts +++ b/website/sidebars.ts @@ -17,7 +17,7 @@ function autoGenerate(path: string) { return files .map((file: string) => { - if (!file.endsWith('.md')) { + if (!file.endsWith('.md') || file === 'index.md') { return null; } diff --git a/yarn.lock b/yarn.lock index 756e317a..05e39393 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2162,61 +2162,6 @@ mkdirp "^1.0.4" rimraf "^3.0.2" -"@react-native-ama/animations@*": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@react-native-ama/animations/-/animations-1.0.0.tgz#d5497ddbf9592e02fed7620d710d9d681d076f2c" - integrity sha512-v2ikSd7gsZCc+s6ICo6y6AkprkMFFO+8Wy0wp97BlFFZzQOpJL37t4Iu4vg/qvLQqr/ickZt+MHwbuWeXp0siQ== - dependencies: - "@react-native-ama/core" "*" - "@react-native-ama/internal" "*" - -"@react-native-ama/core@*": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@react-native-ama/core/-/core-1.0.0.tgz#213fea00bb55dcf627c3316a491cd1b6794a2443" - integrity sha512-9z7oD7inbqLAUH/5PTHVhcpnQ53DempL+F4AiGTmYiSi8rCkEDtmb1s6FB7LB8j0HitGFDedsBk16vWzhftviA== - dependencies: - "@react-native-ama/internal" "*" - -"@react-native-ama/extras@*": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@react-native-ama/extras/-/extras-1.0.0.tgz#65a05e39f2665be3c94962523f8ab759e88321c3" - integrity sha512-00WHAnDKo+xtNJBK2wcRa6fGgFKmVeMLN9tyiPZ6h4Y1rYrJDsxIO+b0G2qpkcI6wdVS0oEUQB7+QrFwEkk/Cw== - dependencies: - "@react-native-ama/animations" "*" - "@react-native-ama/core" "*" - "@react-native-ama/internal" "*" - -"@react-native-ama/forms@*": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@react-native-ama/forms/-/forms-1.0.0.tgz#b7911763bc15412eeea0f4f5c789948c8d4797ef" - integrity sha512-Ikbh/qJEH9hRrro2ytUvJkUE4pprPYgaTDXl/Ze0vPst/Hvo2fJAxV9j6cb4CuvTHMSZw3hdFyv3idqKRoLH1w== - dependencies: - "@react-native-ama/core" "*" - "@react-native-ama/internal" "*" - "@react-native-ama/react-native" "*" - -"@react-native-ama/internal@*": - version "0.0.1" - resolved "https://registry.yarnpkg.com/@react-native-ama/internal/-/internal-0.0.1.tgz#829c4812b2687df20533f5f91ecb9c134503eff2" - integrity sha512-60/EoLHIjMSf0U+wIv2cutPvG6Je/9hlAcmrvVSVfdMksAx0KAd2NagyCSvMAZ3AjB3GHSbUKJq8rmJ8t3Ew2g== - dependencies: - wcag-color "^1.1.1" - -"@react-native-ama/lists@*": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@react-native-ama/lists/-/lists-1.0.0.tgz#697962f209555ff2fadd1ae26dbe1a5f5726af20" - integrity sha512-vEobld03sdrpzSTjYo4wNwhUIE9M5YZJJAoBdC8br7ybWuk9u5OntByF9doqqLCiMxQ5ZQoL5BCNOtb0FdDPlg== - dependencies: - "@react-native-ama/core" "*" - "@react-native-ama/internal" "*" - -"@react-native-ama/react-native@*": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@react-native-ama/react-native/-/react-native-1.0.0.tgz#0810e3b44486649d7b1abe2cf9cdbd40c655400b" - integrity sha512-Ce+pAnjK0VgqnYmMGTLvyabH08aAPgGHsG/A5aqLrpa6kVEcjR1xj/dSpHTFDb5XC1aqNn/opCr3sG2u78iOAA== - dependencies: - "@react-native-ama/core" "*" - "@react-native-community/cli-clean@11.3.6": version "11.3.6" resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-11.3.6.tgz#43a06cbee1a5480da804debc4f94662a197720f2" From c5cf622959e1bf0bda7501ce5da43ba75e5a0798 Mon Sep 17 00:00:00 2001 From: Alessandro Senese Date: Mon, 29 Jul 2024 09:24:35 +0100 Subject: [PATCH 7/7] Update website/src/theme/DocItem/TOC/Desktop/index.js Co-authored-by: Justin D Mathew --- website/src/theme/DocItem/TOC/Desktop/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/theme/DocItem/TOC/Desktop/index.js b/website/src/theme/DocItem/TOC/Desktop/index.js index 87f7a75e..ba8b94fa 100644 --- a/website/src/theme/DocItem/TOC/Desktop/index.js +++ b/website/src/theme/DocItem/TOC/Desktop/index.js @@ -11,7 +11,7 @@ export default function DesktopWrapper(props) { return shouldRenderAMASidebar ? (
- +
) : (