@financial-times/dotcom-ui-header 13.9.0 → 13.9.1-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/node/components/search/partials.js +8 -7
  2. package/dist/node/components/sub-navigation/SubNavDropdown.d.ts +2 -0
  3. package/dist/node/components/sub-navigation/SubNavDropdown.js +3 -3
  4. package/dist/node/components/sub-navigation/SubNavWithDropdown.js +7 -3
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +3 -3
  7. package/src/__test__/components/SubNavDropdown.spec.tsx +16 -15
  8. package/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap +136 -96
  9. package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap +85 -60
  10. package/src/components/search/partials.tsx +32 -29
  11. package/src/components/sub-navigation/SubNavDropdown.tsx +9 -8
  12. package/src/components/sub-navigation/SubNavWithDropdown.tsx +19 -10
  13. package/src/components/sub-navigation/subNavDropdown.scss +18 -5
package/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap CHANGED
@@ -268,24 +268,27 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
268
268
  data-n-topic-search={true}
269
269
  role="search"
270
270
  >
271
- <label
271
+ <div
272
272
  className="o-header__search-term o-forms-field o-forms-field--optional"
273
- htmlFor="o-header-search-term-sticky"
274
273
  >
275
- <span
276
- className="o-forms-title o-header__visually-hidden"
274
+ <label
275
+ htmlFor="o-header-search-term-sticky"
277
276
  >
278
277
  <span
279
- className="o-forms-title__main"
278
+ className="o-forms-title o-header__visually-hidden"
280
279
  >
281
- Search the
282
- <abbr
283
- title="Financial Times"
280
+ <span
281
+ className="o-forms-title__main"
284
282
  >
285
- FT
286
- </abbr>
283
+ Search the
284
+ <abbr
285
+ title="Financial Times"
286
+ >
287
+ FT
288
+ </abbr>
289
+ </span>
287
290
  </span>
288
- </span>
291
+ </label>
289
292
  <span
290
293
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
291
294
  >
@@ -302,6 +305,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
302
305
  type="search"
303
306
  />
304
307
  <button
308
+ aria-label="search"
305
309
  className="o-header__search-submit"
306
310
  type="submit"
307
311
  >
@@ -315,6 +319,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
315
319
  </button>
316
320
  <button
317
321
  aria-controls="o-header-search-sticky"
322
+ aria-label="close"
318
323
  className="o-header__search-close o--if-js"
319
324
  data-trackable="close"
320
325
  title="Close search bar"
@@ -330,7 +335,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
330
335
  </span>
331
336
  </button>
332
337
  </span>
333
- </label>
338
+ </div>
334
339
  </form>
335
340
  </div>
336
341
  <div
@@ -846,24 +851,27 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
846
851
  data-n-topic-search={true}
847
852
  role="search"
848
853
  >
849
- <label
854
+ <div
850
855
  className="o-header__search-term o-forms-field o-forms-field--optional"
851
- htmlFor="o-header-search-term-sticky"
852
856
  >
853
- <span
854
- className="o-forms-title o-header__visually-hidden"
857
+ <label
858
+ htmlFor="o-header-search-term-sticky"
855
859
  >
856
860
  <span
857
- className="o-forms-title__main"
861
+ className="o-forms-title o-header__visually-hidden"
858
862
  >
859
- Search the
860
- <abbr
861
- title="Financial Times"
863
+ <span
864
+ className="o-forms-title__main"
862
865
  >
863
- FT
864
- </abbr>
866
+ Search the
867
+ <abbr
868
+ title="Financial Times"
869
+ >
870
+ FT
871
+ </abbr>
872
+ </span>
865
873
  </span>
866
- </span>
874
+ </label>
867
875
  <span
868
876
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
869
877
  >
@@ -880,6 +888,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
880
888
  type="search"
881
889
  />
882
890
  <button
891
+ aria-label="search"
883
892
  className="o-header__search-submit"
884
893
  type="submit"
885
894
  >
@@ -893,6 +902,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
893
902
  </button>
894
903
  <button
895
904
  aria-controls="o-header-search-sticky"
905
+ aria-label="close"
896
906
  className="o-header__search-close o--if-js"
897
907
  data-trackable="close"
898
908
  title="Close search bar"
@@ -908,7 +918,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders FT Pro dropdown me
908
918
  </span>
909
919
  </button>
910
920
  </span>
911
- </label>
921
+ </div>
912
922
  </form>
913
923
  </div>
914
924
  <div
@@ -1178,24 +1188,27 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
1178
1188
  data-n-topic-search={true}
1179
1189
  role="search"
1180
1190
  >
1181
- <label
1191
+ <div
1182
1192
  className="o-header__search-term o-forms-field o-forms-field--optional"
1183
- htmlFor="o-header-search-term-sticky"
1184
1193
  >
1185
- <span
1186
- className="o-forms-title o-header__visually-hidden"
1194
+ <label
1195
+ htmlFor="o-header-search-term-sticky"
1187
1196
  >
1188
1197
  <span
1189
- className="o-forms-title__main"
1198
+ className="o-forms-title o-header__visually-hidden"
1190
1199
  >
1191
- Search the
1192
- <abbr
1193
- title="Financial Times"
1200
+ <span
1201
+ className="o-forms-title__main"
1194
1202
  >
1195
- FT
1196
- </abbr>
1203
+ Search the
1204
+ <abbr
1205
+ title="Financial Times"
1206
+ >
1207
+ FT
1208
+ </abbr>
1209
+ </span>
1197
1210
  </span>
1198
- </span>
1211
+ </label>
1199
1212
  <span
1200
1213
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
1201
1214
  >
@@ -1212,6 +1225,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
1212
1225
  type="search"
1213
1226
  />
1214
1227
  <button
1228
+ aria-label="search"
1215
1229
  className="o-header__search-submit"
1216
1230
  type="submit"
1217
1231
  >
@@ -1225,6 +1239,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
1225
1239
  </button>
1226
1240
  <button
1227
1241
  aria-controls="o-header-search-sticky"
1242
+ aria-label="close"
1228
1243
  className="o-header__search-close o--if-js"
1229
1244
  data-trackable="close"
1230
1245
  title="Close search bar"
@@ -1240,7 +1255,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as a logged in use
1240
1255
  </span>
1241
1256
  </button>
1242
1257
  </span>
1243
- </label>
1258
+ </div>
1244
1259
  </form>
1245
1260
  </div>
1246
1261
  <div
@@ -1510,24 +1525,27 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
1510
1525
  data-n-topic-search={true}
1511
1526
  role="search"
1512
1527
  >
1513
- <label
1528
+ <div
1514
1529
  className="o-header__search-term o-forms-field o-forms-field--optional"
1515
- htmlFor="o-header-search-term-sticky"
1516
1530
  >
1517
- <span
1518
- className="o-forms-title o-header__visually-hidden"
1531
+ <label
1532
+ htmlFor="o-header-search-term-sticky"
1519
1533
  >
1520
1534
  <span
1521
- className="o-forms-title__main"
1535
+ className="o-forms-title o-header__visually-hidden"
1522
1536
  >
1523
- Search the
1524
- <abbr
1525
- title="Financial Times"
1537
+ <span
1538
+ className="o-forms-title__main"
1526
1539
  >
1527
- FT
1528
- </abbr>
1540
+ Search the
1541
+ <abbr
1542
+ title="Financial Times"
1543
+ >
1544
+ FT
1545
+ </abbr>
1546
+ </span>
1529
1547
  </span>
1530
- </span>
1548
+ </label>
1531
1549
  <span
1532
1550
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
1533
1551
  >
@@ -1544,6 +1562,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
1544
1562
  type="search"
1545
1563
  />
1546
1564
  <button
1565
+ aria-label="search"
1547
1566
  className="o-header__search-submit"
1548
1567
  type="submit"
1549
1568
  >
@@ -1557,6 +1576,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
1557
1576
  </button>
1558
1577
  <button
1559
1578
  aria-controls="o-header-search-sticky"
1579
+ aria-label="close"
1560
1580
  className="o-header__search-close o--if-js"
1561
1581
  data-trackable="close"
1562
1582
  title="Close search bar"
@@ -1572,7 +1592,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders as an anonymous us
1572
1592
  </span>
1573
1593
  </button>
1574
1594
  </span>
1575
- </label>
1595
+ </div>
1576
1596
  </form>
1577
1597
  </div>
1578
1598
  <div
@@ -1842,24 +1862,27 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
1842
1862
  data-n-topic-search={true}
1843
1863
  role="search"
1844
1864
  >
1845
- <label
1865
+ <div
1846
1866
  className="o-header__search-term o-forms-field o-forms-field--optional"
1847
- htmlFor="o-header-search-term-sticky"
1848
1867
  >
1849
- <span
1850
- className="o-forms-title o-header__visually-hidden"
1868
+ <label
1869
+ htmlFor="o-header-search-term-sticky"
1851
1870
  >
1852
1871
  <span
1853
- className="o-forms-title__main"
1872
+ className="o-forms-title o-header__visually-hidden"
1854
1873
  >
1855
- Search the
1856
- <abbr
1857
- title="Financial Times"
1874
+ <span
1875
+ className="o-forms-title__main"
1858
1876
  >
1859
- FT
1860
- </abbr>
1877
+ Search the
1878
+ <abbr
1879
+ title="Financial Times"
1880
+ >
1881
+ FT
1882
+ </abbr>
1883
+ </span>
1861
1884
  </span>
1862
- </span>
1885
+ </label>
1863
1886
  <span
1864
1887
  className="o-forms-input o-forms-input--text o-forms-input--suffix"
1865
1888
  >
@@ -1876,6 +1899,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
1876
1899
  type="search"
1877
1900
  />
1878
1901
  <button
1902
+ aria-label="search"
1879
1903
  className="o-header__search-submit"
1880
1904
  type="submit"
1881
1905
  >
@@ -1889,6 +1913,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
1889
1913
  </button>
1890
1914
  <button
1891
1915
  aria-controls="o-header-search-sticky"
1916
+ aria-label="close"
1892
1917
  className="o-header__search-close o--if-js"
1893
1918
  data-trackable="close"
1894
1919
  title="Close search bar"
@@ -1904,7 +1929,7 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders restart subscripti
1904
1929
  </span>
1905
1930
  </button>
1906
1931
  </span>
1907
- </label>
1932
+ </div>
1908
1933
  </form>
1909
1934
  </div>
1910
1935
  <div
package/src/components/search/partials.tsx CHANGED
@@ -20,41 +20,44 @@ const Search = ({ instance }) => {
20
20
  aria-label="Site search"
21
21
  data-n-topic-search
22
22
  >
23
- <label htmlFor={inputId} className="o-header__search-term o-forms-field o-forms-field--optional">
23
+ <div className="o-header__search-term o-forms-field o-forms-field--optional">
24
+ <label htmlFor={inputId}>
24
25
  <span className="o-forms-title o-header__visually-hidden">
25
26
  <span className="o-forms-title__main">
26
27
  Search the <abbr title="Financial Times">FT</abbr>
27
28
  </span>
28
29
  </span>
29
- <span className="o-forms-input o-forms-input--text o-forms-input--suffix">
30
- <input
31
- id={inputId}
32
- name="q"
33
- type="search"
34
- autoComplete="off"
35
- autoCorrect="off"
36
- autoCapitalize="off"
37
- spellCheck={false}
38
- placeholder="Search for stories, topics or securities"
39
- role="combobox"
40
- aria-controls={`suggestions-${inputId}`}
41
- />
42
- <button className="o-header__search-submit" type="submit">
43
- <span aria-hidden="true" className="o-header__search-icon"></span>
44
- <span>Search</span>
45
- </button>
46
- <button
47
- className="o-header__search-close o--if-js"
48
- type="button"
49
- aria-controls={`o-header-search-${instance}`}
50
- title="Close search bar"
51
- data-trackable="close"
52
- >
53
- <span className="o-header__visually-hidden">Close search bar</span>
54
- <span>Close</span>
55
- </button>
56
- </span>
57
30
  </label>
31
+ <span className="o-forms-input o-forms-input--text o-forms-input--suffix">
32
+ <input
33
+ id={inputId}
34
+ name="q"
35
+ type="search"
36
+ autoComplete="off"
37
+ autoCorrect="off"
38
+ autoCapitalize="off"
39
+ spellCheck={false}
40
+ placeholder="Search for stories, topics or securities"
41
+ role="combobox"
42
+ aria-controls={`suggestions-${inputId}`}
43
+ />
44
+ <button className="o-header__search-submit" type="submit" aria-label="search">
45
+ <span aria-hidden="true" className="o-header__search-icon"></span>
46
+ <span>Search</span>
47
+ </button>
48
+ <button
49
+ className="o-header__search-close o--if-js"
50
+ type="button"
51
+ aria-controls={`o-header-search-${instance}`}
52
+ title="Close search bar"
53
+ data-trackable="close"
54
+ aria-label="close"
55
+ >
56
+ <span className="o-header__visually-hidden">Close search bar</span>
57
+ <span>Close</span>
58
+ </button>
59
+ </span>
60
+ </div>
58
61
  </form>
59
62
  </div>
60
63
  <div className="o-header__search-widget-anchor" data-o-header-search-widget-anchor={instance} />
package/src/components/sub-navigation/SubNavDropdown.tsx CHANGED
@@ -7,30 +7,31 @@ interface DropdownItem {
7
7
  }
8
8
 
9
9
  interface SubNavDropdownProps {
10
+ id: string
10
11
  items: DropdownItem[]
12
+ ariaLabelledBy: string
11
13
  title?: string
12
14
  }
13
15
 
14
- const SubNavDropdown: React.FC<SubNavDropdownProps> = ({ items, title }) => {
16
+ const SubNavDropdown: React.FC<SubNavDropdownProps> = ({ id, items, ariaLabelledBy, title }) => {
15
17
  return (
16
18
  <div
19
+ id={id}
17
20
  className="o-header__subnav-dropdown"
18
- data-o-header-subnav-dropdown
19
- aria-hidden="true"
20
- aria-expanded="false"
21
+ data-o-header-subnav-dropdown-modal
21
22
  role="dialog"
22
23
  aria-modal="true"
23
- aria-label={title || 'Navigation menu'}
24
+ aria-labelledby={ariaLabelledBy}
24
25
  >
25
26
  {title && <h2 className="o-header__subnav-dropdown-title">{title}</h2>}
26
- <span
27
+ <button
27
28
  className="o-header__subnav-dropdown-close"
28
29
  data-o-header-subnav-dropdown-close
29
30
  aria-label="Close menu"
30
- role="button"
31
+ type="button"
31
32
  >
32
33
  <span className="o-header__subnav-dropdown-close-icon" />
33
- </span>
34
+ </button>
34
35
  <ul className="o-header__subnav-dropdown-list">
35
36
  {items.map((item, index) => (
36
37
  <li key={index} className="o-header__subnav-dropdown-item">
package/src/components/sub-navigation/SubNavWithDropdown.tsx CHANGED
@@ -10,18 +10,27 @@ interface SubNavWithDropdownProps {
10
10
 
11
11
  const SubNavWithDropdown: React.FC<SubNavWithDropdownProps> = ({ item, selected }) => {
12
12
  const dropdownItems = item.subnavDropdownOptions || []
13
+ const labelSlug = item.label?.toLowerCase().replace(/\s+/g, '-')
14
+ const buttonId = `subnav-dropdown-button-${labelSlug}`
15
+ const modalId = `subnav-dropdown-modal-${labelSlug}`
13
16
 
14
17
  return (
15
- <span
16
- role="button"
17
- tabIndex={0}
18
- className={`o-header__subnav-link ${selected}`}
19
- {...ariaSelected(item)}
20
- data-trackable={item.label}
21
- >
22
- {item.label}
23
- <SubNavDropdown items={dropdownItems} title={item.label} />
24
- </span>
18
+ <div data-o-header-subnav-dropdown-parent>
19
+ <button
20
+ id={buttonId}
21
+ type="button"
22
+ className={`o-header__subnav-link ${selected}`}
23
+ {...ariaSelected(item)}
24
+ data-trackable={item.label}
25
+ aria-controls={modalId}
26
+ aria-haspopup="dialog"
27
+ aria-expanded="false"
28
+ data-o-header-subnav-dropdown-button
29
+ >
30
+ {item.label}
31
+ </button>
32
+ <SubNavDropdown id={modalId} ariaLabelledBy={buttonId} items={dropdownItems} title={item.label} />
33
+ </div>
25
34
  )
26
35
  }
27
36
 
package/src/components/sub-navigation/subNavDropdown.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import '@financial-times/o3-foundation/css/professional.css';
2
2
 
3
- .o-header__subnav-link:has([data-o-header-subnav-dropdown]) {
4
- cursor: pointer;
3
+ [data-o-header-subnav-dropdown-parent] {
4
+ cursor: default;
5
5
  display: inline-block;
6
6
  position: relative;
7
7
  }
@@ -50,8 +50,21 @@
50
50
  }
51
51
  }
52
52
 
53
+ [data-o-header-subnav-dropdown-button] {
54
+ background-color: inherit;
55
+ font-family: inherit;
56
+ font-size: inherit;
57
+ font-weight: inherit;
58
+ line-height: inherit;
59
+ &:focus,
60
+ &:focus-visible {
61
+ box-shadow: var(--o3-focus-use-case-outline-color);
62
+ }
63
+ cursor: default !important; // On desktop the hover action will open the modal with click doing nothing additional. Therefore the pointer is misleading.
64
+ }
65
+
53
66
  @media (hover: none) {
54
- .o-header__subnav-link:has([data-o-header-subnav-dropdown]) {
67
+ [data-o-header-subnav-dropdown-parent] {
55
68
  -webkit-tap-highlight-color: transparent;
56
69
  }
57
70
 
@@ -61,8 +74,8 @@
61
74
  * limited to iOS to prevent android widening the layout when items overflow.
62
75
  */
63
76
  @supports (-webkit-touch-callout: none) {
64
- .o-header__subnav:has([data-o-header-subnav-dropdown][aria-hidden='false']) .o-header__subnav-wrap-outside,
65
- .o-header__subnav:has([data-o-header-subnav-dropdown][aria-hidden='false']) .o-header__subnav-wrap-inside {
77
+ .o-header__subnav:has([data-o-header-subnav-dropdown-button][aria-expanded='true']) .o-header__subnav-wrap-outside,
78
+ .o-header__subnav:has([data-o-header-subnav-dropdown-button][aria-expanded='true']) .o-header__subnav-wrap-inside {
66
79
  overflow: visible;
67
80
  }
68
81
  }