+
+
+
+
+```
+
+## Component-Specific Guidelines
+
+### Interactive Components
+
+- All interactive elements must be keyboard accessible
+- Provide clear focus indicators
+- Use appropriate ARIA roles and properties
+- Implement proper state management (aria-expanded, aria-selected, etc.)
+
+### Media Components
+
+- Provide captions and transcripts for video content
+- Include audio descriptions when necessary
+- Ensure media controls are keyboard accessible
+- Respect user preferences for autoplay and motion
+
+### Form Components
+
+- Associate labels with form controls
+- Provide clear error messages
+- Use fieldsets and legends for grouped controls
+- Implement proper validation feedback
+
+### Navigation Components
+
+- Use landmark roles (navigation, main, complementary)
+- Provide skip links for keyboard users
+- Implement breadcrumb navigation where appropriate
+- Use proper heading hierarchy
+
+## Tools and Resources
+
+### Development Tools
+
+- [axe DevTools](https://www.deque.com/axe/devtools/) - Browser extension for accessibility testing
+- [Lighthouse](https://developers.google.com/web/tools/lighthouse) - Automated accessibility auditing
+- [WAVE](https://wave.webaim.org/) - Web accessibility evaluation tool
+- [Color Contrast Analyzers](https://www.tpgi.com/color-contrast-checker/) - Check color contrast ratios
+
+### Screen Readers
+
+- [NVDA](https://www.nvaccess.org/) (Windows, free)
+- [JAWS](https://www.freedomscientific.com/products/software/jaws/) (Windows, commercial)
+- [VoiceOver](https://support.apple.com/guide/voiceover/) (macOS/iOS, built-in)
+- [Orca](https://help.gnome.org/users/orca/stable/) (Linux, free)
+
+### Documentation
+
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
+- [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- [WebAIM Resources](https://webaim.org/resources/)
+
+## Checklist
+
+Use this checklist when developing or reviewing AMP components:
+
+### Basic Requirements
+
+- [ ] Component uses semantic HTML elements
+- [ ] All interactive elements are keyboard accessible
+- [ ] Focus indicators are clearly visible
+- [ ] Color contrast meets WCAG AA standards (4.5:1 for normal text)
+- [ ] Component works with screen readers
+- [ ] No accessibility errors in automated testing tools
+
+### Content
+
+- [ ] Images have appropriate alternative text
+- [ ] Form inputs have associated labels
+- [ ] Error messages are clearly associated with relevant fields
+- [ ] Content is readable and understandable
+- [ ] Headings follow logical hierarchy
+
+### Interaction
+
+- [ ] All functionality is available via keyboard
+- [ ] Focus management is implemented correctly
+- [ ] ARIA properties accurately reflect component state
+- [ ] Component announces state changes to screen readers
+- [ ] User can exit or dismiss modal content
+
+### Testing
+
+- [ ] Component passes automated accessibility tests
+- [ ] Manual keyboard testing completed
+- [ ] Screen reader testing completed
+- [ ] Color contrast verified
+- [ ] Component tested with users with disabilities (when possible)
+
+## Implementation Examples
+
+### Accessible Button Component
+
+```javascript
+/**
+ * Accessible button implementation
+ */
+class AccessibleButton extends BaseElement {
+ buildCallback() {
+ this.element.setAttribute('role', 'button');
+ this.element.setAttribute('tabindex', '0');
+
+ this.element.addEventListener('click', this.handleClick.bind(this));
+ this.element.addEventListener('keydown', this.handleKeydown.bind(this));
+ }
+
+ handleKeydown(event) {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ this.handleClick(event);
+ }
+ }
+
+ handleClick(event) {
+ // Announce action to screen readers
+ this.announceToScreenReader('Button activated');
+ }
+
+ announceToScreenReader(message) {
+ const announcement = document.createElement('div');
+ announcement.setAttribute('aria-live', 'polite');
+ announcement.setAttribute('aria-atomic', 'true');
+ announcement.className = 'sr-only';
+ announcement.textContent = message;
+
+ document.body.appendChild(announcement);
+ setTimeout(() => document.body.removeChild(announcement), 1000);
+ }
+}
+```
+
+### Accessible Modal Dialog
+
+```javascript
+/**
+ * Accessible modal dialog implementation
+ */
+class AccessibleModal extends BaseElement {
+ buildCallback() {
+ this.dialog = this.element.querySelector('[role=\"dialog\"]');
+ this.overlay = this.element.querySelector('.overlay');
+ this.closeButton = this.element.querySelector('.close-button');
+
+ this.previousFocus = null;
+ this.setupEventListeners();
+ }
+
+ open() {
+ this.previousFocus = document.activeElement;
+ this.element.hidden = false;
+ this.dialog.focus();
+ this.trapFocus();
+
+ // Prevent background scrolling
+ document.body.style.overflow = 'hidden';
+
+ // Announce to screen readers
+ this.announceToScreenReader('Dialog opened');
+ }
+
+ close() {
+ this.element.hidden = true;
+ document.body.style.overflow = '';
+
+ if (this.previousFocus) {
+ this.previousFocus.focus();
+ }
+
+ this.announceToScreenReader('Dialog closed');
+ }
+
+ trapFocus() {
+ const focusableElements = this.dialog.querySelectorAll(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'
+ );
+
+ const firstElement = focusableElements[0];
+ const lastElement = focusableElements[focusableElements.length - 1];
+
+ this.dialog.addEventListener('keydown', (event) => {
+ if (event.key === 'Tab') {
+ if (event.shiftKey && document.activeElement === firstElement) {
+ event.preventDefault();
+ lastElement.focus();
+ } else if (!event.shiftKey && document.activeElement === lastElement) {
+ event.preventDefault();
+ firstElement.focus();
+ }
+ } else if (event.key === 'Escape') {
+ this.close();
+ }
+ });
+ }
+}
+```
+
+## Conclusion
+
+Building accessible AMP components is essential for creating an inclusive web. By following these guidelines and integrating accessibility testing into your development workflow, you help ensure that AMP content is usable by everyone, regardless of their abilities or the technologies they use to access the web.
+
+For questions about accessibility in AMP, reach out to the [#accessibility channel](https://amphtml.slack.com/messages/accessibility/) on Slack or refer to the resources listed above.
\ No newline at end of file
diff --git a/docs/contributing-code.md b/docs/contributing-code.md
index b24f6a8bfa86..cc2a9e86584f 100644
--- a/docs/contributing-code.md
+++ b/docs/contributing-code.md
@@ -10,15 +10,15 @@ This document describes the process you will go through to make a change in AMP.
We want to make it as easy as possible to get in small fixes. A fix for a small bug should be as easy as creating a PR with the change, adding/fixing a test, and sending it to a reviewer.
-- [ ] Agree to the [OpenJSF Contributor License Agreement (CLA)](#contributor-license-agreement).
-- [ ] (optional) If you are fixing a bug and there is an existing GitHub issue, assign it to yourself (if you can) or comment on it to let others know you are working on it. If there is no GitHub issue consider filing one, but for minor fixes your PR description may be enough.
-- [ ] (optional) [Find a guide](#find-a-guide) before you start coding to help you answer questions.
-- [ ] Follow the parts of the [Implementation](#implementation) section that makes sense for your change. There are many parts of the process that you probably won't need to follow for a minor fix--e.g. you may not need to make validator changes or put your change behind an experiment for minor fixes. If in doubt ask your guide or the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup).
-- [ ] When your code is ready to review, find [people to review and approve your code](#code-review-and-approval).
- - Your code must be reviewed/approved by an Owner for each area your PR affects and a Reviewer. (It is acceptable and common for one person to fulfill both roles.)
- - after your PR is created, a bot will automatically find Owners that can approve your PR and add them to your PR; you may also view the OWNERS file in the directories you change (or their parent directories)
- - choose a [Reviewer](https://github.com/orgs/ampproject/teams/reviewers-amphtml); it's possible that the Owners that were automatically added by the bot are also Reviewers
- - If the Owner that was automatically added is not a Reviewer, or you want to have someone else review and approve your code add them as reviewers on your PR if you are able to do so, otherwise cc them by adding the line "/cc @username" in your PR description/comment.
+- [ ] Agree to the [OpenJSF Contributor License Agreement (CLA)](#contributor-license-agreement).
+- [ ] (optional) If you are fixing a bug and there is an existing GitHub issue, assign it to yourself (if you can) or comment on it to let others know you are working on it. If there is no GitHub issue consider filing one, but for minor fixes your PR description may be enough.
+- [ ] (optional) [Find a guide](#find-a-guide) before you start coding to help you answer questions.
+- [ ] Follow the parts of the [Implementation](#implementation) section that makes sense for your change. There are many parts of the process that you probably won't need to follow for a minor fix--e.g. you may not need to make validator changes or put your change behind an experiment for minor fixes. If in doubt ask your guide or the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup).
+- [ ] When your code is ready to review, find [people to review and approve your code](#code-review-and-approval).
+ - Your code must be reviewed/approved by an Owner for each area your PR affects and a Reviewer. (It is acceptable and common for one person to fulfill both roles.)
+ - after your PR is created, a bot will automatically find Owners that can approve your PR and add them to your PR; you may also view the OWNERS file in the directories you change (or their parent directories)
+ - choose a [Reviewer](https://github.com/orgs/ampproject/teams/reviewers-amphtml); it's possible that the Owners that were automatically added by the bot are also Reviewers
+ - If the Owner that was automatically added is not a Reviewer, or you want to have someone else review and approve your code add them as reviewers on your PR if you are able to do so, otherwise cc them by adding the line "/cc @username" in your PR description/comment.
If your run into any issues finding a Reviewer/Owner or have any other questions, ping the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/) on [Slack](https://bit.ly/amp-slack-signup).
@@ -30,20 +30,20 @@ Significant changes (e.g. new components or significant changes to behavior) req
**If you are deprecating/removing a feature, follow the [deprecation process](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-versioning-policy.md#deprecations) instead of this process.**
-- [ ] _Before you start coding_, [find a guide](#find-a-guide) who you can discuss your change with and who can help guide you through the process.
-- [ ] Agree to the [OpenJSF Contributor License Agreement (CLA)](#contributor-license-agreement).
-- [ ] File an [Intent-to-implement (I2I)](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+IMPLEMENT&template=intent-to-implement.yml) GitHub issue and cc your guide on it. The I2I should include:
- - A description of the change you plan to implement.
- - If you are integrating a third-party service, provide a link to the third-party's site and product.
- - Details on any data collection or tracking that your change might require.
- - A prototype or mockup (for example, an image, a GIF, or a link to a demo).
-- [ ] Determine who needs to approve your I2I. Changes that have a significant impact on AMP's behavior or significant new features require the approval from the [Approvers Working Group (WG)](https://github.com/ampproject/wg-approvers). Work with your guide to determine whether your change is significant enough that it requires approval from the Approvers Working Group and/or any other [Working Group](https://github.com/ampproject/meta/tree/main/working-groups).
-- [ ] Get pre-approval from the Approvers WG if needed. For changes that require approval from the Approvers WG, at least 3 members of the Approvers WG should provide pre-approval on the I2I before significant implementation work proceeds.
-- [ ] Finalize the design of your change.
- - Familiarize yourself with our [Design Principles](design-principles.md).
- - Your guide can help you determine if your change requires a design doc and whether it should be brought to a [design review](./design-reviews.md).
-- [ ] Proceed with the [implementation](#implementation) of your change.
-- [ ] For changes that require approval from the Approvers WG, file an [Intent-to-ship (I2S) issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+SHIP&template=intent-to-ship.yml). Indicate which experiment is gating your change and a rollout plan. Once this issue is approved by 3 members of the Approvers WG the rollout plan described in the I2S may proceed.
+- [ ] _Before you start coding_, [find a guide](#find-a-guide) who you can discuss your change with and who can help guide you through the process.
+- [ ] Agree to the [OpenJSF Contributor License Agreement (CLA)](#contributor-license-agreement).
+- [ ] File an [Intent-to-implement (I2I)](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+IMPLEMENT&template=intent-to-implement.yml) GitHub issue and cc your guide on it. The I2I should include:
+ - A description of the change you plan to implement.
+ - If you are integrating a third-party service, provide a link to the third-party's site and product.
+ - Details on any data collection or tracking that your change might require.
+ - A prototype or mockup (for example, an image, a GIF, or a link to a demo).
+- [ ] Determine who needs to approve your I2I. Changes that have a significant impact on AMP's behavior or significant new features require the approval from the [Approvers Working Group (WG)](https://github.com/ampproject/wg-approvers). Work with your guide to determine whether your change is significant enough that it requires approval from the Approvers Working Group and/or any other [Working Group](https://github.com/ampproject/meta/tree/main/working-groups).
+- [ ] Get pre-approval from the Approvers WG if needed. For changes that require approval from the Approvers WG, at least 3 members of the Approvers WG should provide pre-approval on the I2I before significant implementation work proceeds.
+- [ ] Finalize the design of your change.
+ - Familiarize yourself with our [Design Principles](design-principles.md).
+ - Your guide can help you determine if your change requires a design doc and whether it should be brought to a [design review](./design-reviews.md).
+- [ ] Proceed with the [implementation](#implementation) of your change.
+- [ ] For changes that require approval from the Approvers WG, file an [Intent-to-ship (I2S) issue](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=INTENT+TO+SHIP&template=intent-to-ship.yml). Indicate which experiment is gating your change and a rollout plan. Once this issue is approved by 3 members of the Approvers WG the rollout plan described in the I2S may proceed.
## Find a guide
@@ -53,58 +53,58 @@ A guide is required if you are making a substantial change to AMP, but is option
To find a guide:
-- The [Working Group](https://github.com/ampproject/meta/blob/main/working-groups/README.md) that is most responsible for the area you are changing may document how to find a guide from that Working Group. If they do not, reach out to the facilitator of the WG (on [Slack](https://bit.ly/amp-slack-signup) or by ccing them on your GitHub issue by adding "/cc @username" in the issue body or comment).
-- If there is no obvious Working Group responsible for the area you are changing but you know what part of the codebase your change will be in, reach out to one of the people in the OWNERS files for the areas you're changing (on [Slack](https://bit.ly/amp-slack-signup) or by ccing them on your GitHub issue).
-- If you're still not sure who your guide should be, ask for a guide on [Slack](https://bit.ly/amp-slack-signup) in the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/).
-- If you can't find a guide after going through these routes or the guides you find aren't responsive, reach out to mrjoro on Slack or cc him on your GitHub issue/PR.
+- The [Working Group](https://github.com/ampproject/meta/blob/main/working-groups/README.md) that is most responsible for the area you are changing may document how to find a guide from that Working Group. If they do not, reach out to the facilitator of the WG (on [Slack](https://bit.ly/amp-slack-signup) or by ccing them on your GitHub issue by adding "/cc @username" in the issue body or comment).
+- If there is no obvious Working Group responsible for the area you are changing but you know what part of the codebase your change will be in, reach out to one of the people in the OWNERS files for the areas you're changing (on [Slack](https://bit.ly/amp-slack-signup) or by ccing them on your GitHub issue).
+- If you're still not sure who your guide should be, ask for a guide on [Slack](https://bit.ly/amp-slack-signup) in the [#contributing channel](https://amphtml.slack.com/messages/C9HRJ1GPN/).
+- If you can't find a guide after going through these routes or the guides you find aren't responsive, reach out to mrjoro on Slack or cc him on your GitHub issue/PR.
Once you have found a guide, make sure to @-mention them on any issues / PRs related to your change (e.g. if mrjoro is your guide you can just add "/cc @mrjoro" in the issue/PR body or comment).
## Implementation
-- (optional) [Join AMP on GitHub](https://goo.gl/forms/T65peVtfQfEoDWeD3). You don't need to wait to be added to the org before you start coding.
-- [Perform the one-time setup if needed](./getting-started-quick.md#one-time-setup): Set up your GitHub account, install Node, fork repo, track repo, etc.
-- [Create a working branch](./getting-started-e2e.md#create-a-git-branch).
-- [Build AMP](./getting-started-e2e.md#building-amp-and-starting-a-local-server).
-- Write your code.
- - For more substantial changes, multiple smaller PRs are preferable to one large PR. These will be easier to review and can prevent wasted work.
- - Consult these resources for guidance and guidelines:
- - **Design**: [AMP Design Principles](./design-principles.md)
- - **JavaScript**: [Google JavaScript Code Style Guide](https://google.github.io/styleguide/jsguide.html)
- - **CSS**: [Writing CSS For AMP Runtime](./writing-css.md)
- - **Creating new components**:
- - [Instructions and Guidelines for building an AMP component](./building-an-amp-extension.md)
- - Learn to create your first component in this [guide](https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md)
- - Watch this [YouTube video](https://youtu.be/FJEhQFNKeaQ?list=PLXTOW_XMsIDTDXYO-NAi2OpEH0zyguvqX) to learn about "Building a new AMP component"
- - **Integrating third-party software, embeds, services**: [Guidelines](../3p/README.md)
- - **Accessibility**:
- - [Web Fundamentals - Accessibility](https://developers.google.com/web/fundamentals/accessibility/)
- - [web.dev Lighthouse accessibility audits guide](https://web.dev/lighthouse-accessibility/)
- - [Put your change behind an experiment flag](./building-an-amp-extension.md#experiments) unless it is a minor fix or your reviewer indicates this is not needed.
- - [Commit your files](./getting-started-e2e.md#edit-files-and-commit-them).
-- [Test your changes](./getting-started-e2e.md#testing-your-changes).
- - A key feature of AMP is performance. All changes will be analyzed for any performance impact; we particularly appreciate changes that make things even faster. Please include any measured performance impact with substantial pull requests.
-- Prepare for your code review.
- - For more substantial changes, it's usually preferable to have your code reviewed before you make a significant investment in new tests, examples, etc.
- - Before your final review, make sure your change:
- - [Has good test coverage](./testing.md)
- - [Follows the style and design guidelines](./developing.md#guidelines--style)
- - [Provides good documentation](./building-an-amp-extension.md#documenting-your-element)
- - [Passes the presubmit checks (no lint and type check errors, tests are passing)](../build-system/common/enable-git-pre-push.sh#L17-L20)
- - [Includes validation rules and tests, if relevant](./building-an-amp-extension.md#allowing-proper-validations)
- - [Provides an example, if relevant](./building-an-amp-extension.md#example-of-using-your-extension)
-- Send your code for review.
- - [Agree to the Contributor License Agreement](#contributor-license-agreement) if you have not already done so.
- - [Pull the latest changes from the amphtml repo](./getting-started-e2e.md#pull-the-latest-changes-from-the-amphtml-repository) and resolve any conflicts.
- - Run the **pre push** check, which is a tool that helps catch any issues before you submit your code. To enable the git pre-push hook, see [`enable-git-pre-push.sh`](../build-system/common/enable-git-pre-push.sh#L17-L20).
- - [Push your changes](./getting-started-e2e.md#push-your-changes-to-your-github-fork)
- - [Create a Pull Request (PR)](./getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review).
- - Make sure the presubmit checks shown on your PR on GitHub passes (e.g. no lint and type check errors, tests are passing).
- - Add reviewers to your PR that will fulfill the requirements of code review and approval documented in the [Code review and approval](#code-review-and-approval) section. (A bot will automatically assign Owners that can review your code, and your guide can help find Reviewers if needed.)
- - [Respond to feedback](./getting-started-e2e.md#respond-to-pull-request-comments).
-- After your PR has all of the necessary approvals, your code may be merged into the repository by any Collaborator/Reviewer. Your guide will typically handle this; reach out to them if your code is not merged soon after it has been approved.
-- To check on your changes and find out when they get into production, read [See your changes in production](./getting-started-quick.md#see-your-changes-in-production).
-- [Clean up](./getting-started-quick.md#delete-your-branch-after-your-changes-are-merged-optional): After your changes are merged, you can delete your working branch.
+- (optional) [Join AMP on GitHub](https://goo.gl/forms/T65peVtfQfEoDWeD3). You don't need to wait to be added to the org before you start coding.
+- [Perform the one-time setup if needed](./getting-started-quick.md#one-time-setup): Set up your GitHub account, install Node, fork repo, track repo, etc.
+- [Create a working branch](./getting-started-e2e.md#create-a-git-branch).
+- [Build AMP](./getting-started-e2e.md#building-amp-and-starting-a-local-server).
+- Write your code.
+ - For more substantial changes, multiple smaller PRs are preferable to one large PR. These will be easier to review and can prevent wasted work.
+ - Consult these resources for guidance and guidelines:
+ - **Design**: [AMP Design Principles](./design-principles.md)
+ - **JavaScript**: [Google JavaScript Code Style Guide](https://google.github.io/styleguide/jsguide.html)
+ - **CSS**: [Writing CSS For AMP Runtime](./writing-css.md)
+ - **Creating new components**:
+ - [Instructions and Guidelines for building an AMP component](./building-an-amp-extension.md)
+ - Learn to create your first component in this [guide](https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md)
+ - Watch this [YouTube video](https://youtu.be/FJEhQFNKeaQ?list=PLXTOW_XMsIDTDXYO-NAi2OpEH0zyguvqX) to learn about "Building a new AMP component"
+ - **Integrating third-party software, embeds, services**: [Guidelines](../3p/README.md)
+ - **Accessibility**:
+ - [Web Fundamentals - Accessibility](https://developers.google.com/web/fundamentals/accessibility/)
+ - [web.dev Lighthouse accessibility audits guide](https://web.dev/lighthouse-accessibility/)
+ - [Put your change behind an experiment flag](./building-an-amp-extension.md#experiments) unless it is a minor fix or your reviewer indicates this is not needed.
+ - [Commit your files](./getting-started-e2e.md#edit-files-and-commit-them).
+- [Test your changes](./getting-started-e2e.md#testing-your-changes).
+ - A key feature of AMP is performance. All changes will be analyzed for any performance impact; we particularly appreciate changes that make things even faster. Please include any measured performance impact with substantial pull requests.
+- Prepare for your code review.
+ - For more substantial changes, it's usually preferable to have your code reviewed before you make a significant investment in new tests, examples, etc.
+ - Before your final review, make sure your change:
+ - [Has good test coverage](./testing.md)
+ - [Follows the style and design guidelines](./developing.md#guidelines--style)
+ - [Provides good documentation](./building-an-amp-extension.md#documenting-your-element)
+ - [Passes the presubmit checks (no lint and type check errors, tests are passing)](../build-system/common/enable-git-pre-push.sh#L17-L20)
+ - [Includes validation rules and tests, if relevant](./building-an-amp-extension.md#allowing-proper-validations)
+ - [Provides an example, if relevant](./building-an-amp-extension.md#example-of-using-your-extension)
+- Send your code for review.
+ - [Agree to the Contributor License Agreement](#contributor-license-agreement) if you have not already done so.
+ - [Pull the latest changes from the amphtml repo](./getting-started-e2e.md#pull-the-latest-changes-from-the-amphtml-repository) and resolve any conflicts.
+ - Run the **pre push** check, which is a tool that helps catch any issues before you submit your code. To enable the git pre-push hook, see [`enable-git-pre-push.sh`](../build-system/common/enable-git-pre-push.sh#L17-L20).
+ - [Push your changes](./getting-started-e2e.md#push-your-changes-to-your-github-fork)
+ - [Create a Pull Request (PR)](./getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review).
+ - Make sure the presubmit checks shown on your PR on GitHub passes (e.g. no lint and type check errors, tests are passing).
+ - Add reviewers to your PR that will fulfill the requirements of code review and approval documented in the [Code review and approval](#code-review-and-approval) section. (A bot will automatically assign Owners that can review your code, and your guide can help find Reviewers if needed.)
+ - [Respond to feedback](./getting-started-e2e.md#respond-to-pull-request-comments).
+- After your PR has all of the necessary approvals, your code may be merged into the repository by any Collaborator/Reviewer. Your guide will typically handle this; reach out to them if your code is not merged soon after it has been approved.
+- To check on your changes and find out when they get into production, read [See your changes in production](./getting-started-quick.md#see-your-changes-in-production).
+- [Clean up](./getting-started-quick.md#delete-your-branch-after-your-changes-are-merged-optional): After your changes are merged, you can delete your working branch.
## Contributing extended components
diff --git a/docs/contributing.md b/docs/contributing.md
index 33e31952ac36..28c1915248ed 100644
--- a/docs/contributing.md
+++ b/docs/contributing.md
@@ -15,11 +15,11 @@ How would you like to help?
-- [Report a bug](#report-a-bug)
-- [Make a suggestion](#make-a-suggestion)
-- [Contribute code/features](#contribute-codefeatures)
-- [Get started with open source](#get-started-with-open-source)
-- [Ongoing participation](#ongoing-participation)
+- [Report a bug](#report-a-bug)
+- [Make a suggestion](#make-a-suggestion)
+- [Contribute code/features](#contribute-codefeatures)
+- [Get started with open source](#get-started-with-open-source)
+- [Ongoing participation](#ongoing-participation)
If you have questions about _using_ AMP or are _encountering problems using AMP_ on your site please visit our [support page](./support.md) for help.
@@ -33,7 +33,7 @@ The community regularly monitoring issues and will try to fix open bugs quickly
[File a feature request](https://github.com/ampproject/amphtml/issues/new?assignees=&labels=Type%3A+Feature+Request&template=feature-request.yml) if you have a suggestion for a way to improve AMP or a request for a new AMP feature.
-If you are suggesting a feature that you are intending to implement, please see the [Contributing code/features](#contribute-code-features) section below for next steps.
+If you are suggesting a feature that you are intending to implement, please see the [Contributing code/features](#contribute-codefeatures) section below for next steps.
## Contribute code/features
@@ -61,13 +61,13 @@ We actively encourage ongoing participation by community members.
Technical issues, designs, etc. are discussed using several different channels:
-- [GitHub issues](https://github.com/ampproject/amphtml/issues) and [pull requests](https://github.com/ampproject/amphtml/pulls)
-- [Slack](https://amphtml.slack.com) ([signup](https://bit.ly/amp-slack-signup))
- - the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN/details/) channel is the main channel for you to discuss/ask questions about _contributing_ to the open source project
- - if you're _new to contributing_ to AMP stop by [#welcome-contributors](https://amphtml.slack.com/messages/C432AFMFE/details/) to say hi!
- - **NOTE: if you have a question about _using AMP on your site_, use [Stack Overflow](https://stackoverflow.com/questions/tagged/amp-html) rather than Slack** as Stack Overflow is more actively monitored for these types of questions
- - there are many other Slack channels for more specific topics; after you join our Slack click on the "Channels" header to find other channels you want to participate in
-- the [amphtml-discuss Google Group](https://groups.google.com/forum/#!forum/amphtml-discuss)
+- [GitHub issues](https://github.com/ampproject/amphtml/issues) and [pull requests](https://github.com/ampproject/amphtml/pulls)
+- [Slack](https://amphtml.slack.com) ([signup](https://bit.ly/amp-slack-signup))
+ - the [#contributing](https://amphtml.slack.com/messages/C9HRJ1GPN/details/) channel is the main channel for you to discuss/ask questions about _contributing_ to the open source project
+ - if you're _new to contributing_ to AMP stop by [#welcome-contributors](https://amphtml.slack.com/messages/C432AFMFE/details/) to say hi!
+ - **NOTE: if you have a question about _using AMP on your site_, use [Stack Overflow](https://stackoverflow.com/questions/tagged/amp-html) rather than Slack** as Stack Overflow is more actively monitored for these types of questions
+ - there are many other Slack channels for more specific topics; after you join our Slack click on the "Channels" header to find other channels you want to participate in
+- the [amphtml-discuss Google Group](https://groups.google.com/forum/#!forum/amphtml-discuss)
### Working groups
diff --git a/package.json b/package.json
index ed9347ef95c4..31afb5f58232 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"private": true,
"name": "amp-html",
"version": "0.1.0",
- "description": "Fastish HTML",
+ "description": "AMP HTML - A web component framework for easily creating user-first websites, stories, ads, emails and more.",
"main": "index.js",
"author": "The AMP HTML Authors",
"license": "Apache-2.0",
@@ -10,9 +10,42 @@
"type": "git",
"url": "https://github.com/ampproject/amphtml.git"
},
+ "bugs": {
+ "url": "https://github.com/ampproject/amphtml/issues"
+ },
+ "homepage": "https://amp.dev",
+ "keywords": [
+ "amp",
+ "html",
+ "web-components",
+ "performance",
+ "mobile",
+ "javascript",
+ "framework",
+ "fast",
+ "responsive",
+ "pwa"
+ ],
+ "engines": {
+ "node": ">=18.0.0",
+ "npm": ">=8.0.0"
+ },
"scripts": {
"preinstall": "node build-system/common/check-package-manager.js",
- "postinstall": "node build-system/task-runner/install-amp-task-runner.js"
+ "postinstall": "node build-system/task-runner/install-amp-task-runner.js",
+ "test": "amp unit && amp integration",
+ "test:unit": "amp unit",
+ "test:integration": "amp integration",
+ "lint": "amp lint",
+ "lint:fix": "amp lint --fix",
+ "format": "amp prettify",
+ "format:fix": "amp prettify --fix",
+ "build": "amp build",
+ "build:prod": "amp dist",
+ "dev": "amp",
+ "clean": "amp clean",
+ "check-links": "amp check-links",
+ "pr-check": "amp pr-check"
},
"dependencies": {
"@ampproject/animations": "0.2.2",
@@ -109,6 +142,7 @@
"eslint-plugin-import": "2.31.0",
"eslint-plugin-jasmine": "4.2.2",
"eslint-plugin-jsdoc": "48.11.0",
+ "eslint-plugin-jsx-a11y": "6.10.0",
"eslint-plugin-local": "4.2.2",
"eslint-plugin-module-resolver": "1.5.0",
"eslint-plugin-prettier": "5.2.1",
![\"Sales](\"chart.png\")
+
+
+![\"\"](\"decoration.png\")
+
+
+