improve accordion accessibility #437
Conversation
src/_accordions.scss
Outdated
| } | ||
| } | ||
|
|
||
| & .accordion-body { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
Unnecessary parent selector (&)
src/_accordions.scss
Outdated
| transform: rotate(90deg); | ||
| } | ||
| } | ||
|
|
src/_accordions.scss
Outdated
| &:checked ~, | ||
| &[open] { | ||
| & .accordion-header { | ||
| .icon { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 4
Nesting should be no greater than 4, but was 5
src/_accordions.scss
Outdated
| max-height: 50rem; | ||
| &:checked ~, | ||
| &[open] { | ||
| & .accordion-header { |
There was a problem hiding this comment.
Selector should have depth of applicability no greater than 2, but was 3
Unnecessary parent selector (&)
src/_accordions.scss
Outdated
| border: 0; | ||
|
|
||
| &:focus { | ||
| &+ label { |
src/_accordions.scss
Outdated
| padding: 0; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| clip: rect(0,0,0,0); |
There was a problem hiding this comment.
Commas in function arguments should be followed by one space
src/_accordions.scss
Outdated
| transform: rotate(90deg); | ||
| input[type=radio], | ||
| input[type=checkbox] { | ||
| position: absolute; |
There was a problem hiding this comment.
Properties should be ordered border, clip, height, margin, overflow, padding, position, width
src/_accordions.scss
Outdated
| & .accordion-header { | ||
| .icon { | ||
| transform: rotate(90deg); | ||
| input[type=radio], |
There was a problem hiding this comment.
Avoid qualifying attribute selectors with an element.
balman
changed the title
…hidden (similar to proposed solution in picturepan2#437)
Improves upon the issue described in #436.
Visibly hides
input[type=radio]andinput[type=checkbox]rather than suggesting use ofhiddenattribute, 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.