mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 17:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: updated implementation with proper roles and aria attributes

Browse source
This commit is contained in:
KiranMantha 2021-12-31 12:47:02 +05:30
parent 25d7c7983f
commit aaa4aebb2f
15 changed files with 81 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

34
css/pico.classless.css
View file

@ -2033,22 +2033,22 @@ progress::-moz-progress-bar {
background-position: -200% 0; background-position: -200% 0;
} }
} }
details[role=dropdown] { details[role=list] {
position: relative; position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
} }
details[role=dropdown] summary { details[role=list] summary {
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
} }
details[role=dropdown] summary::after { details[role=list] summary::after {
transform: rotate(0deg); transform: rotate(0deg);
} }
details[role=dropdown] summary + ul { details[role=list] summary + ul {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
top: auto; top: auto;
@ -2063,33 +2063,33 @@ details[role=dropdown] summary + ul {
background-color: var(--background-color); background-color: var(--background-color);
list-style: none; list-style: none;
} }
details[role=dropdown] summary + ul li { details[role=list] summary + ul li {
margin-bottom: 0; margin-bottom: 0;
} }
details[role=dropdown] summary + ul li::marker { details[role=list] summary + ul li::marker {
content: ""; content: "";
} }
details[role=dropdown] summary + ul li input[type=radio], details[role=list] summary + ul li input[type=radio],
details[role=dropdown] summary + ul li input[type=checkbox] { details[role=list] summary + ul li input[type=checkbox] {
display: none; display: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
details[role=dropdown] summary + ul li label { details[role=list] summary + ul li label {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
line-height: 1; line-height: 1;
} }
details[role=dropdown] summary + ul li label:hover { details[role=list] summary + ul li label:hover {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + ul li input:checked + label { details[role=list] summary + ul li input:checked + label {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + ul li input[type=checkbox] + label:before { details[role=list] summary + ul li input[type=checkbox] + label:before {
display: inline-block; display: inline-block;
width: calc(var(--spacing) * 1.2); width: calc(var(--spacing) * 1.2);
height: calc(var(--spacing) * 1.2); height: calc(var(--spacing) * 1.2);
@ -2099,24 +2099,24 @@ details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
content: ""; content: "";
vertical-align: text-bottom; vertical-align: text-bottom;
} }
details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before { details[role=list] summary + ul li input[type=checkbox]:checked + label:before {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-size: calc(var(--spacing) * 0.8) auto; background-size: calc(var(--spacing) * 0.8) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: var(--primary); background-color: var(--primary);
} }
details[role=dropdown][disabled] summary, details[role=dropdown].disabled summary { details[role=list][disabled] summary, details[role=list].disabled summary {
color: var(--muted-color); color: var(--muted-color);
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
details[role=dropdown][open] summary { details[role=list][open] summary {
margin-bottom: 0; margin-bottom: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
details[role=dropdown][open] summary::before { details[role=list][open] summary::before {
display: block; display: block;
z-index: 80; z-index: 80;
position: fixed; position: fixed;
@ -2128,7 +2128,7 @@ details[role=dropdown][open] summary::before {
content: " "; content: " ";
cursor: default; cursor: default;
} }
details[role=dropdown][open] summary::after { details[role=list][open] summary::after {
transform: rotate(180deg); transform: rotate(180deg);
} }

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

34
css/pico.css
View file

@ -2316,22 +2316,22 @@ progress::-moz-progress-bar {
background-position: -200% 0; background-position: -200% 0;
} }
} }
details[role=dropdown] { details[role=list] {
position: relative; position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
} }
details[role=dropdown] summary { details[role=list] summary {
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
} }
details[role=dropdown] summary::after { details[role=list] summary::after {
transform: rotate(0deg); transform: rotate(0deg);
} }
details[role=dropdown] summary + ul { details[role=list] summary + ul {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
top: auto; top: auto;
@ -2346,33 +2346,33 @@ details[role=dropdown] summary + ul {
background-color: var(--background-color); background-color: var(--background-color);
list-style: none; list-style: none;
} }
details[role=dropdown] summary + ul li { details[role=list] summary + ul li {
margin-bottom: 0; margin-bottom: 0;
} }
details[role=dropdown] summary + ul li::marker { details[role=list] summary + ul li::marker {
content: ""; content: "";
} }
details[role=dropdown] summary + ul li input[type=radio], details[role=list] summary + ul li input[type=radio],
details[role=dropdown] summary + ul li input[type=checkbox] { details[role=list] summary + ul li input[type=checkbox] {
display: none; display: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
details[role=dropdown] summary + ul li label { details[role=list] summary + ul li label {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
line-height: 1; line-height: 1;
} }
details[role=dropdown] summary + ul li label:hover { details[role=list] summary + ul li label:hover {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + ul li input:checked + label { details[role=list] summary + ul li input:checked + label {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + ul li input[type=checkbox] + label:before { details[role=list] summary + ul li input[type=checkbox] + label:before {
display: inline-block; display: inline-block;
width: calc(var(--spacing) * 1.2); width: calc(var(--spacing) * 1.2);
height: calc(var(--spacing) * 1.2); height: calc(var(--spacing) * 1.2);
@ -2382,24 +2382,24 @@ details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
content: ""; content: "";
vertical-align: text-bottom; vertical-align: text-bottom;
} }
details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before { details[role=list] summary + ul li input[type=checkbox]:checked + label:before {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-size: calc(var(--spacing) * 0.8) auto; background-size: calc(var(--spacing) * 0.8) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: var(--primary); background-color: var(--primary);
} }
details[role=dropdown][disabled] summary, details[role=dropdown].disabled summary { details[role=list][disabled] summary, details[role=list].disabled summary {
color: var(--muted-color); color: var(--muted-color);
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
details[role=dropdown][open] summary { details[role=list][open] summary {
margin-bottom: 0; margin-bottom: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
details[role=dropdown][open] summary::before { details[role=list][open] summary::before {
display: block; display: block;
z-index: 80; z-index: 80;
position: fixed; position: fixed;
@ -2411,7 +2411,7 @@ details[role=dropdown][open] summary::before {
content: " "; content: " ";
cursor: default; cursor: default;
} }
details[role=dropdown][open] summary::after { details[role=list][open] summary::after {
transform: rotate(180deg); transform: rotate(180deg);
} }

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

34
css/pico.fluid.classless.css
View file

@ -2003,22 +2003,22 @@ progress::-moz-progress-bar {
background-position: -200% 0; background-position: -200% 0;
} }
} }
details[role=dropdown] { details[role=list] {
position: relative; position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;
} }
details[role=dropdown] summary { details[role=list] summary {
margin-bottom: 0; margin-bottom: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
border: var(--border-width) solid var(--form-element-border-color); border: var(--border-width) solid var(--form-element-border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
} }
details[role=dropdown] summary::after { details[role=list] summary::after {
transform: rotate(0deg); transform: rotate(0deg);
} }
details[role=dropdown] summary + ul { details[role=list] summary + ul {
z-index: 100; z-index: 100;
position: absolute; position: absolute;
top: auto; top: auto;
@ -2033,33 +2033,33 @@ details[role=dropdown] summary + ul {
background-color: var(--background-color); background-color: var(--background-color);
list-style: none; list-style: none;
} }
details[role=dropdown] summary + ul li { details[role=list] summary + ul li {
margin-bottom: 0; margin-bottom: 0;
} }
details[role=dropdown] summary + ul li::marker { details[role=list] summary + ul li::marker {
content: ""; content: "";
} }
details[role=dropdown] summary + ul li input[type=radio], details[role=list] summary + ul li input[type=radio],
details[role=dropdown] summary + ul li input[type=checkbox] { details[role=list] summary + ul li input[type=checkbox] {
display: none; display: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
details[role=dropdown] summary + ul li label { details[role=list] summary + ul li label {
position: relative; position: relative;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: calc(var(--spacing) * 0.5); padding: calc(var(--spacing) * 0.5);
line-height: 1; line-height: 1;
} }
details[role=dropdown] summary + ul li label:hover { details[role=list] summary + ul li label:hover {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + ul li input:checked + label { details[role=list] summary + ul li input:checked + label {
background-color: var(--secondary-focus); background-color: var(--secondary-focus);
} }
details[role=dropdown] summary + ul li input[type=checkbox] + label:before { details[role=list] summary + ul li input[type=checkbox] + label:before {
display: inline-block; display: inline-block;
width: calc(var(--spacing) * 1.2); width: calc(var(--spacing) * 1.2);
height: calc(var(--spacing) * 1.2); height: calc(var(--spacing) * 1.2);
@ -2069,24 +2069,24 @@ details[role=dropdown] summary + ul li input[type=checkbox] + label:before {
content: ""; content: "";
vertical-align: text-bottom; vertical-align: text-bottom;
} }
details[role=dropdown] summary + ul li input[type=checkbox]:checked + label:before { details[role=list] summary + ul li input[type=checkbox]:checked + label:before {
background-image: var(--icon-checkbox); background-image: var(--icon-checkbox);
background-position: center; background-position: center;
background-size: calc(var(--spacing) * 0.8) auto; background-size: calc(var(--spacing) * 0.8) auto;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: var(--primary); background-color: var(--primary);
} }
details[role=dropdown][disabled] summary, details[role=dropdown].disabled summary { details[role=list][disabled] summary, details[role=list].disabled summary {
color: var(--muted-color); color: var(--muted-color);
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
details[role=dropdown][open] summary { details[role=list][open] summary {
margin-bottom: 0; margin-bottom: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
details[role=dropdown][open] summary::before { details[role=list][open] summary::before {
display: block; display: block;
z-index: 80; z-index: 80;
position: fixed; position: fixed;
@ -2098,7 +2098,7 @@ details[role=dropdown][open] summary::before {
content: " "; content: " ";
cursor: default; cursor: default;
} }
details[role=dropdown][open] summary::after { details[role=list][open] summary::after {
transform: rotate(180deg); transform: rotate(180deg);
} }

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

14
docs/dropdown.html
View file

File diff suppressed because one or more lines are too long

26
docs/src/dropdown.html
View file

@ -18,9 +18,9 @@
<h2>single / multi select dropdown, without JavaScript.</h2> <h2>single / multi select dropdown, without JavaScript.</h2>
</hgroup> </hgroup>
<article aria-label="Dropdown examples"> <article aria-label="Dropdown examples">
<details role="dropdown"> <details role="list">
<summary>Single select</summary> <summary aria-haspopup="listbox">Single select</summary>
<ul> <ul role="listbox">
<li> <li>
<input type="radio" id="01" name="option1" /> <input type="radio" id="01" name="option1" />
<label for="01">Option 1</label> <label for="01">Option 1</label>
@ -31,9 +31,9 @@
</li> </li>
</ul> </ul>
</details> </details>
<details role="dropdown"> <details role="list">
<summary>Multi-select</summary> <summary aria-haspopup="listbox">Multi-select</summary>
<ul> <ul role="listbox">
<li> <li>
<input type="checkbox" id="11" name="option2" /> <input type="checkbox" id="11" name="option2" />
<label for="11">Option 1</label> <label for="11">Option 1</label>
@ -50,7 +50,7 @@
<ul> <ul>
<li> <li>
in order to use dropdown component, use in order to use dropdown component, use
<code>role='dropdown'</code> on details tag. <code>role='list'</code> on details tag.
</li> </li>
<li> <li>
no need to use javascript to close the dropdown when clicked no need to use javascript to close the dropdown when clicked
@ -70,9 +70,9 @@
<code> <code>
<em>For Single-select</em> <em>For Single-select</em>
<em>===============================</em> <em>===============================</em>
&lt;<b>details role="dropdown"</b>&gt; &lt;<b>details role="list"</b>&gt;
&lt;<b>summary</b>&gt;Single select&lt;<b>/summary</b>&gt; &lt;<b>summary aria-haspopup="listbox"</b>&gt;Single select&lt;<b>/summary</b>&gt;
&lt;<b>ul</b>&gt; &lt;<b>ul role="listbox"</b>&gt;
&lt;<b>li</b>&gt; &lt;<b>li</b>&gt;
&lt;<b>input type="radio" id="01" name="option1" /</b>&gt; &lt;<b>input type="radio" id="01" name="option1" /</b>&gt;
&lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt; &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;
@ -87,9 +87,9 @@
<em>For Multi-select</em> <em>For Multi-select</em>
<em>===============================</em> <em>===============================</em>
&lt;<b>details role="dropdown"</b>&gt; &lt;<b>details role="list"</b>&gt;
&lt;<b>summary</b>&gt;Multi select&lt;<b>/summary</b>&gt; &lt;<b>summary aria-haspopup="listbox"</b>&gt;Multi select&lt;<b>/summary</b>&gt;
&lt;<b>ul</b>&gt; &lt;<b>ul role="listbox"</b>&gt;
&lt;<b>li</b>&gt; &lt;<b>li</b>&gt;
&lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt; &lt;<b>input type="checkbox" id="01" name="option1" /</b>&gt;
&lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt; &lt;<b>label for="01"</b>&gt;Option 1&lt;<b>/label</b>&gt;

2
scss/components/_dropdown.scss
View file

@ -1,4 +1,4 @@
details[role='dropdown'] { details[role='list'] {
position: relative; position: relative;
padding: 0; padding: 0;
border-bottom: none; border-bottom: none;