Skip to content
This repository has been archived by the owner on Apr 21, 2023. It is now read-only.

Commit

Permalink
Update to the semantic HTML section of the a11y page (#1156)
Browse files Browse the repository at this point in the history
  • Loading branch information
jsfeldman authored and AlmeroSteyn committed Sep 6, 2018
1 parent cf62830 commit bc756a8
Showing 1 changed file with 16 additions and 2 deletions.
18 changes: 16 additions & 2 deletions content/docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ In these cases we should rather use [React Fragments](/docs/fragments.html) to g

For example,

```javascript{1,5,8,18,21}
```javascript{1,5,8}
import React, { Fragment } from 'react';
function ListItem({ item }) {
Expand All @@ -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) {
return (
<dl>
Expand All @@ -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}
function ListItem({ item }) {
Expand Down

0 comments on commit bc756a8

Please sign in to comment.