Skip to content

Commit

Permalink
docs(all): removed focusable attribute from docs and stories (#2268)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArtBlue
ArtBlue authored Feb 14, 2024
1 parent d4b9949 commit 0129a70
Show file tree
Hide file tree
Showing 236 changed files with 1,907 additions and 1,907 deletions.
4 changes: 2 additions & 2 deletions docs/_includes/avatar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ <h3 id="avatar-signed-out">Signed-Out Avatar</h3>
<div class="demo">
<div class="demo__inner">
<div class="avatar" role="img" aria-label="Profile picture - Signed out">
<svg class="icon" focusable="false" hidden="true">
<svg class="icon" hidden="true">
{% include symbol.html name="avatar-signed-out" %}
</svg>
</div>
Expand All @@ -115,7 +115,7 @@ <h3 id="avatar-signed-out">Signed-Out Avatar</h3>

{% highlight html %}
<div class="avatar" role="img" aria-label="Profile picture - Signed out">
<svg class="icon" focusable="false" aria-hidden="true">
<svg class="icon" aria-hidden="true">
<use href="#icon-avatar-signed-out"></use>
</svg>
</div>
Expand Down
36 changes: 18 additions & 18 deletions docs/_includes/breadcrumbs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,19 @@ <h2 id="breadcrumbs-heading-1" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/">ebay</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-right-12" %}
</svg>
</li>
<li>
<a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-right-12" %}
</svg>
</li>
<li>
<a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-right-12" %}
</svg>
</li>
Expand All @@ -39,19 +39,19 @@ <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/">ebay</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12"></use>
</svg>
</li>
<li>
<a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12"></use>
</svg>
</li>
<li>
<a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12"></use>
</svg>
</li>
Expand All @@ -71,13 +71,13 @@ <h2 id="breadcrumbs-heading-2" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/">ebay</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-right-12" %}
</svg>
</li>
<li>
<a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-right-12" %}
</svg>
</li>
Expand All @@ -94,13 +94,13 @@ <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/">ebay</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12"></use>
</svg>
</li>
<li>
<a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12"></use>
</svg>
</li>
Expand All @@ -126,14 +126,14 @@ <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/">ebay</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-right-12" %}
</svg>
</li>
<li>
<span class="fake-menu-button">
<button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu" type="button">
<svg aria-hidden="true" class="icon icon--overflow-horizontal-16" focusable="false">
<svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
{% include symbol.html name="overflow-horizontal-16" %}
</svg>
</button>
Expand All @@ -156,14 +156,14 @@ <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
</ul>
</span>

<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-right-12" %}
</svg>
</li>

<li>
<a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2">Smart Watch Band Long Band Text Type 2</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-right-12" %}
</svg>
</li>
Expand All @@ -178,14 +178,14 @@ <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
<ul>
<li>
<a href="https://www.ebay.com/">ebay</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12"></use>
</svg>
</li>
<li>
<span class="fake-menu-button">
<button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu" type="button">
<svg aria-hidden="true" class="icon icon--overflow-horizontal-16" focusable="false">
<svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
<use href="#icon-overflow-horizontal-16"></use>
</svg>
</button>
Expand All @@ -207,13 +207,13 @@ <h2 id="breadcrumbs-heading" class="clipped">You are here</h2>
</li>
</ul>
</span>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12"></use>
</svg>
</li>
<li>
<a href="https://www.ebay.com/b/Smart-Watch-Bands/182068/bn_16565906/Some-Random-Watch-Pand2">Smart Watch Band Long Band Text Type 2</a>
<svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-right-12"></use>
</svg>
</li>
Expand Down
40 changes: 20 additions & 20 deletions docs/_includes/button.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ <h3 id="button-icon-adjacent">Adjacent Icon Button</h3>
<div class="demo__inner">
<button class="btn btn--primary">
<span class="btn__cell">
<svg aria-hidden="true" class="icon icon--menu-24" focusable="false" height="16" width="16">
<svg aria-hidden="true" class="icon icon--menu-24" height="16" width="16">
{% include symbol.html name="menu-24" %}
</svg>
<span>Button</span>
Expand All @@ -191,7 +191,7 @@ <h3 id="button-icon-adjacent">Adjacent Icon Button</h3>
<button class="btn btn--primary">
<span class="btn__cell">
<span>Button</span>
<svg aria-hidden="true" class="icon icon--menu-24" focusable="false" height="16" width="16">
<svg aria-hidden="true" class="icon icon--menu-24" height="16" width="16">
{% include symbol.html name="menu-24" %}
</svg>
</span>
Expand All @@ -202,7 +202,7 @@ <h3 id="button-icon-adjacent">Adjacent Icon Button</h3>
{% highlight html %}
<button class="btn btn--primary">
<span class="btn__cell">
<svg aria-hidden="true" class="icon icon--menu-24" focusable="false" height="16" width="16">
<svg aria-hidden="true" class="icon icon--menu-24" height="16" width="16">
<use href="#icon-menu-24"></use>
</svg>
<span>Button</span>
Expand All @@ -211,7 +211,7 @@ <h3 id="button-icon-adjacent">Adjacent Icon Button</h3>
<button class="btn btn--primary">
<span class="btn__cell">
<span>Button</span>
<svg aria-hidden="true" class="icon icon--menu-24" focusable="false" height="16" width="16">
<svg aria-hidden="true" class="icon icon--menu-24" height="16" width="16">
<use href="#icon-menu-24"></use>
</svg>
</span>
Expand All @@ -226,7 +226,7 @@ <h3 id="button-busy">Busy State for Button</h3>
<button class="btn btn--primary" aria-label="Busy...">
<span class="btn__cell">
<span class="progress-spinner">
<svg aria-hidden="true" class="icon icon--spinner-24" focusable="false" height="24" width="24">
<svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
{% include symbol.html name="spinner-24" %}
</svg>
</span>
Expand All @@ -239,7 +239,7 @@ <h3 id="button-busy">Busy State for Button</h3>
<button class="btn btn--primary" aria-label="Busy...">
<span class="btn__cell">
<span class="progress-spinner">
<svg aria-hidden="true" class="icon icon--spinner-24" focusable="false" height="24" width="24">
<svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
<use href="#icon-spinner-24"></use>
</svg>
</span>
Expand Down Expand Up @@ -268,7 +268,7 @@ <h3 id="button-layout">Flexible Button</h3>
<span>Select</span>
<span style="display: inline-flex;">
<span>Any</span>
<svg aria-hidden="true" class="icon icon--chevron-down-16" focusable="false" width="8" height="8">
<svg aria-hidden="true" class="icon icon--chevron-down-16" width="8" height="8">
{% include symbol.html name="chevron-down-16" %}
</svg>
</span>
Expand All @@ -283,7 +283,7 @@ <h3 id="button-layout">Flexible Button</h3>
<span>Select</span>
<span style="display: inline-flex;">
<span>Any</span>
<svg aria-hidden="true" class="icon icon--chevron-down-16" focusable="false" width="8" height="8">
<svg aria-hidden="true" class="icon icon--chevron-down-16" width="8" height="8">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
Expand Down Expand Up @@ -365,7 +365,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<button class="btn btn--primary" aria-expanded="false" type="button">
<span class="btn__cell">
<span class="btn__text">Button</span>
<svg class="icon icon--chevron-down-16" focusable="false" height="10" width="14" aria-hidden="true">
<svg class="icon icon--chevron-down-16" height="10" width="14" aria-hidden="true">
{% include symbol.html name="chevron-down-16" %}
</svg>
</span>
Expand All @@ -377,7 +377,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<button class="btn btn--primary" aria-expanded="false" type="button">
<span class="btn__cell">
<span class="btn__text">Button</span>
<svg class="icon icon--chevron-down-16" focusable="false" height="10" width="14" aria-hidden="true">
<svg class="icon icon--chevron-down-16" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
Expand All @@ -391,7 +391,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<button class="btn btn--borderless" type="button">
<span class="btn__cell">
<span class="btn__text">Button</span>
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
{% include symbol.html name="chevron-down-12" %}
</svg>
</span>
Expand All @@ -403,7 +403,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<button class="btn btn--borderless" type="button">
<span class="btn__cell">
<span class="btn__text">Button</span>
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Expand All @@ -416,7 +416,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<button class="btn btn--form" aria-expanded="false" type="button">
<span class="btn__cell">
<span class="btn__text">Button</span>
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
{% include symbol.html name="chevron-down-12" %}
</svg>
</span>
Expand All @@ -428,7 +428,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<button class="btn btn--form" aria-expanded="false" type="button">
<span class="btn__cell">
<span class="btn__text">Button</span>
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Expand All @@ -440,7 +440,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<div class="demo">
<div class="demo__inner">
<button class="btn btn--form btn--slim expand-btn-example" type="button" aria-expanded="false" aria-label="Expand/Collapse">
<svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-down-12" %}
</svg>
</button>
Expand All @@ -449,7 +449,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>

{% highlight html %}
<button class="btn btn--form btn--slim" type="button" aria-expanded="false" aria-label="Expand/Collapse">
<svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</button>
Expand All @@ -463,7 +463,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<span class="btn__cell">
<span class="btn__floating-label">Color</span>
<span class="btn__text">Blue</span>
<svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-down-12" %}
</svg>
</span>
Expand All @@ -476,7 +476,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<span class="btn__cell">
<span class="btn__floating-label">Color</span>
<span class="btn__text">Blue</span>
<svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Expand All @@ -491,7 +491,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<span class="btn__cell">
<span class="btn__floating-label btn__floating-label--inline">Color</span>
<span class="btn__text"></span>
<svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
{% include symbol.html name="chevron-down-12" %}
</svg>
</span>
Expand All @@ -504,7 +504,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
<span class="btn__cell">
<span class="btn__floating-label btn__floating-label--inline">Color</span>
<span class="btn__text"></span>
<svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
<svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
Expand Down
Loading

0 comments on commit 0129a70

Please sign in to comment.