Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AIS-64 | @jdwjdwjdw | A11y and console fixups #153

Merged
merged 4 commits into from
May 29, 2024
Merged

AIS-64 | @jdwjdwjdw | A11y and console fixups #153

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46be8b9
A11y and console fixups
jdwjdwjdw May 28, 2024
8a42039
Images not loading fixup
jdwjdwjdw May 29, 2024
70417c2
JSX vs HTML fixups
jdwjdwjdw May 29, 2024
84561bc
HTML Syntax fixup.
sherakama May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions content/examples/alerts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" height="20" width="20" class="ml-02em">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"></path>
clipRule="evenodd"></path>
</svg></button></div>
<h2 class="order-1 mb-15 md:mb-0 flex flex-shrink rs-mr-1 w-full md:w-max"><span class="mr-5 inline-block"><svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"
height="20" width="20">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
</path>
</svg></span><span class="inline-block uppercase font-bold text-17 tracking-widest">Information:</span></h2>
Expand All @@ -40,15 +40,15 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
width="20" className="ml-02em">
<path fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"></path>
clipRule="evenodd"></path>
</svg>
</button>
</div>
<h2 className="order-1 mb-15 md:mb-0 flex flex-shrink rs-mr-1 w-full md:w-max">
<span className="mr-5 inline-block">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"
height="20" width="20">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
</path>
</svg>
Expand All @@ -75,7 +75,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
width="20" className="ml-02em">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"></path>
clipRule="evenodd"></path>
</svg>
</button>
</div>
Expand All @@ -84,7 +84,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
width="20" class="su-ml-02em">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"></path>
clipRule="evenodd"></path>
</svg></span><span class="inline-block uppercase font-bold text-17 tracking-widest">Info:</span></h2>
<div class="order-2 flex-1 flex-grow w-full">
<div class="text-normal">
Expand All @@ -106,7 +106,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
width="20" className="ml-02em">
<path fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"></path>
clipRule="evenodd"></path>
</svg>
</button>
</div>
Expand All @@ -122,7 +122,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
clipRule="evenodd"
></path>
</svg>
</span>
Expand Down
24 changes: 12 additions & 12 deletions content/examples/cards.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,29 +200,29 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
</Section>
<Section heading="Library Card" width="full">
```html
<div class="card block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md md:max-w-500">
<div class="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
<div className="card block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md md:max-w-500">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jdwjdwjdw
It looks like you've changed the example markup from HTML valid markup to React markup. Can you tell me more about why you changed these? This changes the example markup code and they are invalid HTML attributes.

Screenshot 2024-05-29 at 09 43 02

Copy link
Member

@sherakama sherakama May 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The stuff inside the html fencing '''html should stay as html and not react.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks - I got a little overambitious while trying to fix the console errors. Some of the JSX vs HTML did need a little cleanup, so I removed my incorrect changes and kept the ones that needed updating. Should be good for another look now.

<div className="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
<img src="https://library.stanford.edu/_next/image?url=https%3A%2F%2Flibrary.sites-pro.stanford.edu%2Fsites%2Flibrary%2Ffiles%2Fstyles%2Fbreakpoint_2xl_2x%2Fpublic%2Fmedia%2Fimage%2Fmain-board-computer-chips-electronics_0.jpg%3Fitok%3D6L7_jfYo&w=1920&q=75" />
</div>
<div class="card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
<h3 class="leading-tight font-bold type-2 mb-03em">Gordon Moore papers, 1958–2005</h3>
<div className="card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
<h3 className="leading-tight font-bold type-2 mb-03em">Gordon Moore papers, 1958–2005</h3>
<div>
<p class=" max-w-[100ch]">This collection contains Moore’s Intel lab notebooks, personal and business correspondence, Intel presentations, memos and white papers, personal notes from meetings, greeting cards, photographs, cassette tapes and videos. The materials date from 1958 to 2005, but the majority dates from 1968 to 1999.</p>
<p className=" max-w-[100ch]">This collection contains Moore’s Intel lab notebooks, personal and business correspondence, Intel presentations, memos and white papers, personal notes from meetings, greeting cards, photographs, cassette tapes and videos. The materials date from 1958 to 2005, but the majority dates from 1968 to 1999.</p>
</div>
<a rel="nofollow" aria-label="View the collection of Gordon Moore's papers, 1958 - 2005" class="rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1" href="https://searchworks.stanford.edu/view/10626780">View the collection</a>
<a rel="nofollow" aria-label="View the collection of Gordon Moore's papers, 1958 - 2005" className="rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1" href="https://searchworks.stanford.edu/view/10626780">View the collection</a>
</div>
</div>
```
<div class="card block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md md:max-w-500">
<div class="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
<div className="card block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md md:max-w-500">
<div className="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
<img src="https://library.stanford.edu/_next/image?url=https%3A%2F%2Flibrary.sites-pro.stanford.edu%2Fsites%2Flibrary%2Ffiles%2Fstyles%2Fbreakpoint_2xl_2x%2Fpublic%2Fmedia%2Fimage%2Fmain-board-computer-chips-electronics_0.jpg%3Fitok%3D6L7_jfYo&w=1920&q=75" />
</div>
<div class="card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
<h3 class="leading-tight font-bold type-2 mb-03em">Gordon Moore papers, 1958–2005</h3>
<div className="card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
<h3 className="leading-tight font-bold type-2 mb-03em">Gordon Moore papers, 1958–2005</h3>
<div>
<p class=" max-w-[100ch]">This collection contains Moore’s Intel lab notebooks, personal and business correspondence, Intel presentations, memos and white papers, personal notes from meetings, greeting cards, photographs, cassette tapes and videos. The materials date from 1958 to 2005, but the majority dates from 1968 to 1999.</p>
<p className=" max-w-[100ch]">This collection contains Moore’s Intel lab notebooks, personal and business correspondence, Intel presentations, memos and white papers, personal notes from meetings, greeting cards, photographs, cassette tapes and videos. The materials date from 1958 to 2005, but the majority dates from 1968 to 1999.</p>
</div>
<a rel="nofollow" aria-label="View the collection of Gordon Moore's papers, 1958 - 2005" class="rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1" href="https://searchworks.stanford.edu/view/10626780">View the collection</a>
<a rel="nofollow" aria-label="View the collection of Gordon Moore's papers, 1958 - 2005" className="rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1" href="https://searchworks.stanford.edu/view/10626780">View the collection</a>
</div>
</div>
</Section>
Expand Down
Loading
Loading