Skip to content

Commit

Permalink
Update spec templates to mention mobile support (#1466)
Browse files Browse the repository at this point in the history
# Pull Request

## 🤨 Rationale

We have started talking more about mobile support. While we still don't
have requirements or prioritization guidance to support mobile as a
first class platform, we should at least start thinking about it (or
explicitly deprioritizing it) for new components.

## 👩‍💻 Implementation

Scanned our spec templates for dev and IxD and added new sections /
bullets listing example mobile requirements to consider.

Also deleted a section in the new component template that seemed
specific to FAST's mission and org structure.

## 🧪 Testing

N/A

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [X] I have updated the project documentation to reflect my changes or
determined no changes are needed.
  • Loading branch information
jattasNI authored Sep 7, 2023
1 parent c1b9105 commit 8e9908e
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 6 deletions.
5 changes: 3 additions & 2 deletions specs/templates/component-interaction-design.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@

## Design

- *Full description of the proposed interaction design.*
- *Include links or embedded views of design in XD or Figma and provide any additional context.*
- *Full description of the proposed interaction design*
- *Include links or embedded views of design in XD or Figma and provide any additional context*
- *Include accessibility considerations like keyboard interactions and ARIA role/states/properties*
- *Include mobile considerations like touch interactions and behavior on small screens*

## Validation

Expand Down
16 changes: 12 additions & 4 deletions specs/templates/custom-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@

### Visual Appearance

*Work with Visual Design to create Adobe XD files and other design assets. Be sure to account for the various component states, including hover, active, etc. as well as validity, and appearance variants. Focus primarily on the officially supported design system as well as known community scenarios as appropriate. Consider other popular design systems during this process and, where possible, ensure that common design features that may not be part of the officially supported design system can be accommodated. Work closely with engineering to co-develop the visual design along side the API and anatomy.*
*Work with Visual Design to create Figma files and other design assets. Be sure to account for the various component states, including hover, active, etc. as well as validity, and appearance variants.*

---

Expand All @@ -95,13 +95,21 @@
*Consider the accessibility of the component, including:*

- *Keyboard Navigation and Focus*
- *Form Input*
- *Form Input and Autofill*
- *Use with Assistive Technology. For example:*
- *All components should define a role and support labels / being labelled so that assistive technology can identify them*
- *The implications shadow dom might have on how roles and attributes are presented in the accessibility tree.*
- *Components which delegate focus require all global ARIA attributes to be enumerated.*
- *The implications shadow dom might have on how roles and attributes are presented in the accessibility tree*
- *Components which delegate focus require all global ARIA attributes to be enumerated*
- *Behavior with browser configurations like "Prefers reduced motion"*

### Mobile

*Consider how the component will behave on mobile devices, including:*

- *Overflow behavior when screen space is constrained*
- *Interactions that are affected by touch rather than a pointer device (e.g. hover)*
- *Integration with common mobile experiences like native pickers, on-screen keyboards, and dictation*

### Globalization

*Consider whether the component has any special globalization needs such as:*
Expand Down
1 change: 1 addition & 0 deletions specs/templates/fast-based-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
- *Documentation: Any requirements besides standard Storybook docs and updating the Example Client App demo?*
- *Tooling: Any new tools, updates to tools, code generation, etc?*
- *Accessibility: keyboard navigation/focus, form input, use with assistive technology, etc.*
- *Mobile: small screens, touch interactions, mobile-specific integrations*
- *Globalization: special RTL handling, swapping of icons/visuals, localization, etc.*
- *Performance: does the FAST component meet Nimble's performance requirements?*
- *Security: Any requirements for security?*
Expand Down

0 comments on commit 8e9908e

Please sign in to comment.