> [!note] > Combine the [[iOS Checklist]] into *this* note ## Checklist * Prototypes are properly made * Prototype start flows are named with descriptions * Scroll views are appropriately enabled * Variables, Styles, and Components * Are variables and styles correctly applied? * Are components laid out? Are properties and variants specified correctly? * Annotations * For full pages, have I described the context using a handoff screen component? * For design details, are components annotated using Figma dev mode? * Are layers named in a way that makes sense? Do I have Scroll Views and Stacks named appropriately? (==Can something be both a scroll view *and* a stack?==) * Accessibility: Containers and Dynamic Type * Are iPad variations specified for each page? (i.e. 1100, 1200, 1300) * Any container that might enlarge with dynamic text is set as a scroll view * Max widths are set to indicate how large containers can get (i.e. iPad) - Truncation behavior is set (head, tail, middle) - Multiline behavior is specified for any flex or text box * Is Dynamic Type specified?? Have I labeled how truncation should work? Are min-heights and max-heights set in place for text containers? - Maximum constraints are set on how much type can scale (up to AX3) - Font weights are set to increase if "Bold Text" is enabled - We've QA'd and checked the designs against the following situations: - iPhone SE - iPhone SE, AX3 set - iPad - iPad, AX3 set ## Logbook ### 2024-05-31 * **Font Family** * We need the individual TTF for variable font; XCode doesn't recognize variable font files, apparently. ==Why? Look up SwiftUI and variable fonts== * OTF files of the ABC Social font seem to work, but not perfectly. * **"Dynamic Font" Accessibility Feature** * We can enable Dynamic Text for all fonts everywhere across all the pages, but we may not want to until we can go through and update everything. * **"Bold Text" Accessibility Feature** * Default Rule: regular text becomes bold, bold text becomes black * ABC Social: ==Not Working, possibly because of OTF; do we have TTFs?== * Roboto: Working, applied to all screens * Lora: Working, applied to all screens * Inter: Working, applied to all screens * We have this setup to only apply for the screens we're talking about ![[20240531_Darrion_01.png]] * **Truncation** * We can give text a line-limit * We can give text a max-width ==but how? As percentage? Points? Pixels?== * In both cases, we can define truncation. ![[20240531_Darrion_02.png]] * **Icons** * Icons are "images", and may be able to scale it. ==But how? Right now icons are NOT scaling.== ![[20240531_Darrion_03.png]] ### 2024-06-03 * Text Max Width * Can we set * Truncation --- * **Font Family** * We need the individual TTF for variable font; XCode doesn't recognize variable font files, apparently. ==Why?== * OTF files of the ABC Social font seem to work! * **Dynamic Font** * We can enable Dynamic Text for all fonts everywhere across all the pages, but we may not want to until we can go through and update everything. * **Bold Font** ![[20240531_Darrion_01.png]] --- ### 2024-06-08 iOS Accessibility Follow-up, includes _at least_: - Get icons to scale *with* - Capping Dynamic text size scaling at AX3 - ~~Getting ABC Social TTF files so we can increase/decrease weights for the font~~ - I want to get some clarity around max-width and min-width for text containers - Stop buttons from reaching a certain width - Stop texts from reaching a certain height - Are scroll views "scrollable" even if the text does not expand beyond the screen? (For example, is the Face ID enabled area is made a scroll view, does it scroll in the smallest mode? It shouldn't...) ### 2024-06-12 > [!note] > This is the agenda I typed out for Darrion and I's conversation coming up on the 17th, to finish off the final questions I have about SwiftUI and accessibility So, with this ticket, we’re trying to finish fleshing out some of our accessibility decisions, and extending them slightly. The goal is to primarily to make sure Dynamic Type is working across the board, though I have a few other questions as well. **Dynamic Type** - **Scaling icons.** Can icons scale with Dynamic Type? What do we need to do to get them to? Potential resources - [Dev Techie Blog: “SwiftUI Image View: Dynamic Scaling in SF Symbol”](https://www.devtechie.com/swiftui_imageview_dynamic_scaling_in_sf_symbol "https://www.devtechie.com/swiftui_imageview_dynamic_scaling_in_sf_symbol") - [StackOverflow: “How to dynamically size an image in SwiftUI for accessibility?” (2021 answer)](https://stackoverflow.com/questions/65603929/how-to-dynamically-size-an-image-in-swiftui-for-accessibility "https://stackoverflow.com/questions/65603929/how-to-dynamically-size-an-image-in-swiftui-for-accessibility") - [Scaling%20views%20to%20complement%20text]SwiftUI Concept Tutorials: Scaling views to complement text - **Capping Dynamic Type text.** Can we cap how large text gets? For example, can we say “Get no bigger than AX3?” Or do we _have_ to support up to AX5? Potential resources - [Use Your Loaf blog: “Restricting dynamic type sizes”](https://useyourloaf.com/blog/restricting-dynamic-type-sizes/ "https://useyourloaf.com/blog/restricting-dynamic-type-sizes/") - **Custom Fonts and Compatibiltiy.** Can we confirm that Dynamic Type works with _both_ SF Pro and ABC Social? - [Medium: SwiftUI Accessibility: Dynamic Type, “Custom Fonts” section](https://medium.com/@r.whitaker/swiftui-accessibility-dynamic-type-d9b99ae87334 "https://medium.com/@r.whitaker/swiftui-accessibility-dynamic-type-d9b99ae87334") - **Custom Fonts and Relative Styles.** Does [this article’s concept of specifying relative styles](https://uxdesign.cc/designing-for-scalable-dynamic-type-in-ios-5d3e2ae554eb "https://uxdesign.cc/designing-for-scalable-dynamic-type-in-ios-5d3e2ae554eb") something we’re doing? In other words, can I propose a custom style name and a “relative style,” and is that being expressed in the code? ([See how I’m doing it in Figma](https://www.figma.com/design/353dh7zYeJO3338rUtJ2zs/0.-Native-Library-(iOS)?node-id=2151-724 "https://www.figma.com/design/353dh7zYeJO3338rUtJ2zs/0.-Native-Library-(iOS)?node-id=2151-724")) **Bold Text** - **Bold Text.** Just want to confirm: bold text makes all fonts (ABC Social and SF Pro) bolder? **Containers and Widths** - **Containers.** Are containers and text containers the same? Should I be thinking about them differently? - **Specifying Widths.** Can we specify max-width and max-height in both pixels and percentages? Can we specify line limits and truncation? As a set of examples, are each of the following scenarios possible: - Limit this text container to 400px width and keep it 1 line; if text goes longer, truncate - Limit this text container to 50% width and keep it no more than 2 lines; if text goes longer, truncate - Limit this text container to X height; if text goes longer, truncate - Have this container be 100% with a max-width of 600px; height can go on forever - **Scroll Views.** Right now, are scroll views “scrollable” _only_ if text goes outside the bounds of what’s visible? Or does making something “scrollable” mean that you can swipe it up and down even _if_ no text goes beyond its bounds? **A Note for Later** I’d love to get setup with Xcode! Might need to be a different day, but flagging it for now