Skip to content

Commit 489c561

Browse files
wesruvkelsSgithub-actions[bot]castastrophekylebuch8
authored
feat: CPFED-4084 primary details mobile optimization (#1582)
* CPFED-4017: continued working on keyboard feature, added light dom scss file. * CPFED-4017: Got arrow key features working per tab instance * CPFED-4017 Cleaned up comments and stale code, added explicit setting of tabindex 0 to next toggle since the buttons were changed to heading tags to address IE11 issues * CPFED-4017: Add focus style indicator for active and focus state, increase clickable area of links * CPFED-4017: Updates based on feedback and add logic to adjust the tabindex attrs for active toggles and tabpanels on page load * CPFED-4017: added more updates based on feedback and added note to figure out how to address tabindex issue with footer region of tabs * CPFED-4017: Made progress on fixing tab order issue for tab footer section and active panels * CPFED-4017: continued troubleshooting tab order and visibility issue * CPFED-4017: continued trying method to address tab order issue with details footer * CPFED-4017: continued working on fixing bug * CPFED-4017: commented out code to see if it was causing the build bug * CPFED-4017: removed accidental browsersync import that was caused by VS Code ext and making the build fail * CPFED-4017: continued workin on tab order bug * CPFED-4017: continued workin on tab order bug * CPFED-4017: continued workin on tab order bug * CPFED-4017: updated to use consistent-height attr on top one, moved footer slot to fix tab order issue, add js to add focus style class to fix web comp psuedo selector issue * CPFED-4017: updated to use consistent-height attr * CPFED-4017: added focus style class feature * CPFED-4017: added focus indicator readme info, removed lightdom style sheet * MVP for mobile optimized primary detail * Setting default breakpoint width to 800 * Fixing bugs and polishing keyboard navigation of primary detail * Fixing most tests and fixed bug where nav was hidden at desktop * Code formatting updates * CPFED-4084: Polished code and and tests and moved to new testing framework from PFE * CPFED-4084: Updating docs and script for testing * Updating changelog * Updating code comments and minor code changes * Update CHANGELOG-1.x.md Co-authored-by: [ Cassondra ] <[email protected]> * CPFED-4084: making a11y adjustments for mobile layout of pfe primary detail * CPFED-4084: making a11y adjustments for mobile layout of pfe primary detail * CPFED-4084: making a11y adjustments for mobile layout of pfe primary detail * CPFED-4084: updated aria attrs for mobile and desktop state, added arrow indicators to the mobile view of the toggles. * CPFED-4084: updatd aria attr states for mobile and desktop, added code comments * CPFED-4084: updted aria attrs on resize and fixed mobile issue with active toggle * Fixing up tests and worked on misc todos and animation jank * CPFED-4084: set lang attr to en on demo so that screen readers know what pronunciations to use, addresses lighthouse issues as well Co-authored-by: kelsS <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: Kyle Buchanan <[email protected]>
1 parent 3765170 commit 489c561

12 files changed

+1416
-569
lines changed

‎CHANGELOG-1.x.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# 1.11.0 (2021)
22

3+
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Pfe-Primary-Detail - Added much improved a11y and keyboard navigation, added mobile optimized layout behavior, and added thorough tests using new framework.
34
- [f378caa](https://github.com/patternfly/patternfly-elements/commit/f378caab97b4a2cbf39b9cfad10900bdcf290dde) fix: pfe-autocomplete update aria-selected attribute
45
- [d3ea7fa](https://github.com/patternfly/patternfly-elements/commit/d3ea7facb0c36b7f3e20e2568bdc4bf2e5a5a852) feat: Graceful failure for component registry
56
- [099dc3e](https://github.com/patternfly/patternfly-elements/commit/099dc3e2d3ce732a32ecde0644f5c03ec1e8dd9c) fix: Accordion alignment with latest design kit

‎elements/pfe-primary-detail/README.md‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# PatternFly Element | Primary detail element
22

3-
43
## Usage
4+
55
A primary-detail layout is an interface that shows a list of items and the corresponding details of the selected item.
66

77
This component is an implementation of one of the "Primary detail simple list in card" from [Patternfly React](https://www.patternfly.org/v4/demos/primary-detail), more layouts may be implemented later.
@@ -56,8 +56,32 @@ This component is an implementation of one of the "Primary detail simple list in
5656
```
5757

5858
### Accessibility
59+
5960
The default markup should have semantic markup if the component can't load, once it loads the component the appropriate tab interactions and appropriate markup for assistive tech is handled for you.
6061

62+
Elements in the `details` slot should not have a role (before the component updates it) and should not be a `ul`, `ol`, `dl`, or other tags with specific semantic meaning. The slotted tag will get a `role`, which will interfere with any other responsibilities the element has for the accessibility tree/assistive tech.
63+
64+
#### Focus Indicator Styles
65+
@todo this section is to be moved
66+
The component requires visible focus indicator styles for focusable elements (ie.`links`, `buttons`, `[tabindex="0"]`) in order to meet [**WCAG 2.0/2.1 AA compliance**](https://www.w3.org/WAI/WCAG21/quickref/#focus-visible). Below is a good example of styles to use for the focus indicator, these styles match the focus indicator of `pfe-navigation`. The `padding` style is to increase the clickable area of links in order to help users have a better experience when trying to click the links, this also helps users with limited mobility.
67+
68+
```html
69+
pfe-primary-detail .is-focused:focus,
70+
pfe-primary-detail .is-focused:hover {
71+
outline: 1px dashed #000;
72+
outline-width: 2px;
73+
}
74+
75+
pfe-primary-detail ul.is-focused:hover,
76+
pfe-primary-detail :not(pfe-cta).is-focused:hover {
77+
outline: 0;
78+
}
79+
80+
pfe-primary-detail a.is-focused {
81+
padding: 8px;
82+
}
83+
```
84+
6185
## Slots
6286

6387
For this component to work, there should be an equal number of `details-nav` and `details` slotted elements.
@@ -69,27 +93,34 @@ For this component to work, there should be an equal number of `details-nav` and
6993

7094
## Attributes
7195

96+
### Author controlled attributes:
7297
- `consistent-height`: Makes sure the primary details element doesn't change height when a different `details` item is shown.
98+
- `breakpoint-width`: The min-width of the **component** (not window) before it gets a two column desktop layout.
99+
100+
### Component controlled attributes
101+
- `active`: If a "details-nav" is selected so the "details" are visible, the "details-nav" id will show up as the value of the attributes. If nothing is open, the attribute will not exist.
102+
- `breakpoint`: Indicates the layout state (which is managed by JS). Will be set to 'compact' or 'desktop'. JS will check the width of the component after resize to make sure it isn't smaller than the breakpoint-width.
103+
73104

74105
## Variable hooks
75106

76107
Available hooks for styling:
77108

78109
| Variable name | Default value | Region |
79-
| --- | --- | --- |
110+
| ------------- | ------------- | ------ |
80111
| `--pfe-primary-details--Border` | `1px solid #d2d2d2` | N/A |
81112
| `--pfe-primary-details--GridTemplateColumns` | `1fr 2fr` | N/A |
82-
| `--pfe-primary-details__nav--Color` | `#151515!important` | nav |
83-
| `--pfe-primary-details__nav--Color--active` | `#06c!important` | nav |
84-
| `--pfe-primary-details__nav--Background--active` | `#f0f0f0!important` | nav |
113+
| `--pfe-primary-details__nav--Color` | `#151515` | nav |
114+
| `--pfe-primary-details__nav--Color--active` | `#06c` | nav |
115+
| `--pfe-primary-details__nav--Background--active` | `#f0f0f0` | nav |
85116
| `--pfe-primary-details__details--Background` | `#fff` | details |
86117

87118

88119
## Events
89120

90121
### pfe-primary-detail:shown-tab
91122

92-
Fires when a new tab is selected.
123+
Fires when a new tab is selected, will provide a reference to the tab and details that were opened.
93124

94125
```
95126
detail: {
@@ -100,7 +131,7 @@ detail: {
100131

101132
### pfe-primary-detail:hidden-tab
102133

103-
Fires when a selected tab is no longer the selected tab.
134+
Fires when a selected tab is no longer the selected tab, will provide a reference to the tab and details that were closed.
104135

105136
```
106137
detail: {
@@ -119,7 +150,10 @@ Describe any dependent elements or libraries here too. -->
119150

120151
## Test
121152

122-
`npm run test`
153+
Run tests from the project root with:
154+
```
155+
npm run test:watch --element=pfe-primary-detail
156+
```
123157

124158
## Build
125159

‎elements/pfe-primary-detail/demo/index.html‎

Lines changed: 160 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
@@ -37,7 +37,7 @@
3737
"../dist/pfe-primary-detail.umd.js",
3838
'../../pfe-cta/dist/pfe-cta.umd.js'
3939
])</script>
40-
40+
<link rel="stylesheet" media="all" type="text/css" href="../dist/pfe-primary-detail--lightdom.css">
4141
<style>
4242
body {
4343
padding: 40px;
@@ -69,107 +69,199 @@
6969
.ansible-styles .pfe-primary-detail__toggle--active {
7070
font-weight: bold;
7171
}
72+
73+
pfe-primary-detail .is-focused:focus,
74+
pfe-primary-detail .is-focused:hover {
75+
outline: 1px dashed #000;
76+
outline-width: 2px;
77+
}
78+
79+
pfe-primary-detail ul.is-focused:hover,
80+
pfe-primary-detail :not(pfe-cta).is-focused:hover {
81+
outline: 0;
82+
}
83+
84+
pfe-primary-detail a.is-focused {
85+
padding: 8px;
86+
}
7287
</style>
7388

7489
</head>
7590
<body unresolved>
7691
<h1><code>pfe-primary-detail</code></h1>
7792

93+
<h2>Default styles with Focus Indicator styles </h2>
94+
<p>Has consistent height</p>
95+
<pfe-primary-detail consistent-height>
96+
<h3 slot="details-nav--header" style="font-size: inherit; margin: 0 0 0.5em; padding: 9px 0.75em 0.75em;">
97+
<a href="#">
98+
Integrations
99+
</a>
100+
</h3>
101+
<h3 slot="details-nav">Infrastructure and Management</h3>
102+
<div slot="details">
103+
<ul>
104+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
105+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
106+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
107+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
108+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
109+
</ul>
110+
</div>
111+
112+
<h3 slot="details-nav">Cloud Computing</h3>
113+
<div slot="details">
114+
<ul>
115+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
116+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
117+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
118+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
119+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
120+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
121+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
122+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
123+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
124+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
125+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
126+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
127+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
128+
</ul>
129+
</div>
130+
131+
<h3 slot="details-nav">Storage</h3>
132+
<div slot="details">
133+
<ul>
134+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
135+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
136+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
137+
</ul>
138+
</div>
139+
140+
<h3 slot="details-nav">Runtimes</h3>
141+
<div slot="details">
142+
<ul>
143+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
144+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
145+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
146+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
147+
</ul>
148+
</div>
149+
</pfe-primary-detail>
150+
78151
<h2>Default styles with a nav footer</h2>
152+
<p>Does not have consistent height</p>
79153
<pfe-primary-detail>
80154
<h3 slot="details-nav">Infrastructure and Management</h3>
81-
<ul slot="details">
82-
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
83-
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
84-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
85-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
86-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
87-
</ul>
155+
156+
<div slot="details">
157+
<ul>
158+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
159+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
160+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
161+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
162+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
163+
</ul>
164+
</div>
88165

89166
<h3 slot="details-nav">Cloud Computing</h3>
90-
<ul slot="details">
91-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
92-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
93-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
94-
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
95-
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
96-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
97-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
98-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
99-
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
100-
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
101-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
102-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
103-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
104-
</ul>
167+
<div slot="details">
168+
<ul>
169+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
170+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
171+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
172+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
173+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
174+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
175+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
176+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
177+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
178+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
179+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
180+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
181+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
182+
</ul>
183+
</div>
105184

106185
<h3 slot="details-nav">Storage</h3>
107-
<ul slot="details">
108-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
109-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
110-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
111-
</ul>
186+
<div slot="details">
187+
<ul>
188+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
189+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
190+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
191+
</ul>
192+
</div>
112193

113194
<h3 slot="details-nav">Runtimes</h3>
114-
<ul slot="details">
115-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
116-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
117-
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
118-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
119-
</ul>
195+
<div slot="details">
196+
<ul>
197+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
198+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
199+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
200+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
201+
</ul>
202+
</div>
120203

121204
<div slot="details-nav--footer" style="padding: 1em 0.75em 2em;">
122205
<pfe-cta priority="primary"><a href="#">All Products</a></pfe-cta>
123206
</div>
124207
</pfe-primary-detail>
125208

126209
<h2>Customized styles (with CSS vars and light DOM CSS) </h2>
210+
<p>Has consistent height</p>
127211
<pfe-primary-detail class="ansible-styles" consistent-height>
128212
<h3 slot="details-nav--header" style="font-size: inherit; margin: 0 0 0.5em; padding: 9px 0.75em 0.75em;">
129213
<a href="#">
130214
Integrations
131215
</a>
132216
</h3>
133217
<h3 slot="details-nav">Infrastructure and Management</h3>
134-
<ul slot="details">
135-
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
136-
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
137-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
138-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
139-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
140-
</ul>
218+
<div slot="details">
219+
<ul>
220+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
221+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
222+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
223+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
224+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
225+
</ul>
226+
</div>
141227

142228
<h3 slot="details-nav">Cloud Computing</h3>
143-
<ul slot="details">
144-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
145-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
146-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
147-
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
148-
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
149-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
150-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
151-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
152-
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
153-
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
154-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
155-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
156-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
157-
</ul>
229+
<div slot="details">
230+
<ul>
231+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
232+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
233+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
234+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
235+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
236+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
237+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
238+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
239+
<li><a href="#nowhere">Lorum ipsum dolor sit amet</a></li>
240+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
241+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
242+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
243+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
244+
</ul>
245+
</div>
158246

159247
<h3 slot="details-nav">Storage</h3>
160-
<ul slot="details">
161-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
162-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
163-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
164-
</ul>
248+
<div slot="details">
249+
<ul>
250+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
251+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
252+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
253+
</ul>
254+
</div>
165255

166256
<h3 slot="details-nav">Runtimes</h3>
167-
<ul slot="details">
168-
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
169-
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
170-
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
171-
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
172-
</ul>
257+
<div slot="details">
258+
<ul>
259+
<li><a href="#nowhere">Pellentesque fermentum dolor</a></li>
260+
<li><a href="#nowhere">Morbi in sem quis dui placerat ornare</a></li>
261+
<li><a href="#nowhere">Aliquam tincidunt mauris eu risus</a></li>
262+
<li><a href="#nowhere">Praesent dapibus, neque id cursus faucibus</a></li>
263+
</ul>
264+
</div>
173265
</pfe-primary-detail>
174266

175267

0 commit comments

Comments
 (0)