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

Input Label Accessibility Updates #514

Closed
wants to merge 22 commits into from
Closed

Input Label Accessibility Updates #514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
8ce4ea4
add prettier
danparnella Nov 19, 2021
c7fd44a
add prettier scripts
danparnella Nov 19, 2021
01e065e
run format (only src files)
danparnella Nov 19, 2021
6c61365
run format-storybook (mostly story styles)
danparnella Nov 19, 2021
0de56e0
add format scripts to pre-commit
danparnella Nov 19, 2021
f37d3f9
linting
danparnella Nov 19, 2021
b653e66
v5.4.3
danparnella Nov 19, 2021
d9ddebd
add formatting to stories as well
danparnella Nov 19, 2021
686036d
run format-stories
danparnella Nov 19, 2021
25f60b5
swap fieldset for div
danparnella Nov 19, 2021
573062b
give every labeled field story input an id
danparnella Nov 19, 2021
5dc32fb
add aria props to input, update story with examples
danparnella Nov 19, 2021
8ba5a8e
update labeled field description to remove references to fieldset
danparnella Nov 19, 2021
1858ae7
Merge branch 'main' into inputs-aria-props
danparnella Jan 10, 2023
4c48452
re-remove files
danparnella Jan 10, 2023
944e125
revert additional merge changes
danparnella Jan 10, 2023
dbd3cd1
run prettier
danparnella Jan 10, 2023
8c268b3
create fieldset related components and use them in input group compon…
danparnella Mar 10, 2023
5d17b18
update styles
danparnella Mar 10, 2023
b82a3a6
remove legend style
danparnella Mar 10, 2023
f89d97f
v9.0.0
danparnella Mar 10, 2023
e492596
revert modifying input label, switch to fieldset legend
danparnella Mar 10, 2023
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
4 changes: 2 additions & 2 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ module.exports = {
'@storybook/addon-actions',
'@storybook/addon-a11y',
'@storybook/addon-storysource',
'@storybook/addon-viewport'
'@storybook/addon-viewport',
],
}
}
2 changes: 0 additions & 2 deletions .storybook/styles/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,8 @@ $output-bourbon-deprecation-warnings: false;
@import 'components/progress-circle';
@import 'components/login';
@import 'components/pagination';
@import 'components/sidebar-content';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I noticed a couple style files were no longer being used. Not sure if they should still be there for reference?

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm fine with deleting them!

@import 'components/radio';
@import 'components/tabs';

// Page Styles
@import 'pages/main';
@import 'pages/styleguide';
46 changes: 18 additions & 28 deletions .storybook/styles/components/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/*-----------------------
Fieldset
Field Wrappers
-----------------------*/
fieldset {
fieldset,
.field-wrapper {
Comment on lines +4 to +5
Copy link
Contributor Author

Choose a reason for hiding this comment

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

My hope is that this might ease some of the style changes (just swapping fieldset for .field-wrapper in stylesheets). Hopefully most projects can just find and replace in their stylesheets without too much auditing.

Copy link
Contributor

Choose a reason for hiding this comment

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

Can you add this documentation to a migration guide?

display: inline-block;
@include rem(margin-top, 15px);
position: relative;
Expand Down Expand Up @@ -85,6 +86,19 @@ Input Icon
.web-icon {
// background-image: asset-url("web.svg");
}

.input-wrapper {
position: relative;

i {
@include position(absolute, 3px null null 10px);
background-repeat: no-repeat;
background-size: 15px;
display: inline-block;
height: 20px;
width: 20px;
}
}
Comment on lines +90 to +101
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was included further down in a duplicate "Input Icon" section.

}

/*-----------------------
Expand Down Expand Up @@ -145,8 +159,7 @@ Radio
Checkbox
-----------------------*/
.checkbox {
@include rem(margin-top, 15px);
width: auto;
@include rem(margin-top, 3px);
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you explain this change?


label {
cursor: pointer;
Expand Down Expand Up @@ -402,29 +415,6 @@ Button Area
width: 135px;
}

/*-----------------------
Input Icon
-----------------------*/
.icon-label {
position: relative;
input {
@include rem(padding-left, 30px);
}

.input-wrapper {
position: relative;

i {
@include position(absolute, 3px null null 10px);
background-repeat: no-repeat;
background-size: 15px;
display: inline-block;
height: 20px;
width: 20px;
}
}
}

/*-----------------------
Custom Dropdown Select
-----------------------*/
Expand Down Expand Up @@ -567,7 +557,7 @@ Custom Dropdown Select
}
}

fieldset.checkbox,
.field-wrapper.checkbox,
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think this is a one-for-one change. If we have rules for fieldset.checkbox and fieldset.CheckboxGroup, then I believe we would additionally need field-wrapper.checkbox and field-wrapper.CheckboxGroup, eh?

fieldset.CheckboxGroup {
width: 100% !important;

Expand Down
107 changes: 0 additions & 107 deletions .storybook/styles/components/_sidebar-content.scss
View file
Open in desktop

This file was deleted.

53 changes: 0 additions & 53 deletions .storybook/styles/pages/_styleguide.scss
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions .storybook/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ module.exports = async ({ config }) => {
test: /\.story\.jsx?$/,
use: [
{
loader: require.resolve('@storybook/source-loader')
}
loader: require.resolve('@storybook/source-loader'),
},
],
enforce: 'pre',
})
Expand Down
Loading