diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index ac496d3b..a244f8f5 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 = { @@ -145,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, }, ], 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/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/website/src/components/AMASection.jsx b/website/src/components/AMASection.jsx new file mode 100644 index 00000000..bd3cf404 --- /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/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/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..d3e639af 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 { + text-decoration: underline; + text-underline-offset: 4; + display: inline-block; + vertical-align: 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/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, };