Browse Source

Update to the semantic HTML section of the a11y page (#1156)

main
Jonathan 7 years ago
committed by Almero Steyn
parent
commit
bc756a8102
  1. 18
      content/docs/accessibility.md

18
content/docs/accessibility.md

@ -50,7 +50,7 @@ In these cases we should rather use [React Fragments](/docs/fragments.html) to g
For example, For example,
```javascript{1,5,8,18,21} ```javascript{1,5,8}
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
function ListItem({ item }) { function ListItem({ item }) {
@ -62,6 +62,20 @@ function ListItem({ item }) {
); );
} }
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
<ListItem item={item} key={item.id} />
))}
</dl>
);
}
```
You can map a collection of items to an array of fragments as you would any other type of element as well:
```javascript{6,9}
function Glossary(props) { function Glossary(props) {
return ( return (
<dl> <dl>
@ -77,7 +91,7 @@ function Glossary(props) {
} }
``` ```
When you don't need any props on the Fragment tag you can also use the [short syntax](/docs/fragments.html#short-syntax), if your tooling supports it: When you don't need any props on the Fragment tag you can use the [short syntax](/docs/fragments.html#short-syntax), if your tooling supports it:
```javascript{3,6} ```javascript{3,6}
function ListItem({ item }) { function ListItem({ item }) {

Loading…
Cancel
Save