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.

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

improve accordion accessibility #437

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

balman
Copy link

@balman balman commented May 2, 2018

Improves upon the issue described in #436.

Visibly hides input[type=radio] and input[type=checkbox] rather than suggesting use of hidden attribute, keeping them on the page and in the context of keyboard navigation. Also adds in an outline around the accordion label when the inputs are focused.

}
}

& .accordion-body {

Choose a reason for hiding this comment

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

Selector should have depth of applicability no greater than 2, but was 3
Unnecessary parent selector (&)

transform: rotate(90deg);
}
}

Choose a reason for hiding this comment

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

Line contains trailing whitespace

&:checked ~,
&[open] {
& .accordion-header {
.icon {

Choose a reason for hiding this comment

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

Selector should have depth of applicability no greater than 2, but was 4
Nesting should be no greater than 4, but was 5

max-height: 50rem;
&:checked ~,
&[open] {
& .accordion-header {

Choose a reason for hiding this comment

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

Selector should have depth of applicability no greater than 2, but was 3
Unnecessary parent selector (&)

border: 0;

&:focus {
&+ label {

Choose a reason for hiding this comment

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

Unnecessary parent selector (&)

padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);

Choose a reason for hiding this comment

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

Commas in function arguments should be followed by one space

transform: rotate(90deg);
input[type=radio],
input[type=checkbox] {
position: absolute;

Choose a reason for hiding this comment

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

Properties should be ordered border, clip, height, margin, overflow, padding, position, width

& .accordion-header {
.icon {
transform: rotate(90deg);
input[type=radio],

Choose a reason for hiding this comment

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

Avoid qualifying attribute selectors with an element.

@balman balman changed the title add in more accessibilty-friendly accordion styles, update docs improve accordion accessibility May 2, 2018
@davestewart davestewart mentioned this pull request Sep 20, 2023
29 tasks
ma4nn added a commit to vianetz/spectre-css that referenced this pull request Sep 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants