Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove unnecessary role="img" #2704

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
+16 −16
Open

Remove unnecessary role="img" #2704

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
774a3b1
Remove unnecessary role="img" on aria-hidden SVGs
hannahiss Aug 22, 2024
0fb94a6
Remove unnecessary role="img" on aria-hidden SVGs or `<img>`
hannahiss Aug 22, 2024
bafce54
Merge branch 'main' into main-his-a11y-role-img
hannahiss Sep 5, 2024
73050ce
Fix a11y audit: remove unnecessary role="img"
hannahiss Sep 5, 2024
8f844fd
Merge branch 'main' into main-his-a11y-role-img
hannahiss Sep 19, 2024
9d25cd4
finalise merge
hannahiss Sep 19, 2024
3ef32eb
migration guide
hannahiss Sep 19, 2024
e0c02c2
revert dist
hannahiss Sep 19, 2024
0523fcc
fix migration guide:get text from PR #2690
hannahiss Sep 19, 2024
0ee0a85
Merge branch 'main' into main-his-a11y-role-img
hannahiss Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions site/content/docs/5.3/about/brand.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,15 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
<div class="col">
<div class="ratio ratio-1x1">
<figure class="d-flex bg-black">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange master logo" loading="lazy">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" alt="Orange master logo" loading="lazy">
<figcaption class="figure-caption fw-bold position-absolute">Master logo</figcaption>
</figure>
</div>
</div>
<div class="col">
<div class="ratio ratio-1x1">
<figure class="d-flex bg-black">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img m-auto" width="30" height="30" role="img" alt="Orange small logo" loading="lazy">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img m-auto" width="30" height="30" alt="Orange small logo" loading="lazy">
<figcaption class="figure-caption fw-bold position-absolute">Small logo</figcaption>
</figure>
</div>
Expand All @@ -49,7 +49,7 @@ Orange Business Services has its own logo that contains the Orange logo and the
<div class="col">
<div class="ratio ratio-1x1">
<figure class="d-flex bg-black">
<img src="/docs/{{< param docs_version >}}/assets/brand/OBS-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange Business Services logo" loading="lazy">
<img src="/docs/{{< param docs_version >}}/assets/brand/OBS-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" alt="Orange Business Services logo" loading="lazy">
<figcaption class="figure-caption fw-bold position-absolute">Orange Business Services logo</figcaption>
</figure>
</div>
Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/components/scrollspy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
<div class="bd-example">
<nav id="navbar-example2" class="navbar px-3 mb-3">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted - Back to Home" loading="lazy">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
</a>
<ul class="nav nav-pills">
<li class="nav-item">
Expand Down Expand Up @@ -72,7 +72,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
```html
<nav id="navbar-example2" class="navbar px-3 mb-3">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted - Back to Home" loading="lazy">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="Boosted - Back to Home" loading="lazy">
</a>
<ul class="nav nav-pills">
<li class="nav-item">
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/customize/color-palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Please make sure that none of the [color theme variables]({{< docsref "/customiz
{{- range $color := .colors }}
<figure class="mb-0" aria-label="{{ $color.name }}">
<button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="{{ $color.variable }}" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
<svg viewBox="0 0 100 100" role="img" aria-hidden="true" preserveAspectRatio="xMidYMid meet" {{ if or (or (eq $color.name "White 100") (eq $color.name "Black 900")) (eq $color.name "Gray 900") }} style="border: 1px solid var(--bs-border-color-subtle)" {{ end }}>
<svg viewBox="0 0 100 100" aria-hidden="true" preserveAspectRatio="xMidYMid meet" {{ if or (or (eq $color.name "White 100") (eq $color.name "Black 900")) (eq $color.name "Gray 900") }} style="border: 1px solid var(--bs-border-color-subtle)" {{ end }}>
<rect fill="{{ $color.hex }}" width="100" height="100"/>
</svg>
<span class="visually-hidden">Copy variable name {{ $color.variable }}</span>
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.3/dark-mode.md
View file
Open in desktop
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -4072,7 +4072,7 @@ sitemap:
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-icon">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="User" loading="lazy" width="25" height="25">
<span class="visually-hidden">My account</span>
</a>
</li>
Expand Down Expand Up @@ -4160,7 +4160,7 @@ sitemap:
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-icon">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="User" loading="lazy" width="25" height="25">
<span class="visually-hidden">My account</span>
</a>
</li>
Expand Down Expand Up @@ -4248,7 +4248,7 @@ sitemap:
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-icon">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="User" loading="lazy" width="25" height="25">
<span class="visually-hidden">My account</span>
</a>
</li>
Expand Down Expand Up @@ -4336,7 +4336,7 @@ sitemap:
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-icon">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="User" loading="lazy" width="25" height="25">
<span class="visually-hidden">My account</span>
</a>
</li>
Expand Down Expand Up @@ -4424,7 +4424,7 @@ sitemap:
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-icon">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" width="25" height="25">
<img src="/docs/{{< param docs_version >}}/assets/img/navbar-contact.png" alt="User" loading="lazy" width="25" height="25">
<span class="visually-hidden">My account</span>
</a>
</li>
Expand Down
20 changes: 10 additions & 10 deletions site/content/docs/5.3/examples/download-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,37 +237,37 @@ <h2 class="h1 mb-4 mb-md-5 text-primary text-center">What you get from the showc
<div class="col-12 col-md-5 pt-2 pt-md-0 mb-4 mb-md-0">
<ul class="list-unstyled mb-0 ticks-list">
<li class="d-flex align-items-start mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
<use xlink:href="#tick"/>
</svg>
<p class="fw-bold mb-0">In situ visibility of all the elements available in the mobile code library for each mobile operating system</p>
</li>
<li class="d-flex align-items-start mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
<use xlink:href="#tick"/>
</svg>
<p class="fw-bold mb-0">Live experience of the available interactions for each component, and ability to select the right customisation</p>
</li>
<li class="d-flex align-items-start mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
<use xlink:href="#tick"/>
</svg>
<p class="fw-bold mb-0">Time saving by finding the code to use, by selecting the right component variant and it's possible customisation</p>
</li>
<li class="d-flex align-items-start mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
<use xlink:href="#tick"/>
</svg>
<p class="fw-bold mb-0">Confidence in the fact that the available components are following the Orange brand standard</p>
</li>
<li class="d-flex align-items-start mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
<use xlink:href="#tick"/>
</svg>
<p class="fw-bold mb-0">Assurance that the components have been tested amongst the accessibility standard from the industry</p>
</li>
<li class="d-flex align-items-start mb-md-3">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="me-3 flex-shrink-0" width="1.875rem" height="1.875rem" aria-hidden="true">
<use xlink:href="#tick"/>
</svg>
<p class="fw-bold mb-0">Coverage of iOS and Android with app and SDK being available in open-source</p>
Expand Down Expand Up @@ -360,22 +360,22 @@ <h2 class="h1 mb-2 mb-md-3 text-center">Your feedback is valued</h2>
<p class="h3 mb-md-3 text-center">Let us know if you spot anything to correct or improve</p>
<div class="d-flex gap-md-3 flex-column flex-lg-row justify-content-between mt-4">
<div class="d-flex flex-column align-items-center mb-4 mb-md-0">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-2 mb-md-4 icons-lg" width="6.25rem" height="6.25rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-2 mb-md-4 icons-lg" width="6.25rem" height="6.25rem" aria-hidden="true">
<use xlink:href="#apple"/>
</svg>
<a href="https://github.com/Orange-OpenSource/ods-ios/issues/new/choose" target="_blank" rel="noopener" class="btn btn-lg btn-outline-secondary mt-1 mt-md-0">
<svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.25rem" height="1.25rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.25rem" height="1.25rem" aria-hidden="true">
<use xlink:href="#apple"/>
</svg>
iOS feedback
</a>
</div>
<div class="d-flex flex-column align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-2 mb-md-4 icons-lg" width="6.25rem" height="6.25rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-2 mb-md-4 icons-lg" width="6.25rem" height="6.25rem" aria-hidden="true">
<use xlink:href="#android"/>
</svg>
<a href="https://github.com/Orange-OpenSource/ods-android/issues/new/choose" target="_blank" rel="noopener" class="btn btn-lg btn-outline-secondary mt-1 mt-md-0">
<svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.25rem" height="1.25rem" role="img" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.25rem" height="1.25rem" aria-hidden="true">
<use xlink:href="#android"/>
</svg>
Android feedback
Expand Down
5 changes: 4 additions & 1 deletion site/content/docs/5.3/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,13 @@ toc: true
#### Buttons
- <span class="badge text-bg-success">New</span> X social button.

#### Orange navbar
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm going crazy with all these PRs... This was already done in #2690 here, and in a better way I find... What do you think @julien-deramond

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anyway, I made some changes:

- <span class="badge text-bg-warning">Warning</span> Unnecessary `role="img"` has been removed from the user's `<img>`. Please reflect this modification into your websites.

### Docs

- Certain variants of the components and renderings have been omitted from the documentation to help you clearly understand what is available for use, thereby simplifying the connection between [Orange Design System]({{< param ods.web >}}) and the Boosted documentation.

Although these variants can still be found under the "See Bootstrap examples that are incompatible with Orange Design System" section, be aware that using them may violate the Orange Design System guidelines. It is advisable to avoid these variants whenever possible.

### CSS and Sass variables
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/shortcodes/orange-global-headers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ <h1 class="title">Title</h1>
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-icon">
<img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" width="25" height="25" role="img" alt="User" loading="lazy">
<img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" width="25" height="25" alt="User" loading="lazy">
<span class="visually-hidden">My account</span>
</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion site/layouts/shortcodes/orange-supra.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
</li>
<li class="nav-item">
<a href="#" class="nav-link nav-icon">
<img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" role="img" alt="User" loading="lazy" aria-hidden="true">
<img src="/docs/{{ $.Site.Params.docs_version }}/assets/img/navbar-contact.png" alt="User" loading="lazy" aria-hidden="true">
<span class="visually-hidden">My account</span>
</a>
</li>
Expand Down
Loading