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

fix(redmine 1306613): fixed form elements accessibility errors #205

Merged
merged 7 commits into from
Aug 12, 2024
Merged

fix(redmine 1306613): fixed form elements accessibility errors #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4505b32
fix(redmine 1306613): fixed form elements accessibility errors
subraAntoine Aug 1, 2024
753f178
Merge branch '0.16.x' into Fix/FormElementsAccessibilityError
Meriemu Aug 5, 2024
d00d5ea
fix(redmine 1306613): fix pr review from tony
subraAntoine Aug 8, 2024
07b843a
Merge branch 'Fix/FormElementsAccessibilityError' of github.com:Smile…
subraAntoine Aug 8, 2024
fcc6166
fix(redmine 1306613): fixed lint error
subraAntoine Aug 12, 2024
1463127
fix(redmine 1306613): fixed lint error
subraAntoine Aug 12, 2024
5886b3e
Merge branch '0.16.x' into Fix/FormElementsAccessibilityError
MorganeLeCaignec Aug 12, 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
5 changes: 5 additions & 0 deletions .changeset/spotty-dryers-admire.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@smile/haring-react': minor
---

Fixed form elements accessibility error
2 changes: 1 addition & 1 deletion packages/haring-react/src/Components/DocumentList/DocumentList.mock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const documentsMock: IDocument[] = [
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
</p>
<Button color="gray.8">
<DownloadSimple width={12} />
<DownloadSimple aria-label="download icon" width={12} />
<Space w={8} />
PDF, FR - 1Mo
</Button>
Expand Down
4 changes: 4 additions & 0 deletions packages/haring-react/src/Components/DocumentList/__snapshots__/DocumentList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ exports[`DocumentList matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="checkbox input"
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
type="checkbox"
Expand Down Expand Up @@ -313,6 +314,7 @@ exports[`DocumentList matches snapshot 1`] = `
class="m_811560b9 mantine-Button-label"
>
<svg
aria-label="download icon"
fill="currentColor"
height="1em"
viewBox="0 0 256 256"
Expand Down Expand Up @@ -386,6 +388,7 @@ exports[`DocumentList matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="checkbox input"
checked=""
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
Expand Down Expand Up @@ -555,6 +558,7 @@ exports[`DocumentList matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="checkbox input"
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
type="checkbox"
Expand Down
7 changes: 7 additions & 0 deletions packages/haring-react/src/Components/SelectableList/SelectableList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,20 @@ import { Checkbox, Group, Stack } from '@mantine/core';

import classes from './SelectableList.module.css';

export interface ISelectableListAriaLabels {
checkboxInput?: string;
}

export interface ISelectableListProps extends StackProps {
ariaLabels?: ISelectableListAriaLabels;
children: ReactElement[];
onSelectChange?: (index: number, isSelected: boolean) => void;
selectedIndexes?: number[];
}

export function SelectableList(props: ISelectableListProps): ReactElement {
const {
ariaLabels,
children,
onSelectChange,
selectedIndexes = [],
Expand All @@ -30,6 +36,7 @@ export function SelectableList(props: ISelectableListProps): ReactElement {
wrap="nowrap"
>
<Checkbox
aria-label={ariaLabels?.checkboxInput || 'checkbox input'}
checked={selectedIndexes.includes(index)}
className="selectableListCheckboxRef"
onChange={(e) => onSelectChange?.(index, e.currentTarget.checked)}
Expand Down
3 changes: 3 additions & 0 deletions ...ges/haring-react/src/Components/SelectableList/__snapshots__/SelectableList.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ exports[`SelectableList matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="checkbox input"
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
type="checkbox"
Expand Down Expand Up @@ -202,6 +203,7 @@ exports[`SelectableList matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="checkbox input"
checked=""
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
Expand Down Expand Up @@ -371,6 +373,7 @@ exports[`SelectableList matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="checkbox input"
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
type="checkbox"
Expand Down
32 changes: 26 additions & 6 deletions packages/haring-react/src/Components/SidebarFilters/SidebarFilters.mock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,25 @@ export function getMenu(checked: boolean): IMenuItem<number>[] {
content: (
<>
<Group>
<Checkbox defaultChecked={checked} value="Dupont" /> Dupont
<Checkbox
aria-label="Dupont checkbox"
defaultChecked={checked}
value="Dupont"
/>{' '}
Dupont
</Group>
<br />
<Group>
<Checkbox defaultChecked={checked} value="Martin" /> Martin
<Checkbox
aria-label="Martin checkbox"
defaultChecked={checked}
value="Martin"
/>{' '}
Martin
</Group>
<br />
<Group>
<Checkbox value="André" /> Andrée
<Checkbox aria-label="André checkbox" value="André" /> Andrée
</Group>
</>
),
Expand All @@ -58,11 +68,16 @@ export function getMenu(checked: boolean): IMenuItem<number>[] {
content: (
<>
<Group>
<Checkbox defaultChecked={checked} value="CDI" /> CDI
<Checkbox
aria-label="CDI checkbox"
defaultChecked={checked}
value="CDI"
/>{' '}
CDI
</Group>
<br />
<Group>
<Checkbox value="CDD" /> CDD
<Checkbox aria-label="CDD checkbox" value="CDD" /> CDD
</Group>
</>
),
Expand All @@ -72,7 +87,12 @@ export function getMenu(checked: boolean): IMenuItem<number>[] {
{
content: (
<Group>
<Checkbox defaultChecked={checked} value="FREELANCE" /> Freelance
<Checkbox
aria-label="Freelance checkbox"
defaultChecked={checked}
value="FREELANCE"
/>{' '}
Freelance
</Group>
),
id: 11,
Expand Down
18 changes: 14 additions & 4 deletions ...ges/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="Dupont checkbox"
checked=""
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
Expand All @@ -321,7 +322,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
/>
</div>
</div>
Dupont

Dupont
</div>
<br />
<div
Expand All @@ -341,6 +343,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="Martin checkbox"
checked=""
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
Expand All @@ -367,7 +370,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
/>
</div>
</div>
Martin

Martin
</div>
<br />
<div
Expand All @@ -387,6 +391,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="André checkbox"
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
type="checkbox"
Expand Down Expand Up @@ -554,6 +559,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="CDI checkbox"
checked=""
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
Expand All @@ -580,7 +586,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
/>
</div>
</div>
CDI

CDI
</div>
<br />
<div
Expand All @@ -600,6 +607,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="CDD checkbox"
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
type="checkbox"
Expand Down Expand Up @@ -707,6 +715,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
data-label-position="right"
>
<input
aria-label="Freelance checkbox"
checked=""
class="haring-focus m_26063560 mantine-Checkbox-input"
id="mantine-f4bipx4bi"
Expand All @@ -733,7 +742,8 @@ exports[`SidebarFilters matches snapshot 1`] = `
/>
</div>
</div>
Freelance

Freelance
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/haring-react/src/Components/SwitchableView/SwitchableView.mock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,17 @@ export const viewMockC = (
export const viewsMock = [
{
dataView: viewMockA,
label: <ListBullets />,
label: <ListBullets aria-label="square icon" />,
value: 'a',
},
{
dataView: viewMockB,
label: <SquaresFour />,
label: <SquaresFour aria-label="square icon" />,
value: 'b',
},
{
dataView: viewMockC,
label: <Star />,
label: <Star aria-label="star icon" />,
value: 'c',
},
];
3 changes: 3 additions & 0 deletions ...ges/haring-react/src/Components/SwitchableView/__snapshots__/SwitchableView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ exports[`SwitchableView matches snapshot 1`] = `
class="m_78882f40 mantine-SegmentedControl-innerLabel"
>
<svg
aria-label="square icon"
fill="currentColor"
height="1em"
viewBox="0 0 256 256"
Expand Down Expand Up @@ -83,6 +84,7 @@ exports[`SwitchableView matches snapshot 1`] = `
class="m_78882f40 mantine-SegmentedControl-innerLabel"
>
<svg
aria-label="square icon"
fill="currentColor"
height="1em"
viewBox="0 0 256 256"
Expand Down Expand Up @@ -115,6 +117,7 @@ exports[`SwitchableView matches snapshot 1`] = `
class="m_78882f40 mantine-SegmentedControl-innerLabel"
>
<svg
aria-label="star icon"
fill="currentColor"
height="1em"
viewBox="0 0 256 256"
Expand Down
Loading