Skip to content

Commit

Permalink
feat(redmine 1306617): correction accessibility error
Browse files Browse the repository at this point in the history
  • Loading branch information
@Meriemu
Meriemu committed Aug 8, 2024
1 parent 1dd1018 commit a10814b
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 129 deletions.
2 changes: 1 addition & 1 deletion packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,12 @@ export function CollapseButtonControlled<
return (
<>
<Button
aria-expanded={opened ? 'true' : 'false'}
classNames={{
label: labelClasses.join(' '),
root: rootClasses.join(' '),
section: classes.section,
}}
component="div"
data-selected={selected}
data-testid="root"
fullWidth={fullWidth}
Expand Down
6 changes: 2 additions & 4 deletions ...ges/haring-react/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,14 @@ exports[`CollapseButton matches snapshot 1`] = `
>
@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
</style>
<button
aria-expanded="false"
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-size="md"
data-testid="root"
data-variant="white"
data-with-right-section="true"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand Down Expand Up @@ -64,7 +62,7 @@ exports[`CollapseButton matches snapshot 1`] = `
</button>
</span>
</span>
</button>
</div>
<div
aria-hidden="true"
class=""
Expand Down
54 changes: 18 additions & 36 deletions packages/haring-react/src/Components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,7 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
class="m_1b7284a3 mantine-Paper-root"
style="padding: 0rem;"
>
<button
aria-expanded="false"
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
Expand All @@ -139,7 +138,6 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
data-variant="white"
data-with-right-section="true"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand Down Expand Up @@ -184,23 +182,21 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
</div>
<div
aria-hidden="true"
class=""
data-testid="content"
style="box-sizing: border-box; opacity: 0; transition: opacity 200ms ease; display: none; height: 0px; overflow: hidden;"
>
<button
aria-expanded="false"
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
data-size="md"
data-testid="root"
data-variant="white"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand All @@ -217,17 +213,15 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
<button
aria-expanded="false"
</div>
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
data-size="md"
data-testid="root"
data-variant="white"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand All @@ -244,9 +238,8 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
<button
aria-expanded="false"
</div>
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
Expand All @@ -255,7 +248,6 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
data-variant="white"
data-with-right-section="true"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand Down Expand Up @@ -300,23 +292,21 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
</div>
<div
aria-hidden="true"
class=""
data-testid="content"
style="box-sizing: border-box; opacity: 0; transition: opacity 200ms ease; display: none; height: 0px; overflow: hidden;"
>
<button
aria-expanded="false"
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
data-size="md"
data-testid="root"
data-variant="white"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand All @@ -333,17 +323,15 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
<button
aria-expanded="false"
</div>
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
data-size="md"
data-testid="root"
data-variant="white"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand All @@ -360,18 +348,16 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
</div>
</div>
<button
aria-expanded="false"
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
data-size="md"
data-testid="root"
data-variant="white"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand All @@ -388,18 +374,16 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
</div>
</div>
<button
aria-expanded="false"
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
data-size="md"
data-testid="root"
data-variant="white"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand All @@ -416,17 +400,15 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
<button
aria-expanded="false"
</div>
<div
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-block="true"
data-selected="false"
data-size="md"
data-testid="root"
data-variant="white"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: 0rem; --button-bg: var(--mantine-color-white); --button-hover: rgba(252, 252, 252, 1); --button-color: var(--mantine-color-cyan-filled); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
Expand All @@ -443,7 +425,7 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
</button>
</span>
</span>
</button>
</div>
</div>
</div>
`;
Loading

0 comments on commit a10814b

Please sign in to comment.