npm - fao-design-system - Versions diffs - 2.36.0 → 2.36.1 - Mend

fao-design-system 2.36.0 → 2.36.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -8,6 +8,12 @@
 ---
+## 2.36.1 (2024-10-24)
+- Fix NPM packages release
+---
 ## 2.36.0 (2024-10-24)
 - Add RTL support for Pashto ("sf") and Persian ("fa")

package/dist/accessibility/getting-started/creating-websites/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 </style>
 <link rel="stylesheet" href="/_astro/creating-websites.CXGGOjV5.css">
 <style>.primary-heading--ds[data-astro-cid-o35cc47s]{border-bottom:2px solid var(--line);margin-bottom:3rem;padding-bottom:1rem;padding-top:1rem}
-</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                 <i class="bi bi-search m-0 me-xl-2"></i>
                 <span class="d-none d-xl-inline">Search</span>
             </button> --> </div> </div>  </header>  <div class="app-layout"> <aside id="" class="app-sidebar collapse collapse-horizontal shadow-sm show" data-astro-cid-z6zqkn4v> <div class="offcanvas-lg offcanvas-start" tab-index="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v> <div class="offcanvas-header border-bottom" data-astro-cid-z6zqkn4v> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v>Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-astro-cid-z6zqkn4v></button> </div> <div class="offcanvas-body" data-astro-cid-z6zqkn4v> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation" data-astro-cid-z6zqkn4v> <ul class="bd-links-nav list-unstyled mb-0 py-4 pb-lg-2 px-lg-3" data-astro-cid-z6zqkn4v> <li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-book-half me-1" data-astro-cid-z6zqkn4v></i> Getting Started </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started" data-astro-cid-z6zqkn4v>Overview</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/creating-websites" data-astro-cid-z6zqkn4v>Creating Accessible Websites</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/reading" data-astro-cid-z6zqkn4v>Recommended Reading</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/resources" data-astro-cid-z6zqkn4v>Resources</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/tools" data-astro-cid-z6zqkn4v>Tools</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li> </ul> </nav> </div> </div> </aside>  <main class="app-main "> <div class="container "> <div class="row"> <div class="col-lg-9"> <h1 class="primary-heading primary-heading--ds " data-astro-cid-o35cc47s>Creating Accessible Websites</h1>  <p class="lead mb-5">Empowering everyone: Learn how to build websites that are accessible, inclusive, and user-friendly for all.</p>  <section class="mb-4 toc-section" data-name="Overview"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Overview</h2>  <p>The principles and details of compliance in practice are laid out in the World Wide Web Consortium's <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">WCAG Guidelines</a>. These guidelines represent a gold standard, and several countries have introduced digital accessibility legislation which refers to these guidelines.</p> <p>The components and styles of FAO's design system are built upon the <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> web framework and so consequently inherits several best practices which have been refined over time.</p> <p>The Design System covers definitions relating to styles, components and content; were relevant for each definition, you will find notes on improving accessibility.</p>  </section>  <div class="--doc-footer mt-5 mb-4"><hr><p class="text-right">©FAO 2024</p></div> </div> <div class="col-lg-3"> <div class="toc sticky-top w-100"> <strong class="toc-title d-block h6 my-2 text-uppercase">On this page</strong> <ul id="tocItems" class="toc-items list-unstyled"></ul>  </div> </div> </div> </div> </main> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1C5XEO" component-url="/_astro/Search.DTIRBvbB.js" component-export="default" renderer-url="/_astro/client.CWY0IrnN.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Search&quot;,&quot;value&quot;:true}" await-children=""><div class="_modal-search modal fade svelte-1aq6ttg" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header svelte-1aq6ttg"><i class="bi bi-search svelte-1aq6ttg"></i> <input type="text" class="form-control svelte-1aq6ttg" placeholder="Search..." id="searchInput" value=""> <i class="bi bi-x-lg _modal-search__close svelte-1aq6ttg" data-bs-dismiss="modal" aria-label="Close"></i></div> <div class="modal-body _search-results svelte-1aq6ttg"> </div> <div class="modal-footer svelte-1aq6ttg" data-svelte-h="svelte-jf29eh"><div><kbd class="DocSearch-Commands-Key svelte-1aq6ttg"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd> <span class="small">to close</span></div></div></div></div> </div><!--astro:end--></astro-island>  </body> </html>

package/dist/accessibility/getting-started/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 </style>
 <link rel="stylesheet" href="/_astro/creating-websites.CXGGOjV5.css">
 <style>.primary-heading--ds[data-astro-cid-o35cc47s]{border-bottom:2px solid var(--line);margin-bottom:3rem;padding-bottom:1rem;padding-top:1rem}
-</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                 <i class="bi bi-search m-0 me-xl-2"></i>
                 <span class="d-none d-xl-inline">Search</span>
             </button> --> </div> </div>  </header>  <div class="app-layout"> <aside id="" class="app-sidebar collapse collapse-horizontal shadow-sm show" data-astro-cid-z6zqkn4v> <div class="offcanvas-lg offcanvas-start" tab-index="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v> <div class="offcanvas-header border-bottom" data-astro-cid-z6zqkn4v> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v>Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-astro-cid-z6zqkn4v></button> </div> <div class="offcanvas-body" data-astro-cid-z6zqkn4v> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation" data-astro-cid-z6zqkn4v> <ul class="bd-links-nav list-unstyled mb-0 py-4 pb-lg-2 px-lg-3" data-astro-cid-z6zqkn4v> <li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-book-half me-1" data-astro-cid-z6zqkn4v></i> Getting Started </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started" data-astro-cid-z6zqkn4v>Overview</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/creating-websites" data-astro-cid-z6zqkn4v>Creating Accessible Websites</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/reading" data-astro-cid-z6zqkn4v>Recommended Reading</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/resources" data-astro-cid-z6zqkn4v>Resources</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/tools" data-astro-cid-z6zqkn4v>Tools</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li> </ul> </nav> </div> </div> </aside>  <main class="app-main "> <div class="container "> <div class="row"> <div class="col-lg-9"> <h1 class="primary-heading primary-heading--ds " data-astro-cid-o35cc47s>Introduction</h1>  <p class="lead mb-5">Accessibility guidelines for creating inclusive and accessible digital experiences.</p>  <section class="mb-4 toc-section" data-name="Overview"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Overview</h2>  <p>Web accessibility is the practice of designing and developing websites and web applications that can be used by everyone, regardless of their abilities or disabilities. It ensures that people with visual, auditory, motor, or cognitive impairments can perceive, understand, navigate, and interact with web content effectively. Key aspects of web accessibility include:</p> <ul> <li>Providing text alternatives for non-text content</li> <li>Ensuring proper color contrast and readability</li> <li>Making all functionality available from a keyboard</li> <li>Offering clear navigation and structure</li> <li>Creating content that can be presented in different ways</li> <li>Ensuring compatibility with assistive technologies</li> </ul> <p>By implementing accessibility best practices, we create a more inclusive web that benefits all users, improves SEO, and often leads to better overall user experiences.</p>  </section>  <div class="--doc-footer mt-5 mb-4"><hr><p class="text-right">©FAO 2024</p></div> </div> <div class="col-lg-3"> <div class="toc sticky-top w-100"> <strong class="toc-title d-block h6 my-2 text-uppercase">On this page</strong> <ul id="tocItems" class="toc-items list-unstyled"></ul>  </div> </div> </div> </div> </main> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1C5XEO" component-url="/_astro/Search.DTIRBvbB.js" component-export="default" renderer-url="/_astro/client.CWY0IrnN.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Search&quot;,&quot;value&quot;:true}" await-children=""><div class="_modal-search modal fade svelte-1aq6ttg" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header svelte-1aq6ttg"><i class="bi bi-search svelte-1aq6ttg"></i> <input type="text" class="form-control svelte-1aq6ttg" placeholder="Search..." id="searchInput" value=""> <i class="bi bi-x-lg _modal-search__close svelte-1aq6ttg" data-bs-dismiss="modal" aria-label="Close"></i></div> <div class="modal-body _search-results svelte-1aq6ttg"> </div> <div class="modal-footer svelte-1aq6ttg" data-svelte-h="svelte-jf29eh"><div><kbd class="DocSearch-Commands-Key svelte-1aq6ttg"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd> <span class="small">to close</span></div></div></div></div> </div><!--astro:end--></astro-island>  </body> </html>

package/dist/accessibility/getting-started/reading/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 </style>
 <link rel="stylesheet" href="/_astro/creating-websites.CXGGOjV5.css">
 <style>.primary-heading--ds[data-astro-cid-o35cc47s]{border-bottom:2px solid var(--line);margin-bottom:3rem;padding-bottom:1rem;padding-top:1rem}
-</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                 <i class="bi bi-search m-0 me-xl-2"></i>
                 <span class="d-none d-xl-inline">Search</span>
             </button> --> </div> </div>  </header>  <div class="app-layout"> <aside id="" class="app-sidebar collapse collapse-horizontal shadow-sm show" data-astro-cid-z6zqkn4v> <div class="offcanvas-lg offcanvas-start" tab-index="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v> <div class="offcanvas-header border-bottom" data-astro-cid-z6zqkn4v> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v>Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-astro-cid-z6zqkn4v></button> </div> <div class="offcanvas-body" data-astro-cid-z6zqkn4v> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation" data-astro-cid-z6zqkn4v> <ul class="bd-links-nav list-unstyled mb-0 py-4 pb-lg-2 px-lg-3" data-astro-cid-z6zqkn4v> <li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-book-half me-1" data-astro-cid-z6zqkn4v></i> Getting Started </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started" data-astro-cid-z6zqkn4v>Overview</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/creating-websites" data-astro-cid-z6zqkn4v>Creating Accessible Websites</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/reading" data-astro-cid-z6zqkn4v>Recommended Reading</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/resources" data-astro-cid-z6zqkn4v>Resources</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/tools" data-astro-cid-z6zqkn4v>Tools</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li> </ul> </nav> </div> </div> </aside>  <main class="app-main "> <div class="container "> <div class="row"> <div class="col-lg-9"> <h1 class="primary-heading primary-heading--ds " data-astro-cid-o35cc47s>Recommended Reading</h1>  <p class="lead mb-5">Expand your knowledge on accessibility with these essential resources</p>  <section class="mb-4 toc-section" data-name="Readings"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Readings</h2>  <ul class="list-unstyled"> <li class="mb-2"> <a href="https://intranet.fao.org/fileadmin/user_upload/FAO_Communications/documents/FAO_Comms_Guidelines_for_Disability_Inclusion.pdf" title="FAO Communication Guidelines for Disability Inclusion" class="link-icon " target="_blank">   <i class="bi bi-globe"></i> <span>FAO Communication Guidelines for Disability Inclusion</span>    </a> </li> <li class="mb-2"> <a href="https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf" title="UK Government Accessibility Poster Set" class="link-icon " target="_blank">   <i class="bi bi-globe"></i> <span>UK Government Accessibility Poster Set</span>    </a> </li> <li class="mb-2"> <a href="https://www.un.org/en/webaccessibility/index.shtml" title="UN Accessibility Guidelines for UN Websites" class="link-icon " target="_blank">   <i class="bi bi-globe"></i> <span>UN Accessibility Guidelines for UN Websites</span>    </a> </li> <li class="mb-2"> <a href="https://web.dev/articles/accessibility" title="Google Web Fundamentals on Accessibility" class="link-icon " target="_blank">   <i class="bi bi-globe"></i> <span>Google Web Fundamentals on Accessibility</span>    </a> </li> </ul>  </section>  <div class="--doc-footer mt-5 mb-4"><hr><p class="text-right">©FAO 2024</p></div> </div> <div class="col-lg-3"> <div class="toc sticky-top w-100"> <strong class="toc-title d-block h6 my-2 text-uppercase">On this page</strong> <ul id="tocItems" class="toc-items list-unstyled"></ul>  </div> </div> </div> </div> </main> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1C5XEO" component-url="/_astro/Search.DTIRBvbB.js" component-export="default" renderer-url="/_astro/client.CWY0IrnN.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Search&quot;,&quot;value&quot;:true}" await-children=""><div class="_modal-search modal fade svelte-1aq6ttg" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header svelte-1aq6ttg"><i class="bi bi-search svelte-1aq6ttg"></i> <input type="text" class="form-control svelte-1aq6ttg" placeholder="Search..." id="searchInput" value=""> <i class="bi bi-x-lg _modal-search__close svelte-1aq6ttg" data-bs-dismiss="modal" aria-label="Close"></i></div> <div class="modal-body _search-results svelte-1aq6ttg"> </div> <div class="modal-footer svelte-1aq6ttg" data-svelte-h="svelte-jf29eh"><div><kbd class="DocSearch-Commands-Key svelte-1aq6ttg"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd> <span class="small">to close</span></div></div></div></div> </div><!--astro:end--></astro-island>  </body> </html>

package/dist/accessibility/getting-started/resources/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 </style>
 <link rel="stylesheet" href="/_astro/creating-websites.CXGGOjV5.css">
 <style>.primary-heading--ds[data-astro-cid-o35cc47s]{border-bottom:2px solid var(--line);margin-bottom:3rem;padding-bottom:1rem;padding-top:1rem}
-</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                 <i class="bi bi-search m-0 me-xl-2"></i>
                 <span class="d-none d-xl-inline">Search</span>
             </button> --> </div> </div>  </header>  <div class="app-layout"> <aside id="" class="app-sidebar collapse collapse-horizontal shadow-sm show" data-astro-cid-z6zqkn4v> <div class="offcanvas-lg offcanvas-start" tab-index="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v> <div class="offcanvas-header border-bottom" data-astro-cid-z6zqkn4v> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v>Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-astro-cid-z6zqkn4v></button> </div> <div class="offcanvas-body" data-astro-cid-z6zqkn4v> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation" data-astro-cid-z6zqkn4v> <ul class="bd-links-nav list-unstyled mb-0 py-4 pb-lg-2 px-lg-3" data-astro-cid-z6zqkn4v> <li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-book-half me-1" data-astro-cid-z6zqkn4v></i> Getting Started </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started" data-astro-cid-z6zqkn4v>Overview</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/creating-websites" data-astro-cid-z6zqkn4v>Creating Accessible Websites</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/reading" data-astro-cid-z6zqkn4v>Recommended Reading</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/resources" data-astro-cid-z6zqkn4v>Resources</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/tools" data-astro-cid-z6zqkn4v>Tools</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li> </ul> </nav> </div> </div> </aside>  <main class="app-main "> <div class="container "> <div class="row"> <div class="col-lg-9"> <h1 class="primary-heading primary-heading--ds " data-astro-cid-o35cc47s>Resources</h1>  <p class="lead mb-5">Empowering inclusive digital experiences through essential accessibility resources</p>  <section class="mb-4 toc-section" data-name="Key Resources"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Key Resources</h2>  <p>World Wide Web Consortium's <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" target="_blank">WCAG Guidelines</a> are the international standard for web accessibility.</p> <p><a href="https://webaim.org/standards/wcag/checklist" target="_blank">WebAIM's WCAG 2 Checklist</a> is a distillation of WCAG guidelines to help technical implementation.</p>  </section>  <div class="--doc-footer mt-5 mb-4"><hr><p class="text-right">©FAO 2024</p></div> </div> <div class="col-lg-3"> <div class="toc sticky-top w-100"> <strong class="toc-title d-block h6 my-2 text-uppercase">On this page</strong> <ul id="tocItems" class="toc-items list-unstyled"></ul>  </div> </div> </div> </div> </main> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1C5XEO" component-url="/_astro/Search.DTIRBvbB.js" component-export="default" renderer-url="/_astro/client.CWY0IrnN.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Search&quot;,&quot;value&quot;:true}" await-children=""><div class="_modal-search modal fade svelte-1aq6ttg" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header svelte-1aq6ttg"><i class="bi bi-search svelte-1aq6ttg"></i> <input type="text" class="form-control svelte-1aq6ttg" placeholder="Search..." id="searchInput" value=""> <i class="bi bi-x-lg _modal-search__close svelte-1aq6ttg" data-bs-dismiss="modal" aria-label="Close"></i></div> <div class="modal-body _search-results svelte-1aq6ttg"> </div> <div class="modal-footer svelte-1aq6ttg" data-svelte-h="svelte-jf29eh"><div><kbd class="DocSearch-Commands-Key svelte-1aq6ttg"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd> <span class="small">to close</span></div></div></div></div> </div><!--astro:end--></astro-island>  </body> </html>

package/dist/accessibility/getting-started/tools/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 </style>
 <link rel="stylesheet" href="/_astro/creating-websites.CXGGOjV5.css">
 <style>.primary-heading--ds[data-astro-cid-o35cc47s]{border-bottom:2px solid var(--line);margin-bottom:3rem;padding-bottom:1rem;padding-top:1rem}
-</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                 <i class="bi bi-search m-0 me-xl-2"></i>
                 <span class="d-none d-xl-inline">Search</span>
             </button> --> </div> </div>  </header>  <div class="app-layout"> <aside id="" class="app-sidebar collapse collapse-horizontal shadow-sm show" data-astro-cid-z6zqkn4v> <div class="offcanvas-lg offcanvas-start" tab-index="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v> <div class="offcanvas-header border-bottom" data-astro-cid-z6zqkn4v> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v>Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-astro-cid-z6zqkn4v></button> </div> <div class="offcanvas-body" data-astro-cid-z6zqkn4v> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation" data-astro-cid-z6zqkn4v> <ul class="bd-links-nav list-unstyled mb-0 py-4 pb-lg-2 px-lg-3" data-astro-cid-z6zqkn4v> <li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-book-half me-1" data-astro-cid-z6zqkn4v></i> Getting Started </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started" data-astro-cid-z6zqkn4v>Overview</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/creating-websites" data-astro-cid-z6zqkn4v>Creating Accessible Websites</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/reading" data-astro-cid-z6zqkn4v>Recommended Reading</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/resources" data-astro-cid-z6zqkn4v>Resources</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/accessibility/getting-started/tools" data-astro-cid-z6zqkn4v>Tools</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li> </ul> </nav> </div> </div> </aside>  <main class="app-main "> <div class="container "> <div class="row"> <div class="col-lg-9"> <h1 class="primary-heading primary-heading--ds " data-astro-cid-o35cc47s>Tools</h1>  <p class="lead mb-5">Empowering inclusive design with essential accessibility testing tools</p>  <section class="mb-4 toc-section" data-name="Overview"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Overview</h2>  <p>Accessibility testing tools are essential for creating inclusive digital experiences.</p> <p>These tools help developers and designers identify and address potential barriers that may prevent users with disabilities from accessing and interacting with web content effectively.</p> <p>By utilizing a combination of automated testing tools and manual evaluation techniques, we can significantly improve the accessibility of our websites and applications.</p> <p>This section introduces various tools that can assist in identifying accessibility issues, ranging from browser extensions to standalone applications and online services.</p> <p>While these tools are invaluable, it's important to remember that they should be used in conjunction with human testing and evaluation for comprehensive accessibility assessment.</p>  </section> <section class="mb-4 toc-section" data-name="Tools"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Tools</h2>  <p>Here you will find a list of tools that can automate finding accessibility issues in your website.</p> <p>However, automated testing can only take you part of the way to testing for accessibility issues.</p> <p>The most reliable test is done by users who have accessibility issues and are familiar with assistive technologies.</p> <p class="mb-4">That said, human testing should come after all problems detectable with automated testing have been addressed.</p> <p><strong>Chrome Plugins:</strong></p> <ul> <li><a href="https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?pli=1" target="_blank">Wave Evaluation Tool</a> Check for accessibility issues on web pages</li> <li><a href="https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en" target="_blank">Heading Map</a> A good heading structure facilitates accessibility</li> <li><a href="https://chromewebstore.google.com/detail/validity/bbicmjjbohdfglopkidebfccilipgeif?hl=en-GB" target="_blank">HTML Validity</a> Look for HTML errors that could confuse screen readers</li> </ul> <p><strong>Other Tools:</strong></p> <ul> <li><a href="https://www.nvaccess.org/download/" target="_blank">NVDA - Free Open-Source Screen Reader</a></li> <li>Colour blindness testing filters <a href="https://www.toptal.com/designers/colorfilter/" target="_blank">Colour Filter</a>, <a href="https://michelf.ca/projects/mac/sim-daltonism/" target="_blank">Sim Daltonism for Mac</a></li> <li>Crawl and test websites with <a href="https://github.com/liip/TheA11yMachine" target="_blank">The A11ly Machine</a></li> <li><a href="https://pagespeed.web.dev/" target="_blank">Lighthouse</a>. Available online and built into Chrome's developer tools - checks many aspects of a web page, including the accessibility</li> </ul>  </section>  <div class="--doc-footer mt-5 mb-4"><hr><p class="text-right">©FAO 2024</p></div> </div> <div class="col-lg-3"> <div class="toc sticky-top w-100"> <strong class="toc-title d-block h6 my-2 text-uppercase">On this page</strong> <ul id="tocItems" class="toc-items list-unstyled"></ul>  </div> </div> </div> </div> </main> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1C5XEO" component-url="/_astro/Search.DTIRBvbB.js" component-export="default" renderer-url="/_astro/client.CWY0IrnN.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Search&quot;,&quot;value&quot;:true}" await-children=""><div class="_modal-search modal fade svelte-1aq6ttg" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header svelte-1aq6ttg"><i class="bi bi-search svelte-1aq6ttg"></i> <input type="text" class="form-control svelte-1aq6ttg" placeholder="Search..." id="searchInput" value=""> <i class="bi bi-x-lg _modal-search__close svelte-1aq6ttg" data-bs-dismiss="modal" aria-label="Close"></i></div> <div class="modal-body _search-results svelte-1aq6ttg"> </div> <div class="modal-footer svelte-1aq6ttg" data-svelte-h="svelte-jf29eh"><div><kbd class="DocSearch-Commands-Key svelte-1aq6ttg"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd> <span class="small">to close</span></div></div></div></div> </div><!--astro:end--></astro-island>  </body> </html>

package/dist/changelog/index.html CHANGED Viewed

@@ -2,11 +2,16 @@
 </style>
 <link rel="stylesheet" href="/_astro/creating-websites.CXGGOjV5.css">
 <style>.primary-heading--ds[data-astro-cid-o35cc47s]{border-bottom:2px solid var(--line);margin-bottom:3rem;padding-bottom:1rem;padding-top:1rem}
-</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+</style><script type="module" src="/_astro/hoisted.C98RIit5.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                 <i class="bi bi-search m-0 me-xl-2"></i>
                 <span class="d-none d-xl-inline">Search</span>
             </button> --> </div> </div>  </header>  <div class="app-layout"> <aside id="" class="app-sidebar collapse collapse-horizontal shadow-sm show" data-astro-cid-z6zqkn4v> <div class="offcanvas-lg offcanvas-start" tab-index="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v> <div class="offcanvas-header border-bottom" data-astro-cid-z6zqkn4v> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v>Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-astro-cid-z6zqkn4v></button> </div> <div class="offcanvas-body" data-astro-cid-z6zqkn4v> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation" data-astro-cid-z6zqkn4v> <ul class="bd-links-nav list-unstyled mb-0 py-4 pb-lg-2 px-lg-3" data-astro-cid-z6zqkn4v> <li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-book-half me-1" data-astro-cid-z6zqkn4v></i> Getting Started </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started" data-astro-cid-z6zqkn4v>Introduction</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/installation" data-astro-cid-z6zqkn4v>Installation</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/design-resources" data-astro-cid-z6zqkn4v>Design resources</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/dashboard-minimum-requirements" data-astro-cid-z6zqkn4v>Dashboard minimum requirements</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-palette-fill me-1" data-astro-cid-z6zqkn4v></i> Theme </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/theme/colors" data-astro-cid-z6zqkn4v>Colors</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/theme/dark-theme" data-astro-cid-z6zqkn4v>Dark Theme</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-file-earmark-richtext-fill me-1" data-astro-cid-z6zqkn4v></i> Content </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/typography" data-astro-cid-z6zqkn4v>Typography</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/links" data-astro-cid-z6zqkn4v>Links</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/images" data-astro-cid-z6zqkn4v>Images</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/embeds" data-astro-cid-z6zqkn4v>Embeds</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/fao-logo" data-astro-cid-z6zqkn4v>FAO Logo</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/icons" data-astro-cid-z6zqkn4v>Icons</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/sdg-images" data-astro-cid-z6zqkn4v>SDG Images</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/flags" data-astro-cid-z6zqkn4v>Country Flags</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/emojis" data-astro-cid-z6zqkn4v>Emojis</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-puzzle-fill me-1" data-astro-cid-z6zqkn4v></i> Components </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/accordions" data-astro-cid-z6zqkn4v>Accordion</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/breadcrumbs" data-astro-cid-z6zqkn4v>Breadcrumbs</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/buttons" data-astro-cid-z6zqkn4v>Button</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/cards" data-astro-cid-z6zqkn4v>Card</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/content-backgrounds" data-astro-cid-z6zqkn4v>Content Background</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/content-blocks" data-astro-cid-z6zqkn4v>Content Block</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/custom-sub-header" data-astro-cid-z6zqkn4v>Custom Sub Header</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/footers" data-astro-cid-z6zqkn4v>Footer</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/headers" data-astro-cid-z6zqkn4v>Header</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/hero-banners" data-astro-cid-z6zqkn4v>Hero Banner</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/lists" data-astro-cid-z6zqkn4v>List</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/modals" data-astro-cid-z6zqkn4v>Modal</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/navbar" data-astro-cid-z6zqkn4v>Navbar</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/paginations" data-astro-cid-z6zqkn4v>Pagination</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/searches" data-astro-cid-z6zqkn4v>Search</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/swipers" data-astro-cid-z6zqkn4v>Swiper</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/tabbed-contents" data-astro-cid-z6zqkn4v>Tabbed Content</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/tag-lists" data-astro-cid-z6zqkn4v>Tag List</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-ui-radios me-1" data-astro-cid-z6zqkn4v></i> Forms </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/forms" data-astro-cid-z6zqkn4v>Overview</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-grid-fill me-1" data-astro-cid-z6zqkn4v></i> Layout </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/layouts/subsite" data-astro-cid-z6zqkn4v>Subsite</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-magic me-1" data-astro-cid-z6zqkn4v></i> Interactive </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive" data-astro-cid-z6zqkn4v>Overview</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive/maps" data-astro-cid-z6zqkn4v>Maps</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive/timeline" data-astro-cid-z6zqkn4v>Timeline</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li> </ul> </nav> </div> </div> </aside>  <main class="app-main "> <div class="container "> <div class="row"> <div class="col-12"> <h1 class="primary-heading primary-heading--ds " data-astro-cid-o35cc47s>Changelog</h1>  <p class="lead mb-5">Stay up-to-date with the latest improvements and updates to our design system</p>  </p>
 <hr>
+<h2 id="2361-2024-10-24">2.36.1 (2024-10-24)</h2>
+<ul>
+<li>Fix NPM packages release</li>
+</ul>
+<hr>
 <h2 id="2360-2024-10-24">2.36.0 (2024-10-24)</h2>
 <ul>
 <li>Add RTL support for Pashto (“sf”) and Persian (“fa”)</li>

package/dist/docs/components/accordions/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 </style>
 <link rel="stylesheet" href="/_astro/creating-websites.CXGGOjV5.css">
 <style>.primary-heading--ds[data-astro-cid-o35cc47s]{border-bottom:2px solid var(--line);margin-bottom:3rem;padding-bottom:1rem;padding-top:1rem}
-</style><script type="module" src="/_astro/hoisted.BKWxkX6c.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+</style><script type="module" src="/_astro/hoisted.BKWxkX6c.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                 <i class="bi bi-search m-0 me-xl-2"></i>
                 <span class="d-none d-xl-inline">Search</span>
             </button> --> </div> </div>  </header>  <div class="app-layout"> <aside id="" class="app-sidebar collapse collapse-horizontal shadow-sm show" data-astro-cid-z6zqkn4v> <div class="offcanvas-lg offcanvas-start" tab-index="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v> <div class="offcanvas-header border-bottom" data-astro-cid-z6zqkn4v> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v>Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-astro-cid-z6zqkn4v></button> </div> <div class="offcanvas-body" data-astro-cid-z6zqkn4v> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation" data-astro-cid-z6zqkn4v> <ul class="bd-links-nav list-unstyled mb-0 py-4 pb-lg-2 px-lg-3" data-astro-cid-z6zqkn4v> <li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-book-half me-1" data-astro-cid-z6zqkn4v></i> Getting Started </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started" data-astro-cid-z6zqkn4v>Introduction</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/installation" data-astro-cid-z6zqkn4v>Installation</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/design-resources" data-astro-cid-z6zqkn4v>Design resources</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/dashboard-minimum-requirements" data-astro-cid-z6zqkn4v>Dashboard minimum requirements</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-palette-fill me-1" data-astro-cid-z6zqkn4v></i> Theme </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/theme/colors" data-astro-cid-z6zqkn4v>Colors</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/theme/dark-theme" data-astro-cid-z6zqkn4v>Dark Theme</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-file-earmark-richtext-fill me-1" data-astro-cid-z6zqkn4v></i> Content </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/typography" data-astro-cid-z6zqkn4v>Typography</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/links" data-astro-cid-z6zqkn4v>Links</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/images" data-astro-cid-z6zqkn4v>Images</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/embeds" data-astro-cid-z6zqkn4v>Embeds</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/fao-logo" data-astro-cid-z6zqkn4v>FAO Logo</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/icons" data-astro-cid-z6zqkn4v>Icons</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/sdg-images" data-astro-cid-z6zqkn4v>SDG Images</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/flags" data-astro-cid-z6zqkn4v>Country Flags</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/emojis" data-astro-cid-z6zqkn4v>Emojis</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-puzzle-fill me-1" data-astro-cid-z6zqkn4v></i> Components </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/accordions" data-astro-cid-z6zqkn4v>Accordion</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/breadcrumbs" data-astro-cid-z6zqkn4v>Breadcrumbs</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/buttons" data-astro-cid-z6zqkn4v>Button</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/cards" data-astro-cid-z6zqkn4v>Card</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/content-backgrounds" data-astro-cid-z6zqkn4v>Content Background</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/content-blocks" data-astro-cid-z6zqkn4v>Content Block</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/custom-sub-header" data-astro-cid-z6zqkn4v>Custom Sub Header</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/footers" data-astro-cid-z6zqkn4v>Footer</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/headers" data-astro-cid-z6zqkn4v>Header</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/hero-banners" data-astro-cid-z6zqkn4v>Hero Banner</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/lists" data-astro-cid-z6zqkn4v>List</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/modals" data-astro-cid-z6zqkn4v>Modal</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/navbar" data-astro-cid-z6zqkn4v>Navbar</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/paginations" data-astro-cid-z6zqkn4v>Pagination</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/searches" data-astro-cid-z6zqkn4v>Search</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/swipers" data-astro-cid-z6zqkn4v>Swiper</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/tabbed-contents" data-astro-cid-z6zqkn4v>Tabbed Content</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/tag-lists" data-astro-cid-z6zqkn4v>Tag List</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-ui-radios me-1" data-astro-cid-z6zqkn4v></i> Forms </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/forms" data-astro-cid-z6zqkn4v>Overview</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-grid-fill me-1" data-astro-cid-z6zqkn4v></i> Layout </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/layouts/subsite" data-astro-cid-z6zqkn4v>Subsite</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-magic me-1" data-astro-cid-z6zqkn4v></i> Interactive </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive" data-astro-cid-z6zqkn4v>Overview</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive/maps" data-astro-cid-z6zqkn4v>Maps</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive/timeline" data-astro-cid-z6zqkn4v>Timeline</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li> </ul> </nav> </div> </div> </aside>  <main class="app-main "> <div class="container "> <div class="row"> <div class="col-lg-9"> <h1 class="primary-heading primary-heading--ds " data-astro-cid-o35cc47s>Accordions</h1>  <p class="lead mb-5">Accordions are components that expand and collapse to reveal or hide content.</p>  <section class="mb-4 toc-section" data-name="Overview"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Overview</h2>  <p>

package/dist/docs/components/breadcrumbs/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 </style>
 <link rel="stylesheet" href="/_astro/creating-websites.CXGGOjV5.css">
 <style>.primary-heading--ds[data-astro-cid-o35cc47s]{border-bottom:2px solid var(--line);margin-bottom:3rem;padding-bottom:1rem;padding-top:1rem}
-</style><script type="module" src="/_astro/hoisted.BKWxkX6c.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.0</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
+</style><script type="module" src="/_astro/hoisted.BKWxkX6c.js"></script></head><body> <header class="ds-header navbar navbar-expand-lg app-navbar sticky-top" data-astro-cid-ryiodjfc> <div class="container-fluid flex-wrap flex-lg-nowrap" aria-label="Main navigation" data-astro-cid-ryiodjfc> <!-- Toggle offcanvas --> <div class="bd-navbar-toggle" data-astro-cid-ryiodjfc> <button class="navbar-toggler p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation" data-astro-cid-ryiodjfc> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16" data-astro-cid-ryiodjfc> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" data-astro-cid-ryiodjfc></path> </svg> <span class="d-none fs-6 pe-1" data-astro-cid-ryiodjfc>Browse</span> </button> </div> <!-- Brand --> <a class="navbar-brand p-0 me-0 me-lg-4 d-flex align-items-center" href="/" aria-label="Design System" data-astro-cid-jsyzchgf> <img width="100%" height="40px" src="/images/logo/fao-logo-three-lines.svg" alt="Design System" data-astro-cid-jsyzchgf> <p class="d-none d-lg-block ms-3 mb-0 ps-3 fw-semibold text-uppercase text-gray" data-astro-cid-jsyzchgf>Design System</p> </a>   <!-- Toggle Header --> <div class="d-flex d-lg-none" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <button class="navbar-toggler d-flex order-3 p-2 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation" data-astro-cid-ryiodjfc> <i class="bi bi-three-dots" data-astro-cid-ryiodjfc></i> </button> </div> <!-- Offcanvas Header --> <div class="offcanvas-lg offcanvas-end flex-grow-1" tab-index="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true" data-astro-cid-ryiodjfc> <div class="offcanvas-header px-4 pb-0" data-astro-cid-ryiodjfc> <a href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar" data-astro-cid-ryiodjfc></button> </div> <!-- Offcanvas Content --> <div class="offcanvas-body p-4 pt-0 p-lg-0" data-astro-cid-ryiodjfc> <hr class="d-lg-none" data-astro-cid-ryiodjfc> <!-- Offcanvas Header Navigation --> <ul class="navbar-nav flex-col bd-navbar-nav flex-wrap" data-astro-cid-ryiodjfc> <li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/docs/getting-started" data-astro-cid-ryiodjfc> Docs </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/sitefinity/getting-started" data-astro-cid-ryiodjfc> Sitefinity </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/accessibility/getting-started" data-astro-cid-ryiodjfc> Accessibility </a> </li><li class="nav-item col-6 col-lg-auto me-lg-2" data-astro-cid-ryiodjfc> <a class="nav-link py-2 px-0 px-lg-2 " href="/examples" data-astro-cid-ryiodjfc> Examples </a> </li> </ul> </div><!-- END - Offcanvas Content --> </div><!-- END - Offcanvas Header --> <div class="flex-row ms-md-auto align-items-center d-none d-lg-flex justify-content-end nav-link" data-astro-cid-ryiodjfc> <button class="btn btn-sm dark-mode-toggle" data-astro-cid-ryiodjfc> <i class="bi bi-moon-stars" data-astro-cid-ryiodjfc></i> </button> <a class="nav-link py-2 px-0 px-lg-3 text-decoration-underline" href="/changelog" data-astro-cid-ryiodjfc>v2.36.1</a> <button type="button" class="_btn-search btn btn-outline-secondary me-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop" data-astro-cid-pap4yyii> <i class="bi bi-search" data-astro-cid-pap4yyii></i> <span class="_btn-search__label small" data-astro-cid-pap4yyii>Search</span> <span class="_btn-search__keys small" data-astro-cid-pap4yyii> <kbd data-astro-cid-pap4yyii>⌘</kbd> <kbd data-astro-cid-pap4yyii>K</kbd> </span> </button>  <a class="btn btn-primary btn-sm me-3" href="/docs/getting-started/installation" data-astro-cid-ryiodjfc>Download</a> <!-- <button class="btn btn-search btn-icon btn-icon-s btn-sm text-decoration-none text-color-gray-dark me-xl-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
                 <i class="bi bi-search m-0 me-xl-2"></i>
                 <span class="d-none d-xl-inline">Search</span>
             </button> --> </div> </div>  </header>  <div class="app-layout"> <aside id="" class="app-sidebar collapse collapse-horizontal shadow-sm show" data-astro-cid-z6zqkn4v> <div class="offcanvas-lg offcanvas-start" tab-index="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v> <div class="offcanvas-header border-bottom" data-astro-cid-z6zqkn4v> <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel" data-astro-cid-z6zqkn4v>Browse docs</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar" data-astro-cid-z6zqkn4v></button> </div> <div class="offcanvas-body" data-astro-cid-z6zqkn4v> <nav class="bd-links w-100" id="bd-docs-nav" aria-label="Docs navigation" data-astro-cid-z6zqkn4v> <ul class="bd-links-nav list-unstyled mb-0 py-4 pb-lg-2 px-lg-3" data-astro-cid-z6zqkn4v> <li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-book-half me-1" data-astro-cid-z6zqkn4v></i> Getting Started </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started" data-astro-cid-z6zqkn4v>Introduction</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/installation" data-astro-cid-z6zqkn4v>Installation</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/design-resources" data-astro-cid-z6zqkn4v>Design resources</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/getting-started/dashboard-minimum-requirements" data-astro-cid-z6zqkn4v>Dashboard minimum requirements</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-palette-fill me-1" data-astro-cid-z6zqkn4v></i> Theme </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/theme/colors" data-astro-cid-z6zqkn4v>Colors</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/theme/dark-theme" data-astro-cid-z6zqkn4v>Dark Theme</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-file-earmark-richtext-fill me-1" data-astro-cid-z6zqkn4v></i> Content </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/typography" data-astro-cid-z6zqkn4v>Typography</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/links" data-astro-cid-z6zqkn4v>Links</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/images" data-astro-cid-z6zqkn4v>Images</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/embeds" data-astro-cid-z6zqkn4v>Embeds</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/fao-logo" data-astro-cid-z6zqkn4v>FAO Logo</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/icons" data-astro-cid-z6zqkn4v>Icons</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/sdg-images" data-astro-cid-z6zqkn4v>SDG Images</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/flags" data-astro-cid-z6zqkn4v>Country Flags</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/content/emojis" data-astro-cid-z6zqkn4v>Emojis</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-puzzle-fill me-1" data-astro-cid-z6zqkn4v></i> Components </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/accordions" data-astro-cid-z6zqkn4v>Accordion</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/breadcrumbs" data-astro-cid-z6zqkn4v>Breadcrumbs</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/buttons" data-astro-cid-z6zqkn4v>Button</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/cards" data-astro-cid-z6zqkn4v>Card</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/content-backgrounds" data-astro-cid-z6zqkn4v>Content Background</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/content-blocks" data-astro-cid-z6zqkn4v>Content Block</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/custom-sub-header" data-astro-cid-z6zqkn4v>Custom Sub Header</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/footers" data-astro-cid-z6zqkn4v>Footer</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/headers" data-astro-cid-z6zqkn4v>Header</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/hero-banners" data-astro-cid-z6zqkn4v>Hero Banner</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/lists" data-astro-cid-z6zqkn4v>List</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/modals" data-astro-cid-z6zqkn4v>Modal</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/navbar" data-astro-cid-z6zqkn4v>Navbar</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/paginations" data-astro-cid-z6zqkn4v>Pagination</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/searches" data-astro-cid-z6zqkn4v>Search</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/swipers" data-astro-cid-z6zqkn4v>Swiper</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/tabbed-contents" data-astro-cid-z6zqkn4v>Tabbed Content</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/components/tag-lists" data-astro-cid-z6zqkn4v>Tag List</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-ui-radios me-1" data-astro-cid-z6zqkn4v></i> Forms </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/forms" data-astro-cid-z6zqkn4v>Overview</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-grid-fill me-1" data-astro-cid-z6zqkn4v></i> Layout </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/layouts/subsite" data-astro-cid-z6zqkn4v>Subsite</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li><li class="app-sidebar-route mb-4" data-astro-cid-z6zqkn4v> <strong class="app-sidebar-route-title d-block mb-2" data-astro-cid-z6zqkn4v> <i class="bi bi-magic me-1" data-astro-cid-z6zqkn4v></i> Interactive </strong> <ul class="list-unstyled position-relative" data-astro-cid-z6zqkn4v> <li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive" data-astro-cid-z6zqkn4v>Overview</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive/maps" data-astro-cid-z6zqkn4v>Maps</a> </li><li class="app-sidebar-item pb-0" data-astro-cid-z6zqkn4v> <a class="app-sidebar-link d-inline-block rounded " href="/docs/interactive/timeline" data-astro-cid-z6zqkn4v>Timeline</a> </li> <div class="app-sidebar-route-line" data-astro-cid-z6zqkn4v></div> </ul> </li> </ul> </nav> </div> </div> </aside>  <main class="app-main "> <div class="container "> <div class="row"> <div class="col-lg-9"> <h1 class="primary-heading primary-heading--ds " data-astro-cid-o35cc47s>Breadcrumbs</h1>  <p class="lead mb-5">Breadcrumbs are used to show the path to the current page.</p>  <section class="mb-4 toc-section" data-name="Overview"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Overview</h2>  <p>Breadcrumbs are an essential navigation aid that provides users with a clear hierarchical path to their current location within a website or application. They serve multiple purposes:</p> <ul> <li>Orientation: Breadcrumbs help users understand where they are in the site's structure.</li> <li>Navigation: They allow users to easily navigate back to higher-level pages.</li> <li>Context: Breadcrumbs provide context for the current page in relation to the overall site architecture.</li> <li>Improved User Experience: They reduce the number of actions a user needs to take if they wish to return to a higher-level page.</li> </ul> <p>When implementing breadcrumbs, it's important to ensure they are clear, concise, and accurately reflect the site's structure. They should be placed consistently across pages, typically near the top of the content area, and use appropriate separators between levels.</p>  </section> <section class="mb-4 toc-section" data-name="Usage"> <h2 class="sub-title section-title" data-astro-cid-kt2cdxu6>Usage</h2>  <div class="code-highlight" data-hide-example="false" data-astro-cid-dt3oxq4e> <div class="code-highlight__get" data-language="xml" data-astro-cid-dt3oxq4e>  <nav aria-label="breadcrumb"> <ol class="breadcrumb "> <li class="breadcrumb-item "> <a href="#!">Docs</a> </li><li class="breadcrumb-item "> <a href="#!">Components</a> </li><li class="breadcrumb-item active" aria-current="page"> <span>Breadcrumbs</span> </li> </ol> </nav>  </div> <div class="code-highlight__wrapper" data-astro-cid-dt3oxq4e> <pre class="d-flex mb-0" data-astro-cid-dt3oxq4e>            <code class="code-highlight__show hljs language-xml" data-astro-cid-dt3oxq4e></code>