Skip to content

Commit

Permalink
Add Sample Widgets for later Modification
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbdhilahiRWabwire
AbdhilahiRWabwire committed Dec 24, 2024
1 parent 6427f6a commit 4a3c4b7
Show file tree
Hide file tree
Showing 31 changed files with 5,136 additions and 1 deletion.
2 changes: 1 addition & 1 deletion lib/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="theme/theme.css">
<meta charset="utf-8" />
<meta name="main-index" content="width=device-width" />
</head>
Expand Down
112 changes: 112 additions & 0 deletions lib/markup/accordian.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html>

<html lang="en">
<div id="accordionGroup" class="accordion">
<h3>
<button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="sect1" id="accordion1id">
<span class="accordion-title">
Personal Information
<span class="accordion-icon"></span>
</span>
</button>
</h3>
<div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
<div>
<fieldset>
<p>
<label for="cufc1">Name<span aria-hidden="true">*</span>:</label>
<input type="text" value="" name="Name" id="cufc1" class="required" aria-required="true">
</p>
<p>
<label for="cufc2">Email<span aria-hidden="true">*</span>:</label>
<input type="text" value="" name="Email" id="cufc2" aria-required="true">
</p>
<p>
<label for="cufc3">Phone:</label>
<input type="text" value="" name="Phone" id="cufc3">
</p>
<p>
<label for="cufc4">Extension:</label>
<input type="text" value="" name="Ext" id="cufc4">
</p>
<p>
<label for="cufc5">Country:</label>
<input type="text" value="" name="Country" id="cufc5">
</p>
<p>
<label for="cufc6">City/Province:</label>
<input type="text" value="" name="City_Province" id="cufc6">
</p>
</fieldset>
</div>
</div>
<h3>
<button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect2" id="accordion2id">
<span class="accordion-title">
Billing Address
<span class="accordion-icon"></span>
</span>
</button>
</h3>
<div id="sect2" role="region" aria-labelledby="accordion2id" class="accordion-panel" hidden="">
<div>
<fieldset>
<p>
<label for="b-add1">Address 1:</label>
<input type="text" name="b-add1" id="b-add1">
</p>
<p>
<label for="b-add2">Address 2:</label>
<input type="text" name="b-add2" id="b-add2">
</p>
<p>
<label for="b-city">City:</label>
<input type="text" name="b-city" id="b-city">
</p>
<p>
<label for="b-state">State:</label>
<input type="text" name="b-state" id="b-state">
</p>
<p>
<label for="b-zip">Zip Code:</label>
<input type="text" name="b-zip" id="b-zip">
</p>
</fieldset>
</div>
</div>
<h3>
<button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect3" id="accordion3id">
<span class="accordion-title">
Shipping Address
<span class="accordion-icon"></span>
</span>
</button>
</h3>
<div id="sect3" role="region" aria-labelledby="accordion3id" class="accordion-panel" hidden="">
<div>
<fieldset>
<p>
<label for="m-add1">Address 1:</label>
<input type="text" name="m-add1" id="m-add1">
</p>
<p>
<label for="m-add2">Address 2:</label>
<input type="text" name="m-add2" id="m-add2">
</p>
<p>
<label for="m-city">City:</label>
<input type="text" name="m-city" id="m-city">
</p>
<p>
<label for="m-state">State:</label>
<input type="text" name="m-state" id="m-state">
</p>
<p>
<label for="m-zip">Zip Code:</label>
<input type="text" name="m-zip" id="m-zip">
</p>
</fieldset>
</div>
</div>
</div>
</html>
29 changes: 29 additions & 0 deletions lib/markup/alert-dialogue.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>

<html lang="en">
<label for="notes">Notes</label>
<textarea class="notes" name="notes" id="notes" rows="7">This is an example text box, which unsurprisingly contains text. The user is given the option to save this text - which triggers a basic alert - or to discard the text - which triggers an alert dialog that prompts the user for confirmation.</textarea>
<div class="visually-hidden" id="notes_save_status" role="alert"></div>
<button type="button" id="notes_save">
Save
<svg class="icon spinner" viewBox="0 0 32 32" aria-hidden="true">
<path d="M16 32c-4.274 0-8.292-1.664-11.314-4.686s-4.686-7.040-4.686-11.314c0-3.026 0.849-5.973 2.456-8.522 1.563-2.478 3.771-4.48 6.386-5.791l1.344 2.682c-2.126 1.065-3.922 2.693-5.192 4.708-1.305 2.069-1.994 4.462-1.994 6.922 0 7.168 5.832 13 13 13s13-5.832 13-13c0-2.459-0.69-4.853-1.994-6.922-1.271-2.015-3.066-3.643-5.192-4.708l1.344-2.682c2.615 1.31 4.824 3.313 6.386 5.791 1.607 2.549 2.456 5.495 2.456 8.522 0 4.274-1.664 8.292-4.686 11.314s-7.040 4.686-11.314 4.686z"></path>
</svg>
<svg class="icon check" viewBox="0 0 32 32" aria-hidden="true">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
</svg>
</button>
<button type="button" data-textbox="notes" id="notes_discard" onclick="openAlertDialog('alertdialog', this)">Discard</button>
<div class="dialog-backdrop no-scroll">
<div id="alertdialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog_label" aria-describedby="dialog_desc" class="hidden">
<h2 id="dialog_label" class="dialog_label">Confirmation</h2>
<div id="dialog_desc" class="dialog_desc">
<p>Are you sure you want to discard all of your notes?</p>
</div>
<div class="dialog_form_actions">
<button type="button" id="notes_cancel" onclick="closeDialog(this)">No</button>
<button type="button" id="notes_confirm" onclick="discardInput()">Yes</button>
</div>
</div>
</div>
</html>
12 changes: 12 additions & 0 deletions lib/markup/alert.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>

<html lang="en">
<button type="button" id="alert-trigger">Trigger Alert</button>

<div id="example" role="alert"></div>


<script type="text/template" id="alert-template">
<p>Hello</p>
</script>
</html>
20 changes: 20 additions & 0 deletions lib/markup/breadcrumb.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>

<html lang="en">
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="../../../..">WAI-ARIA Authoring Practices Guide (APG)</a>
</li>
<li>
<a href="../../../">Patterns</a>
</li>
<li>
<a href="../../">Breadcrumb Pattern</a>
</li>
<li>
<a href="" aria-current="page">Breadcrumb Example</a>
</li>
</ol>
</nav>
</html>
30 changes: 30 additions & 0 deletions lib/markup/button.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>

<html lang="en">
<p>This <q>Print</q> action button uses a <code>div</code> element.</p>
<div tabindex="0" role="button" id="action">Print Page</div>

<p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
<a tabindex="0" role="button" id="toggle" aria-pressed="false">
Mute
<svg aria-hidden="true" focusable="false">
<use xlink:href="#icon-sound"></use>
</svg>
</a>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none" id="svg_definitions">
<defs>
<symbol id="icon-mute" viewBox="0 0 75 75">
<polygon id="polygon1" points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769" style="stroke: currentcolor; stroke-width: 5; stroke-linejoin: round; fill: currentcolor"></polygon>
<path id="path3003" d="M 48.651772,50.269646 69.395223,25.971024" style="fill: none; stroke: currentcolor; stroke-width: 5; stroke-linecap: round"></path>
<path id="path3003-1" d="M 69.395223,50.269646 48.651772,25.971024" style="fill: none; stroke: currentcolor; stroke-width: 5; stroke-linecap: round"></path>
</symbol>
<symbol id="icon-sound" viewBox="0 0 75 75">
<polygon points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769" style="stroke: currentcolor; stroke-width: 5; stroke-linejoin: round; fill: currentcolor"></polygon>
<path d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577" style="fill: none; stroke: currentcolor; stroke-width: 5; stroke-linecap: round"></path>
<path d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076" style="fill: none; stroke: currentcolor; stroke-width: 5; stroke-linecap: round"></path>
<path d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01" style="fill: none; stroke: currentcolor; stroke-width: 5; stroke-linecap: round"></path>
</symbol>
</defs>
</svg>
</html>
160 changes: 160 additions & 0 deletions lib/markup/carousel.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!DOCTYPE html>

<html lang="en">
<section id="myCarousel" class="carousel" aria-roledescription="carousel" aria-label="Highlighted television shows">
<div class="carousel-inner">
<div class="controls">
<button type="button" class="rotation pause" aria-label="Stop automatic slide show">
<svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24"></rect>
<rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20"></rect>

<polygon class="pause" points="17 8 17 20"></polygon>

<polygon class="pause" points="24 8 24 20"></polygon>

<polygon class="play" points="15 8 15 20 27 14"></polygon>
</svg>
</button>

<button type="button" class="previous" aria-controls="myCarousel-items" aria-label="Previous Slide">
<svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24"></rect>
<rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20"></rect>
<polygon points="9 14 21 8 21 11 33 11 33 17 21 17 21 20"></polygon>
</svg>
</button>

<button type="button" class="next" aria-controls="myCarousel-items" aria-label="Next Slide">
<svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24"></rect>
<rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20"></rect>
<polygon points="9 11 21 11 21 8 33 14 21 20 21 17 9 17"></polygon>
</svg>
</button>
</div>

<div id="myCarousel-items" class="carousel-items" aria-live="off">
<div class="carousel-item active" role="group" aria-roledescription="slide" aria-label="1 of 6">
<div class="carousel-image">
<a href="#">
<img src="../../../../../../content-images/wai-aria-practices/patterns/carousel/examples/images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam">
</a>
</div>

<div class="carousel-caption">
<h3>
<a href="#" id="carousel-label-1"> Dynamic Europe: Amsterdam, Prague, Berlin </a>
</h3>

<div class="hidden-xs hidden-sm">
<p><span class="contrast">7 pm Tuesday, March 3, on TV</span></p>
</div>
</div>

</div>


<div class="carousel-item" role="group" aria-roledescription="slide" aria-label="2 of 6">
<div class="carousel-image">
<a href="#">
<img src="../../../../../../content-images/wai-aria-practices/patterns/carousel/examples/images/lands-endslide__800x600.jpg" alt="Land's End in Cornwall">
</a>
</div>

<div class="carousel-caption">
<h3>
<a href="#" id="carousel-label-2"> Travel to Southwest England and Paris </a>
</h3>

<div>
<p><span class="contrast">Sept. 14 to Sept. 24 or 27</span></p>
</div>
</div>

</div>


<div class="carousel-item" role="group" aria-roledescription="slide" aria-label="3 of 6">
<div class="carousel-image">
<a href="#">
<img src="../../../../../../content-images/wai-aria-practices/patterns/carousel/examples/images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer.">
</a>
</div>

<div class="carousel-caption">
<h3>
<a href="#" id="carousel-label-3"> Great Children's Programming on Public TV </a>
</h3>

<div></div>
</div>

</div>


<div class="carousel-item" role="group" aria-roledescription="slide" aria-label="4 of 6">
<div class="carousel-image">
<a href="#">
<img src="../../../../../../content-images/wai-aria-practices/patterns/carousel/examples/images/foyleswarslide__800x600.jpg" alt="A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.">
</a>
</div>

<div class="carousel-caption">
<h3>
<a href="#" id="carousel-label-4"> Foyle’s War Revisited </a>
</h3>

<div>
<p><span class="contrast">8 pm Sunday, March 8, on TV: Sneak peek at the final season.</span></p>
</div>
</div>

</div>


<div class="carousel-item" role="group" aria-roledescription="slide" aria-label="5 of 6">
<div class="carousel-image">
<a href="#">
<img src="../../../../../../content-images/wai-aria-practices/patterns/carousel/examples/images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel.">
</a>
</div>

<div class="carousel-caption">
<h3>
<a href="#" id="carousel-label-5"> Great Britain Vote: 7 pm Sat. </a>
</h3>

<div></div>
</div>

</div>


<div class="carousel-item" role="group" aria-roledescription="slide" aria-label="6 of 6">
<div class="carousel-image">
<a href="#">
<img src="../../../../../../content-images/wai-aria-practices/patterns/carousel/examples/images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set">
</a>
</div>

<div class="carousel-caption">
<h3>
<a href="#" id="carousel-label-6"> Mid-American Gardener: Thursdays at 7 pm </a>
</h3>

<div class="hidden-xs hidden-sm">
<p><span class="contrast">Watch the latest episodes.</span></p>
</div>
</div>

</div>

</div>
</div>

</section>


<div class="col-sm-1"></div>
</html>
Loading

0 comments on commit 4a3c4b7

Please sign in to comment.