docs(a11y): drop focusable='false' for SVGs (#2678)

Orange-OpenSource · Aug 5, 2024 · 1ae5c02 · 1ae5c02
1 parent a8bd737
commit 1ae5c02
Show file tree

Hide file tree

Showing 20 changed files with 261 additions and 260 deletions.
diff --git a/site/content/docs/5.3/components/badge.md b/site/content/docs/5.3/components/badge.md
@@ -67,7 +67,7 @@ Please refer to our [Boosted Navbars examples]({{< docsref "/examples/navbars" >
 
 {{< example >}}
 <a href="#" class="position-relative">
- <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+ <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
  </svg>
  <span class="visually-hidden">Shopping basket</span>

diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
@@ -69,19 +69,19 @@ The recommended way of using an icon in a button is [an embedded SVG]({{< docsre
 
 {{< example >}}
 <button type="button" class="btn btn-primary btn-sm">
- <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
+ <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" class="me-1 overflow-visible">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  Primary
 </button>
 <button type="button" class="btn btn-primary">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" class="me-1">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  Primary
 </button>
 <button type="button" class="btn btn-primary btn-lg">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" class="me-1 overflow-visible">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  Primary
@@ -94,19 +94,19 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur
 
 {{< example >}}
 <button type="button" class="btn btn-icon btn-outline-secondary btn-sm">
- <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+ <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">Secondary</span>
 </button>
 <button type="button" class="btn btn-icon btn-outline-secondary">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">Secondary</span>
 </button>
 <button type="button" class="btn btn-icon btn-outline-secondary btn-lg">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">Secondary</span>
@@ -119,19 +119,19 @@ Use `.btn-no-outline` to get a borderless button as default state, and a consist
 
 {{< example >}}
 <button type="button" class="btn btn-icon btn-no-outline btn-sm">
- <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+ <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">No outline</span>
 </button>
 <button type="button" class="btn btn-icon btn-no-outline">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">No outline</span>
 </button>
 <button type="button" class="btn btn-icon btn-no-outline btn-lg">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">No outline</span>

diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md
@@ -40,22 +40,22 @@ If you choose this option, please be aware that if the design of close buttons c
 
 {{< example stackblitz_add_js="true" >}}
 <button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
 </button>
 
 <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
 </button>
 
 <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
 </button>
 
 <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
- <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
+ <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
 </button>
 {{< /example >}}

diff --git a/site/content/docs/5.3/components/orange-navbar.md b/site/content/docs/5.3/components/orange-navbar.md
@@ -180,15 +180,15 @@ An additional navbar (with text or icon items) can be added on the right of the
  <ul class="navbar-nav flex-row">
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+ <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
  <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#search" />
  </svg>
  <span class="visually-hidden">Search</span>
  </a>
  </li>
  <li class="nav-item">
  <a href="#" class="nav-link nav-icon">
- <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+ <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
  <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#buy" />
  </svg>
  <span class="visually-hidden">Basket</span>
@@ -364,7 +364,7 @@ You can add a search input into your Global header.
  <ul class="navbar-nav flex-row">
  <li class="nav-item d-lg-none">
  <a href="#" class="nav-link nav-icon">
- <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
+ <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" class="overflow-visible">
  <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#search" />
  </svg>
  <span class="visually-hidden">Search</span>

diff --git a/site/content/docs/5.3/components/tags.md b/site/content/docs/5.3/components/tags.md
@@ -53,7 +53,7 @@ Most of the time, tags must be inside a list (`<ul>` or `<ol>`).
  <li>
  <input type="checkbox" class="btn-check" id="btncheck-tv" autocomplete="off" checked>
  <label class="tag" for="btncheck-tv">
-  <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
+  <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true">
   <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
   </svg>
   <span class="visually-hidden">Filter by</span>TV
@@ -70,7 +70,7 @@ The text of the button must be clear enough to explain the function.
  <li><button class="tag"><span class="visually-hidden">Filter by</span>Mobile</button></li>
  <li>
  <button class="tag active">
-  <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
+  <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true">
   <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
   </svg>
   <span class="visually-hidden">Filter by</span>TV
@@ -108,7 +108,7 @@ Here is an [accessible example](https://a11y-guidelines.orange.com/en/web/compon
  <button class="close" aria-labelledby="labelTag1"><span class="visually-hidden">Close</span></button>
  </span></li>
  <li><span class="tag" id="labelTag2">
- <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
+ <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
  </svg>
  Dismissible tag
@@ -137,7 +137,7 @@ Add `.tag-sm` to the `.tag` for a small variant.
 <button class="tag tag-sm">Filter</button>
 <a class="tag tag-sm" href="#">Navigation</a>
 <p><span class="tag tag-sm" id="labelTag4">
- <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+ <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
  </svg>
  Input
@@ -166,7 +166,7 @@ Disabled tags using the `<a>` element behave a bit different:
 <button class="tag" disabled>Filter</button>
 <a class="tag disabled" aria-disabled="true">Navigation</a>
 <p><span class="tag disabled" id="labelTag5" aria-disabled="true">
- <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
+ <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
  </svg>
  Input

diff --git a/site/content/docs/5.3/components/title-bars.md b/site/content/docs/5.3/components/title-bars.md
@@ -84,7 +84,7 @@ We **strongly recommend** to use `srcset` attribute as it is [well supported](ht
 <div class="bg-supporting-purple title-bar" data-bs-theme="light">
  <div class="container-xxl">
  <h1 class="display-1">Title</h1>
- <svg aria-hidden="true" focusable="false" width="1.8em"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"/></svg>
+ <svg aria-hidden="true" width="1.8em"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"/></svg>
  </div>
 </div>
 {{</ example >}}

diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
@@ -131,14 +131,14 @@ With an SVG:
 
 <div class="bd-example tooltip-demo">
  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Default tooltip">
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
   <rect width="100%" height="100%" fill="#563d7c"/>
   <circle cx="50" cy="50" r="30" fill="#007bff"/>
  </svg>
  </a>
 
  <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
- <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" aria-hidden="true" focusable="false">
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" aria-hidden="true">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
  </svg>
  <span class="visually-hidden">Helper</span>
@@ -147,14 +147,14 @@ With an SVG:
 
 ```html
 <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Default tooltip">
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
  <rect width="100%" height="100%" fill="#563d7c"/>
  <circle cx="50" cy="50" r="30" fill="#007bff"/>
  </svg>
 </a>
 
 <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
- <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" aria-hidden="true" focusable="false">
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" aria-hidden="true">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
  </svg>
  <span class="visually-hidden">Helper</span>