Skip to content

Feature/doc url demo site #62

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

Merged
firestar300 merged 4 commits into from
Jul 21, 2026
Merged

Feature/doc url demo site #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b3b0e76
feat: Add GitHub and documentation links to example pages
firestar300 Jul 21, 2026
b6644e7
feat: add favicon
firestar300 Jul 21, 2026
72cc7ee
fix: Enhance GitHub button styling and refine toggle accessibility se…
firestar300 Jul 21, 2026
8dcc6bd
feat: Initialize Link component for external GitHub buttons
firestar300 Jul 21, 2026
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
27 changes: 26 additions & 1 deletion examples/accessible-accordion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<meta charset="UTF-8">
<link rel="icon" href="../../src/favicon.png" type="image/png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Accordion</title>
Expand All @@ -22,6 +23,17 @@
<li><a href="../accessible-slider/index.html">Slider</a></li>
<li><a href="../accessible-tabs/index.html">Tabs</a></li>
<li><a href="../accessible-toggle/index.html">Toggle</a></li>
<li>
<a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
GitHub
</a>
</li>
</ul>
</nav>
</aside>
Expand All @@ -33,6 +45,17 @@ <h1>Accessible Accordion</h1>
collapsed independently, allowing users to focus on specific content while reducing visual clutter.
</p>

<a class="github-button"
href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-accordion/README.md"
target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Documentation
</a>

<div id="tab" class="tabs">
<div class="tabs__tablist" role="tablist" aria-label="Tabs component">
<button class="tabs__tab core-tab" role="tab" aria-selected="true"
Expand Down Expand Up @@ -826,14 +849,16 @@ <h3>
</div>

<script type="module">
import { Accordion, Tabs } from '../../be-a11y.ts'
import { Accordion, Link, Tabs } from '../../be-a11y.ts'
import '../../src/css/index.css'
import './style.css'

Tabs.init('#tab', {
tabListSelector: '.core-tab'
})

Link.init('a.github-button')

Accordion.preset = {
'#accordion-demo-1': {},
'#accordion-demo-2': { hasAnimation: true },
Expand Down
27 changes: 26 additions & 1 deletion examples/accessible-dialog/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<meta charset="UTF-8">
<link rel="icon" href="../../src/favicon.png" type="image/png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Modal</title>
Expand All @@ -22,6 +23,17 @@
<li><a href="../accessible-slider/index.html">Slider</a></li>
<li><a href="../accessible-tabs/index.html">Tabs</a></li>
<li><a href="../accessible-toggle/index.html">Toggle</a></li>
<li>
<a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
GitHub
</a>
</li>
</ul>
</nav>
</aside>
Expand All @@ -34,6 +46,17 @@ <h1>Accessible Dialog</h1>
mechanisms for dismissal, making it fully accessible to screen reader users and keyboard-only
navigation.</p>

<a class="github-button"
href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-dialog/README.md"
target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Documentation
</a>

<div id="tab" class="tabs">
<div class="tabs__tablist" role="tablist" aria-label="Tabs component">
<button class="tabs__tab core-tab" role="tab" aria-selected="true"
Expand Down Expand Up @@ -175,14 +198,16 @@ <h3 class="dialog__title">Add delivery address</h3>
</div>

<script type="module">
import { Dialog, Tabs } from '../../be-a11y.ts'
import { Dialog, Link, Tabs } from '../../be-a11y.ts'
import '../../src/css/index.css'
import './style.css'

Tabs.init('#tab', {
tabListSelector: '.core-tab'
})

Link.init('a.github-button')

Dialog.preset = {
'#demo-1': {
closeButtonSelector: '.dialog__close',
Expand Down
27 changes: 26 additions & 1 deletion examples/accessible-dropdown/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<meta charset="UTF-8">
<link rel="icon" href="../../src/favicon.png" type="image/png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Dropdown</title>
Expand All @@ -22,6 +23,17 @@
<li><a href="../accessible-slider/index.html">Slider</a></li>
<li><a href="../accessible-tabs/index.html">Tabs</a></li>
<li><a href="../accessible-toggle/index.html">Toggle</a></li>
<li>
<a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
GitHub
</a>
</li>
</ul>
</nav>
</aside>
Expand All @@ -32,6 +44,17 @@ <h1>Accessible Dropdown</h1>
screen reader support. Users can select from a list of options that appears when triggered, with
customizable behavior for selection, events, and responsive design.</p>

<a class="github-button"
href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-dropdown/README.md"
target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Documentation
</a>

<div id="tab" class="tabs">
<div class="tabs__tablist" role="tablist" aria-label="Tabs component">
<button class="tabs__tab core-tab" role="tab" aria-selected="true"
Expand Down Expand Up @@ -184,14 +207,16 @@ <h2>Dropdown closed on focus out</h2>
</div>

<script type="module">
import { Dropdown, Tabs } from '../../be-a11y.ts'
import { Dropdown, Link, Tabs } from '../../be-a11y.ts'
import '../../src/css/index.css'
import './style.css'

Tabs.init('#tab', {
tabListSelector: '.core-tab'
})

Link.init('a.github-button')

Dropdown.preset = {
'#dropdown-1': {},
'#dropdown-2': {
Expand Down
25 changes: 25 additions & 0 deletions examples/accessible-link/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<meta charset="UTF-8">
<link rel="icon" href="../../src/favicon.png" type="image/png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Link</title>
Expand All @@ -22,6 +23,17 @@
<li><a href="../accessible-slider/index.html">Slider</a></li>
<li><a href="../accessible-tabs/index.html">Tabs</a></li>
<li><a href="../accessible-toggle/index.html">Toggle</a></li>
<li>
<a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
GitHub
</a>
</li>
</ul>
</nav>
</aside>
Expand All @@ -33,6 +45,17 @@ <h1>Accessible new tab link</h1>
is particularly useful for screen reader users, as it provides them with additional information
about the link's behavior.</p>

<a class="github-button"
href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-link/README.md" target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Documentation
</a>

<div id="tab" class="tabs">
<div class="tabs__tablist" role="tablist" aria-label="Tabs component">
<button class="tabs__tab core-tab" role="tab" aria-selected="true"
Expand Down Expand Up @@ -87,6 +110,8 @@ <h2>With a custom icon</h2>
tabListSelector: '.core-tab'
})

Link.init('a.github-button')

Link.preset = {
'#link-1': {},
'#link-2': {
Expand Down
27 changes: 26 additions & 1 deletion examples/accessible-modal/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<head>
<meta charset="UTF-8">
<link rel="icon" href="../../src/favicon.png" type="image/png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Modal</title>
Expand All @@ -22,6 +23,17 @@
<li><a href="../accessible-slider/index.html">Slider</a></li>
<li><a href="../accessible-tabs/index.html">Tabs</a></li>
<li><a href="../accessible-toggle/index.html">Toggle</a></li>
<li>
<a class="github-button" href="https://github.com/BeAPI/be-a11y" target="_blank"
rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
GitHub
</a>
</li>
</ul>
</nav>
</aside>
Expand All @@ -34,6 +46,17 @@ <h1>Accessible Modal</h1>
mechanisms for dismissal, making it fully accessible to screen reader users and keyboard-only
navigation.</p>

<a class="github-button"
href="https://github.com/BeAPI/be-a11y/blob/main/examples/accessible-modal/README.md"
target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20"
fill="currentColor" aria-hidden="true" focusable="false">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Documentation
</a>

<div id="tab" class="tabs">
<div class="tabs__tablist" role="tablist" aria-label="Tabs component">
<button class="tabs__tab core-tab" role="tab" aria-selected="true"
Expand Down Expand Up @@ -359,14 +382,16 @@ <h4 class="modal__title">Add delivery address</h4>
</div>

<script type="module">
import { Modal, Tabs } from '../../be-a11y.ts'
import { Link, Modal, Tabs } from '../../be-a11y.ts'
import '../../src/css/index.css'
import './style.css'

Tabs.init('#tab', {
tabListSelector: '.core-tab'
})

Link.init('a.github-button')

Modal.preset = {
'#demo-1': {
closeButtonSelector: '.modal__close',
Expand Down
Loading
Loading