Replaced sr-only with visually-hidden for the Bootstrap 5 upgrade.

Author: gammamatrix

src/Report/Html/Renderer/Template/coverage_bar.html.dist

@@ -1,5 +1,5 @@
        <div class="progress">
          <div class="progress-bar bg-{{level}}" role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{percent}}%">
-           <span class="sr-only">{{percent}}% covered ({{level}})</span>
+           <span class="visually-hidden">{{percent}}% covered ({{level}})</span>
          </div>
        </div>

src/Report/Html/Renderer/Template/coverage_bar_branch.html.dist

@@ -1,5 +1,5 @@
        <div class="progress">
          <div class="progress-bar bg-{{level}}" role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{percent}}%">
-           <span class="sr-only">{{percent}}% covered ({{level}})</span>
+           <span class="visually-hidden">{{percent}}% covered ({{level}})</span>
          </div>
        </div>

tests/_files/Report/HTML/CoverageForBankAccount/BankAccount.php.html

@@ -45,15 +45,15 @@
        <td class="warning">Total</td>
        <td class="warning big">       <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="62.50" aria-valuemin="0" aria-valuemax="100" style="width: 62.50%">
-           <span class="sr-only">62.50% covered (warning)</span>
+           <span class="visually-hidden">62.50% covered (warning)</span>
          </div>
        </div>
 </td>
        <td class="warning small"><div align="right">62.50%</div></td>
        <td class="warning small"><div align="right">5&nbsp;/&nbsp;8</div></td>
        <td class="warning big">       <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75.00" aria-valuemin="0" aria-valuemax="100" style="width: 75.00%">
-           <span class="sr-only">75.00% covered (warning)</span>
+           <span class="visually-hidden">75.00% covered (warning)</span>
          </div>
        </div>
 </td>
@@ -62,7 +62,7 @@
        <td class="warning small"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></td>
        <td class="danger big">       <div class="progress">
          <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" style="width: 0.00%">
-           <span class="sr-only">0.00% covered (danger)</span>
+           <span class="visually-hidden">0.00% covered (danger)</span>
          </div>
        </div>
 </td>
@@ -74,15 +74,15 @@
        <td class="warning">BankAccount</td>
        <td class="warning big">       <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="62.50" aria-valuemin="0" aria-valuemax="100" style="width: 62.50%">
-           <span class="sr-only">62.50% covered (warning)</span>
+           <span class="visually-hidden">62.50% covered (warning)</span>
          </div>
        </div>
 </td>
        <td class="warning small"><div align="right">62.50%</div></td>
        <td class="warning small"><div align="right">5&nbsp;/&nbsp;8</div></td>
        <td class="warning big">       <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75.00" aria-valuemin="0" aria-valuemax="100" style="width: 75.00%">
-           <span class="sr-only">75.00% covered (warning)</span>
+           <span class="visually-hidden">75.00% covered (warning)</span>
          </div>
        </div>
 </td>
@@ -91,7 +91,7 @@
        <td class="warning small">6.32</td>
        <td class="danger big">       <div class="progress">
          <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" style="width: 0.00%">
-           <span class="sr-only">0.00% covered (danger)</span>
+           <span class="visually-hidden">0.00% covered (danger)</span>
          </div>
        </div>
 </td>
@@ -103,15 +103,15 @@
        <td class="success">&nbsp;<a href="#6"><abbr title="getBalance()">getBalance</abbr></a></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">1&nbsp;/&nbsp;1</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
@@ -125,15 +125,15 @@
        <td class="danger">&nbsp;<a href="#11"><abbr title="setBalance($balance)">setBalance</abbr></a></td>
        <td class="danger big">       <div class="progress">
          <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" style="width: 0.00%">
-           <span class="sr-only">0.00% covered (danger)</span>
+           <span class="visually-hidden">0.00% covered (danger)</span>
          </div>
        </div>
 </td>
        <td class="danger small"><div align="right">0.00%</div></td>
        <td class="danger small"><div align="right">0&nbsp;/&nbsp;3</div></td>
        <td class="danger big">       <div class="progress">
          <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" style="width: 0.00%">
-           <span class="sr-only">0.00% covered (danger)</span>
+           <span class="visually-hidden">0.00% covered (danger)</span>
          </div>
        </div>
 </td>
@@ -147,15 +147,15 @@
        <td class="success">&nbsp;<a href="#20"><abbr title="depositMoney($balance)">depositMoney</abbr></a></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">2&nbsp;/&nbsp;2</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
@@ -169,15 +169,15 @@
        <td class="success">&nbsp;<a href="#27"><abbr title="withdrawMoney($balance)">withdrawMoney</abbr></a></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">2&nbsp;/&nbsp;2</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>

tests/_files/Report/HTML/CoverageForBankAccount/index.html

@@ -45,23 +45,23 @@
        <td class="warning">Total</td>
        <td class="warning big">       <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="62.50" aria-valuemin="0" aria-valuemax="100" style="width: 62.50%">
-           <span class="sr-only">62.50% covered (warning)</span>
+           <span class="visually-hidden">62.50% covered (warning)</span>
          </div>
        </div>
 </td>
        <td class="warning small"><div align="right">62.50%</div></td>
        <td class="warning small"><div align="right">5&nbsp;/&nbsp;8</div></td>
        <td class="warning big">       <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75.00" aria-valuemin="0" aria-valuemax="100" style="width: 75.00%">
-           <span class="sr-only">75.00% covered (warning)</span>
+           <span class="visually-hidden">75.00% covered (warning)</span>
          </div>
        </div>
 </td>
        <td class="warning small"><div align="right">75.00%</div></td>
        <td class="warning small"><div align="right">3&nbsp;/&nbsp;4</div></td>
        <td class="danger big">       <div class="progress">
          <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" style="width: 0.00%">
-           <span class="sr-only">0.00% covered (danger)</span>
+           <span class="visually-hidden">0.00% covered (danger)</span>
          </div>
        </div>
 </td>
@@ -73,23 +73,23 @@
        <td class="warning"><img src="_icons/file-code.svg" class="octicon" /><a href="BankAccount.php.html">BankAccount.php</a></td>
        <td class="warning big">       <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="62.50" aria-valuemin="0" aria-valuemax="100" style="width: 62.50%">
-           <span class="sr-only">62.50% covered (warning)</span>
+           <span class="visually-hidden">62.50% covered (warning)</span>
          </div>
        </div>
 </td>
        <td class="warning small"><div align="right">62.50%</div></td>
        <td class="warning small"><div align="right">5&nbsp;/&nbsp;8</div></td>
        <td class="warning big">       <div class="progress">
          <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="75.00" aria-valuemin="0" aria-valuemax="100" style="width: 75.00%">
-           <span class="sr-only">75.00% covered (warning)</span>
+           <span class="visually-hidden">75.00% covered (warning)</span>
          </div>
        </div>
 </td>
        <td class="warning small"><div align="right">75.00%</div></td>
        <td class="warning small"><div align="right">3&nbsp;/&nbsp;4</div></td>
        <td class="danger big">       <div class="progress">
          <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" style="width: 0.00%">
-           <span class="sr-only">0.00% covered (danger)</span>
+           <span class="visually-hidden">0.00% covered (danger)</span>
          </div>
        </div>
 </td>

tests/_files/Report/HTML/CoverageForClassWithAnonymousFunction/index.html

@@ -45,23 +45,23 @@
        <td class="success">Total</td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">8&nbsp;/&nbsp;8</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">1&nbsp;/&nbsp;1</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
@@ -73,23 +73,23 @@
        <td class="success"><img src="_icons/file-code.svg" class="octicon" /><a href="source_with_class_and_anonymous_function.php.html">source_with_class_and_anonymous_function.php</a></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">8&nbsp;/&nbsp;8</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">1&nbsp;/&nbsp;1</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>

tests/_files/Report/HTML/CoverageForClassWithAnonymousFunction/source_with_class_and_anonymous_function.php.html

@@ -45,15 +45,15 @@
        <td class="success">Total</td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">8&nbsp;/&nbsp;8</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
@@ -62,7 +62,7 @@
        <td class="success small"><abbr title="Change Risk Anti-Patterns (CRAP) Index">CRAP</abbr></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
@@ -74,15 +74,15 @@
        <td class="success">CoveredClassWithAnonymousFunctionInStaticMethod</td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">8&nbsp;/&nbsp;8</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
@@ -91,7 +91,7 @@
        <td class="success small">1</td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
@@ -103,15 +103,15 @@
        <td class="success">&nbsp;<a href="#5"><abbr title="runAnonymous()">runAnonymous</abbr></a></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>
        <td class="success small"><div align="right">100.00%</div></td>
        <td class="success small"><div align="right">8&nbsp;/&nbsp;8</div></td>
        <td class="success big">       <div class="progress">
          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" style="width: 100.00%">
-           <span class="sr-only">100.00% covered (success)</span>
+           <span class="visually-hidden">100.00% covered (success)</span>
          </div>
        </div>
 </td>