|
| 1 | +--- |
| 2 | +title: Announcing the 6.2 Release, Featuring Enhanced Model Rendering and Accessibility! |
| 3 | +author: Jules Sam. Randolph |
| 4 | +author_title: Developer of React Native Render HTML v6 |
| 5 | +author_url: https://github.com/jsamr/ |
| 6 | +author_image_url: https://avatars.githubusercontent.com/u/3646758?v=4 |
| 7 | +tags: [foundry, announcement] |
| 8 | +description: A version focused on accessibility and enhanced model rendering. |
| 9 | +image: img/foundry-announcement.png |
| 10 | +hide_table_of_contents: false |
| 11 | +draft: true |
| 12 | +--- |
| 13 | + |
| 14 | +It has been over two months since the first final version of the Foundry |
| 15 | +released has been made public. |
| 16 | + |
| 17 | +## You Might not Need a Custom Component Renderer Anymore |
| 18 | + |
| 19 | +Model-based custom rendering via `customHTMLElementModels` prop has been a |
| 20 | +lightweight alternative to custom (component) renderers since the early stages |
| 21 | +of the Foundry release. However, it was limited to setting user agent styles |
| 22 | +(`mixedUAStyles`), although those styles could be derived from the DOM node |
| 23 | +element attributes (`getUADerivedStyleFromAttributes`). |
| 24 | + |
| 25 | +```js title="An Example of Model-Based Rendering" |
| 26 | +const customHTMLElementModels = { |
| 27 | + 'blue-circle': HTMLElementModel.fromCustomModel({ |
| 28 | + tagName: 'blue-circle', |
| 29 | + mixedUAStyles: { |
| 30 | + width: 50, |
| 31 | + height: 50, |
| 32 | + borderRadius: 25, |
| 33 | + alignSelf: 'center', |
| 34 | + backgroundColor: 'blue' |
| 35 | + }, |
| 36 | + contentModel: HTMLContentModel.block |
| 37 | + }) |
| 38 | +}; |
| 39 | +``` |
| 40 | + |
| 41 | +Version 6.2 ships with a bunch of new properties for HTML element models which |
| 42 | +should make model-based custom rendering much more prevalent. Let's take a tour! |
| 43 | + |
| 44 | +### `getUADynamicMixedStyles` |
| 45 | + |
| 46 | +### `reactNativeProps` |
| 47 | + |
| 48 | +### `getDynamicReactNativeProps` |
| 49 | + |
| 50 | +## Don't Forget you can Mix Model-Based and Component-Based Custom Rendering |
| 51 | + |
| 52 | +## A Focus on Accessibility |
| 53 | + |
| 54 | +### Support for `aria-label` and `aria-role` Attributes |
| 55 | + |
| 56 | +### Accessible `<a>` Tags |
| 57 | + |
| 58 | +### Accessible `<img>` Tags |
| 59 | + |
| 60 | +### Accessible `<h1-60>` Tags |
| 61 | + |
| 62 | +### Other tags |
| 63 | + |
| 64 | +## Other Enhancements |
| 65 | + |
| 66 | +### Support for `user-select` CSS property |
| 67 | + |
| 68 | +### `getNativePropsForTnode` Function |
| 69 | + |
| 70 | +## Bonus: Notes on Version 6.1 |
| 71 | + |
| 72 | +### `renderIndex` and `renderLength` Props to `TDefaultRenderer` |
| 73 | + |
| 74 | +### `enableExperimentalBRCollapsing` Prop |
| 75 | + |
| 76 | +### `enableExperimentalGhostLinesPrevention` Prop |
| 77 | + |
| 78 | +### `provideEmbeddedHeaders` Prop |
| 79 | + |
| 80 | +### `bypassAnonymousTPhrasingNodes` Prop |
0 commit comments