Skip to content

Commit

Permalink
docs([DST-580]): Add page about accessibility (#4201)
Browse files Browse the repository at this point in the history 
* save

* better

* save

* update

* done!

* add example for labeling

* save

* save

* save

* save

* save

* docs: Apply root styles to overlay portal so they are displayed correctly.

* Create yellow-lies-bake.md

* shorten

* demo

* save

* feat(components): Mark layout coponents as regions for accessibility.

* aria live demo

* aria live demo

* link up and list screenreaders

* hiearchy

* Fix code scanning alert no. 79: Incomplete string escaping or encoding

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* update

* use mg components

* format with jsx

* use jsx comment

* add badge

* change intro

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
  • Loading branch information
@sebald @github-advanced-security
sebald and github-advanced-security[bot] authored Oct 18, 2024
1 parent 2babc0b commit e6861b2
Show file tree
Hide file tree
Showing 25 changed files with 606 additions and 57 deletions.
4 changes: 3 additions & 1 deletion docs/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,9 @@ export const Page = () => (
It leverages React Aria for screen reader and keyboard navigation
support, ensuring your applications are ready for every user.
</SectionContent>
<SectionLink href="/components">Browse the components</SectionLink>
<SectionLink href="/foundations/accessibility">
Learn more about accessibility
</SectionLink>
</div>
<AccessibiltySection />
</div>
Expand Down
96 changes: 47 additions & 49 deletions docs/content/components/collection/table/table-appearance.demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,52 @@ import { DateFormat } from '@/ui';
import { I18nProvider, TableProps } from '@marigold/components';
import { Table } from '@marigold/components';

export default (props: TableProps) => {
const columns = [
{ name: 'Id', key: 'id' },
{ name: 'Event', key: 'event' },
{ name: 'Date', key: 'date' },
];
const columns = [
{ name: 'Id', key: 'id' },
{ name: 'Event', key: 'event' },
{ name: 'Date', key: 'date' },
];

const rowData: { [key: string]: string }[] = [
{
id: '1234',
event: 'Concert',
date: '2024-01-10',
},
{
id: '82374',
event: 'Open Air Festival',
date: '2024-07-09',
},
{
id: '724423',
event: 'Live on Stage',
date: '2024-11-25',
},
{
id: '23497',
event: 'Open Air Summertime',
date: '2024-06-01',
},
];
const items: { [key: string]: string }[] = [
{
id: '1234',
event: 'Concert',
date: '2024-01-10',
},
{
id: '82374',
event: 'Open Air Festival',
date: '2024-07-09',
},
{
id: '724423',
event: 'Live on Stage',
date: '2024-11-25',
},
{
id: '23497',
event: 'Open Air Summertime',
date: '2024-06-01',
},
];

return (
<Table {...props}>
<Table.Header columns={columns}>
{column => <Table.Column>{column.name}</Table.Column>}
</Table.Header>
<Table.Body items={rowData}>
{item => (
<Table.Row key={item.id}>
<Table.Cell>{item.id}</Table.Cell>
<Table.Cell>{item.event}</Table.Cell>
<Table.Cell>
<I18nProvider locale="de-DE">
<DateFormat dateStyle="full" value={new Date(`${item.date}`)} />
</I18nProvider>
</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
);
};
export default (props: TableProps) => (
<Table {...props}>
<Table.Header columns={columns}>
{column => <Table.Column>{column.name}</Table.Column>}
</Table.Header>
<Table.Body items={items}>
{item => (
<Table.Row key={item.id}>
<Table.Cell>{item.id}</Table.Cell>
<Table.Cell>{item.event}</Table.Cell>
<Table.Cell>
<I18nProvider locale="de-DE">
<DateFormat dateStyle="full" value={new Date(`${item.date}`)} />
</I18nProvider>
</Table.Cell>
</Table.Row>
)}
</Table.Body>
</Table>
);
221 changes: 221 additions & 0 deletions docs/content/foundations/accessibility/accessibility-aria-live.demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
import { useState } from 'react';
import {
Aside,
Button,
Card,
Columns,
Form,
Image,
Inline,
Menu,
Select,
Stack,
Text,
} from '@marigold/components';
import { NumericFormat } from '@marigold/system';

const locations = [
{
id: '1',
name: 'The Giggle Grounds',
type: 'Outdoor Amphitheater',
description:
'A charming open-air venue perfect for comedy shows under the stars, bringing laughter to every corner of Laughville.',
street: '123 Main Street',
city: 'Laughville',
capacity: 500,
price: { from: 1000, to: 5000 },
},
{
id: '2',
name: 'The Wobbling Stage',
type: 'Comedy Club',
description:
'An intimate comedy club with a quirky twist, where every joke makes the stage wobble with excitement!',
street: '456 Comedy Boulevard',
city: 'Shakytown',
capacity: 300,
price: { from: 750, to: 3500 },
},
{
id: '3',
name: 'The Chuckle Barn',
type: 'Converted Barn',
description:
'This rustic barn is now a cozy comedy haven—ideal for laughing till the cows come home!',
street: '789 Oak Road',
city: 'Hee-Haw City',
capacity: 150,
price: { from: 500, to: 2500 },
},
{
id: '4',
name: 'The Quirky Quay',
type: 'Waterfront Venue',
description:
'A scenic waterfront spot that blends quirky vibes and stunning views—perfect for a night full of smiles and sea breezes.',
street: '101 Riverside Drive',
city: 'Port Funsies',
capacity: 600,
price: { from: 2000, to: 7000 },
},
{
id: '5',
name: 'The Hysterical Hive',
type: 'Underground Lounge',
description:
'A buzzing underground lounge filled with laughter and good vibes, just like a hive full of joy.',
street: '202 Buzzington Street',
city: 'Buzzington',
capacity: 250,
price: { from: 1000, to: 4000 },
},
{
id: '6',
name: 'The Belly Laugh Ballroom',
type: 'Ballroom',
description:
'A grand ballroom where laughter echoes from every corner—guaranteed to make your belly ache from giggling.',
street: '303 Grand Avenue',
city: 'Giggleburg',
capacity: 800,
price: { from: 3000, to: 10000 },
},
{
id: '7',
name: 'The Snicker Sanctuary',
type: 'Theater',
description:
'A comfortable theater where all snickers, chuckles, and guffaws are welcome. Come find your happy place.',
street: '404 Maple Court',
city: 'Chortleton',
capacity: 400,
price: { from: 1500, to: 5000 },
},
{
id: '8',
name: "The Jester's Junction",
type: 'Community Center',
description:
'A vibrant community center with fun-loving vibes and plenty of laughter—where every visitor is treated like royalty!',
street: '505 Broadway Boulevard',
city: 'Merrymouth',
capacity: 350,
price: { from: 1200, to: 4500 },
},
{
id: '9',
name: 'The Punning Pavilion',
type: 'Open Pavilion',
description:
'An open pavilion designed for wordplay wizards and pun enthusiasts—come enjoy a night of laughter that hits all the right notes.',
street: '606 Hillcrest Way',
city: 'Wordplay Heights',
capacity: 450,
price: { from: 1800, to: 5500 },
},
{
id: '10',
name: 'The Guffaw Gardens',
type: 'Botanical Garden',
description:
'A beautiful garden that blooms with laughter—ideal for large gatherings filled with smiles and fresh air.',
street: '707 Bloomfield Road',
city: 'Laughterfield',
capacity: 1000,
price: { from: 4000, to: 12000 },
},
];
export default () => {
const [selectedLocation, setSelectedLocation] = useState(locations[0].id);
const current = locations.find(location => location.id === selectedLocation)!;

return (
<Stack space={4}>
<Form
onSubmit={e => {
e.preventDefault();
const form = new FormData(e.currentTarget);
const location = form.get('location')!;
setSelectedLocation(location.toString());
}}
>
<Inline space={2}>
<Select
aria-label="Select a location:"
name="location"
width={48}
defaultSelectedKey={selectedLocation}
>
{locations.map(location => (
<Select.Option key={location.id} id={location.id}>
{location.name}
</Select.Option>
))}
</Select>
<Button
variant="primary"
type="submit"
aria-controls="locationDetails"
>
View details
</Button>
</Inline>
</Form>
<Card px={4} py={6}>
<Aside sideWidth="160px" space={8}>
<Image
alt=""
src={`/venues/${current.name.toLocaleLowerCase().replaceAll(' ', '-').replace(/'/g, '')}.webp`}
/>
<Stack
space={6}
id="locationDetails"
role="region"
aria-live="polite"
>
<Stack>
<Text id="locationName" weight="extrabold" fontSize="2xl">
{current.name}
</Text>
<Text fontStyle="italic">{current.type}</Text>
</Stack>
<Stack>
<Text weight="bold">Description</Text>
<Text>{current.description}</Text>
</Stack>
<Columns columns={[1, 1, 1]} space={4}>
<Stack>
<Text weight="bold">Address</Text>
<Text>{current.street}</Text>
<Text>{current.city}</Text>
</Stack>
<Stack>
<Text weight="bold">Capacity</Text>
<Text>{current.capacity}</Text>
</Stack>
<Stack>
<Text weight="bold">Price</Text>
<Text>
<NumericFormat
style="currency"
value={current.price.from}
currency="EUR"
notation="compact"
/>{' '}
to{' '}
<NumericFormat
style="currency"
value={current.price.to}
currency="EUR"
notation="compact"
/>
</Text>
</Stack>
</Columns>
</Stack>
</Aside>
</Card>
</Stack>
);
};
43 changes: 43 additions & 0 deletions docs/content/foundations/accessibility/accessibility-focus.demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import {
Button,
Center,
Checkbox,
Dialog,
Headline,
Inline,
Stack,
} from '@marigold/components';

export default () => (
<Center>
<Dialog.Trigger>
<Button variant="primary">Open notification settings</Button>
<Dialog closeButton>
{({ close }) => (
<>
<Headline id="dialog-headline" level={2}>
Notification settings
</Headline>
<Stack space={4}>
<Checkbox.Group aria-labelledby="dialog-headline">
<Checkbox value="newsletter" defaultChecked>
Email Newsletter
</Checkbox>
<Checkbox value="reminder">Event Reminders</Checkbox>
<Checkbox value="promo">Promo Notifications</Checkbox>
</Checkbox.Group>
<Inline space={4}>
<Button variant="primary" onPress={close}>
Update
</Button>
<Button variant="secondary" onPress={close}>
Cancel
</Button>
</Inline>
</Stack>
</>
)}
</Dialog>
</Dialog.Trigger>
</Center>
);
Loading

0 comments on commit e6861b2

Please sign in to comment.