Chore merge from d8883d7 to 8e5dada

[julien-deramond]

• twbs/bootstrap@d8883d7
• twbs/bootstrap@2f61721
• twbs/bootstrap@5036f70
• twbs/bootstrap@e4741f7
• twbs/bootstrap@f722615
• twbs/bootstrap@3a8c758
• twbs/bootstrap@e946bf7
• twbs/bootstrap@8321397
• twbs/bootstrap@9369cd9
• twbs/bootstrap@14292b4
• twbs/bootstrap@213888e
• twbs/bootstrap@6dc18c6: nothing to do here because this example is hidden in Boosted doc (tracked in [Tracking] Dark mode #2140 to be reintegrated with the dark mode support)
• twbs/bootstrap@787dfea
• twbs/bootstrap@221862f
• twbs/bootstrap@e244dbc
• twbs/bootstrap@5370ddc
• twbs/bootstrap@88c4885
• twbs/bootstrap@d333d70
• twbs/bootstrap@1ab75c8
• twbs/bootstrap@43e4bf9
• twbs/bootstrap@e0d54ff
• twbs/bootstrap@4315801: applied it as-is but I'm going to create a PR upstream to avoid loading Algolia files when unit examples are rendered
• twbs/bootstrap@e2854b9
• twbs/bootstrap@52d5369
• twbs/bootstrap@3515ac1
  • ⚠️ This one wasn't easy to merge, please double-check thoroughly
• twbs/bootstrap@6301ca1
• twbs/bootstrap@2c7f888:
  • Too complex to reintegrate in this PR. Created Integrate properly Bootstrap 2c7f888 commit #2163 to tackle it separately.
• twbs/bootstrap@bd7a045
• twbs/bootstrap@fef8958
• twbs/bootstrap@609e645
• twbs/bootstrap@df38215
• twbs/bootstrap@42a055c
• twbs/bootstrap@4617a76
• twbs/bootstrap@5bcb0fa
• twbs/bootstrap@79e196a
• twbs/bootstrap@9ff96a4
• twbs/bootstrap@e2de56d
• twbs/bootstrap@2990534
• twbs/bootstrap@afa2fc4
• twbs/bootstrap@de69649
• twbs/bootstrap@a5c7303
• twbs/bootstrap@a0931d0
• twbs/bootstrap@ccc7305
• twbs/bootstrap@877e672
• twbs/bootstrap@cdcb503: will regenerate it at the end of this PR if possible
• twbs/bootstrap@8c13516
• twbs/bootstrap@6a9b9af
• twbs/bootstrap@674ea99
• twbs/bootstrap@7dfa9c5
• twbs/bootstrap@3ea4168
• twbs/bootstrap@b3da789: we don't have any Cheatsheet example pages in Boosted
• twbs/bootstrap@101ff73: we don't have any Carousel example pages in Boosted
• twbs/bootstrap@9205ffe
• twbs/bootstrap@303e567
• twbs/bootstrap@cf074cd
• twbs/bootstrap@ae255aa
• twbs/bootstrap@83e5ec8
• twbs/bootstrap@fb348b6
• twbs/bootstrap@86c5371
• twbs/bootstrap@fd0a4e6
• twbs/bootstrap@a814733
• twbs/bootstrap@8fcfce1
• twbs/bootstrap@d45cc7e
• twbs/bootstrap@1c80bd9
• twbs/bootstrap@4271d22
• twbs/bootstrap@01dacaf: we don't have any Dashboard example pages in Boosted
• twbs/bootstrap@92d779f
  • ⚠️ Also regenerated package-lock.json at this moment
• twbs/bootstrap@ea21de1
• twbs/bootstrap@cc5a8a9: we don't have floating labels in Boosted
• twbs/bootstrap@57ddb42
• twbs/bootstrap@11b3806: nothing to do here since our own bundlewatch values were OK
• twbs/bootstrap@8e5dada: we don't have any Buttons example pages in Boosted

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	7fa7882
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64be77b63350a900088dbc72
😎 Deploy Preview	https://deploy-preview-2162--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	cac57bd
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64c0cc17158c6e000711cd05
😎 Deploy Preview	https://deploy-preview-2162--boosted.netlify.app/docs/5.3/components/navs-tabs
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[julien-deramond]

@louismaximepiton I let you review this PR and in the meantime, I'll fix pa11y errors (see https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/actions/runs/5656026746/job/15322504889?pr=2162):

Scrollable region must have keyboard access

It comes from the regeneration of package-lock.json which bumped the axe-core sub-dependency used by pa11y; now 4.7.2 instead of 4.5.2. So I suppose that we have new rules to take care of.

Note: the errors come from the 4.7.0 version where:

scrollable-region-focusable: change impact to serious (dequelabs/axe-core#3959) (e3a5c21)
scrollable-region-focusable: skip native controls (dequelabs/axe-core#3862) (b0bdefa)

Full errors

Errors in http://localhost:9001/docs/5.3/utilities/overflow/:

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(7)
   > div:nth-child(1))

   <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border"
   style="max-width: 200px; max-height: 100px; white-space: nowrap;">
   <div><code>.overflow-x-aut...</div>

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(7)
   > div:nth-child(4))

   <div class="overflow-x-scroll p-3 bg-white w-100 border" style="max-width:
   200px; max-height: 100px;white-space: nowrap;">
   <div><code>.overflow-x-scr...</div>

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) >
   div:nth-child(11) > div:nth-child(1))

   <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border"
   style="max-width: 200px; max-height: 100px;">
   <code>.overflow-y-auto</co...</div>

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) >
   div:nth-child(11) > div:nth-child(4))

   <div class="overflow-y-scroll p-3 w-100 border" style="max-width: 200px;
   max-height: 100px;"> <code>.overflow-y-scroll</...</div>

Errors in http://localhost:9001/docs/5.3/content/tables/:

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) >
   div:nth-child(86) > div)

   <div class="table-responsive"> <table class="table"> ...</div>

Errors in http://localhost:9001/docs/5.3/content/typography/:

 • Scrollable region must have keyboard access
   (https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI)

   (html > body > div:nth-child(6) > main > div:nth-child(3) > div:nth-child(7))

   <div class="table-responsive"><table class="table"> <thead> <...</div>

✘ 128/131 URLs passed
ERROR: "docs-pa11y" exited with 2.
Error: Process completed with exit code 1.

To understand the error, please go to https://codepen.io/julien-deramond/pen/bGQxKej with Chrome and you'll see that without tabindex="0" the area isn't focusable with the keyboard. So the idea to fix it is to add this tabindex="0" where needed as explained by https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI.

How to fix these issues

In order not to block this PR for a long time, I chose to:

• hide the errors temporarily from pa11Y with 2307b60
• propose a fix upstream for the overflow part: Add tabindex="0" whenever .overflow-*-{auto|scroll} are used for a11y twbs/bootstrap#38963
• propose a fix upstream for the .table-responsive part: Use tabindex="0" whenever .table-responsive* is used twbs/bootstrap#38971 (also linked to Missing tabindex="0" on responsive tables #1711 on Boosted-side)

The idea would be to merge this PR, create an issue for the overflow part in Boosted, and add a comment in #1711. Those 2 waiting for a feedback upstream before making a decision; if the fix is accepted upstream it'll come back naturally in Boosted, otherwise we'll Boosted mod the fixes.

[louismaximepiton]

We should maybe add something in the migration guide about the aria-disabled thing ?

Should we change the appearance attribute for QS too ? twbs/bootstrap@1ab75c8 I don't know how to test it properly. But changing its place doesn't seem to bring new errors so I'm a bit lost on this.

Few things to tackle before merging.

[louismaximepiton]

[Bootstrap Side] The markup isn't the one shown in the doc for the dropstart.

[julien-deramond]

Should we change the appearance attribute for QS too ? twbs/bootstrap@1ab75c8 I don't know how to test it properly. But changing its place doesn't seem to bring new errors so I'm a bit lost on this.

Upstream this change has been made to prevent an issue. Between the commits and the deps updates, there was a moment where the issues were actually there; and I had to do this commit 53652a4. There was no error with the quantity selector so I think we're good. It's reproducible anymore since the deps have changed again in the recent commits.

FYI you only had to run npm run docs for instance to see the errors.

[louismaximepiton]

LGTM!