Skip to content

feat: Implement WCAG 2.2 accessibility compliance improvements #3

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

Open
devin-ai-integration wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Implement WCAG 2.2 accessibility compliance improvements #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
70 changes: 35 additions & 35 deletions public/v1/lib/adminlte/css/AdminLTE.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1314,15 +1314,15 @@ a:focus {
color: #00a65a;
}
.form-group.has-warning label {
color: #f39c12;
color: #B8860B;
}
.form-group.has-warning .form-control,
.form-group.has-warning .input-group-addon {
border-color: #f39c12;
border-color: #B8860B;
box-shadow: none;
}
.form-group.has-warning .help-block {
color: #f39c12;
color: #B8860B;
}
.form-group.has-error label {
color: #dd4b39;
Expand Down Expand Up @@ -1466,7 +1466,7 @@ a:focus {
}
.progress-bar-aqua,
.progress-bar-info {
background-color: #00c0ef;
background-color: #0066CC;
}
.progress-striped .progress-bar-aqua,
.progress-striped .progress-bar-info {
Expand All @@ -1476,7 +1476,7 @@ a:focus {
}
.progress-bar-yellow,
.progress-bar-warning {
background-color: #f39c12;
background-color: #B8860B;
}
.progress-striped .progress-bar-yellow,
.progress-striped .progress-bar-warning {
Expand Down Expand Up @@ -1589,13 +1589,13 @@ a:focus {
border-top-color: #3c8dbc;
}
.box.box-info {
border-top-color: #00c0ef;
border-top-color: #0066CC;
}
.box.box-danger {
border-top-color: #dd4b39;
}
.box.box-warning {
border-top-color: #f39c12;
border-top-color: #B8860B;
}
.box.box-success {
border-top-color: #00a65a;
Expand Down Expand Up @@ -1663,8 +1663,8 @@ a:focus {
}
.box.box-solid.box-info > .box-header {
color: #fff;
background: #00c0ef;
background-color: #00c0ef;
background: #0066CC;
background-color: #0066CC;
}
.box.box-solid.box-info > .box-header a,
.box.box-solid.box-info > .box-header .btn {
Expand All @@ -1687,8 +1687,8 @@ a:focus {
}
.box.box-solid.box-warning > .box-header {
color: #fff;
background: #f39c12;
background-color: #f39c12;
background: #B8860B;
background-color: #B8860B;
}
.box.box-solid.box-warning > .box-header a,
.box.box-solid.box-warning > .box-header .btn {
Expand Down Expand Up @@ -1969,10 +1969,10 @@ a:focus {
border-left-color: #dd4b39;
}
.todo-list .warning {
border-left-color: #f39c12;
border-left-color: #B8860B;
}
.todo-list .info {
border-left-color: #00c0ef;
border-left-color: #0066CC;
}
.todo-list .success {
border-left-color: #00a65a;
Expand Down Expand Up @@ -2298,8 +2298,8 @@ a:focus {
background-color: #008d4c;
}
.btn-info {
background-color: #00c0ef;
border-color: #00acd6;
background-color: #0066CC;
border-color: #0052A3;
}
.btn-info:hover,
.btn-info:active,
Expand All @@ -2316,8 +2316,8 @@ a:focus {
background-color: #d73925;
}
.btn-warning {
background-color: #f39c12;
border-color: #e08e0b;
background-color: #B8860B;
border-color: #9A7209;
}
.btn-warning:hover,
.btn-warning:active,
Expand Down Expand Up @@ -2611,13 +2611,13 @@ a:focus {
border-top-color: #3c8dbc;
}
.nav-tabs-custom.tab-info > .nav-tabs > li.active {
border-top-color: #00c0ef;
border-top-color: #0066CC;
}
.nav-tabs-custom.tab-danger > .nav-tabs > li.active {
border-top-color: #dd4b39;
}
.nav-tabs-custom.tab-warning > .nav-tabs > li.active {
border-top-color: #f39c12;
border-top-color: #B8860B;
}
.nav-tabs-custom.tab-success > .nav-tabs > li.active {
border-top-color: #00a65a;
Expand Down Expand Up @@ -2951,14 +2951,14 @@ table.text-center th {
.alert-warning,
.label-warning,
.modal-warning .modal-body {
background-color: #f39c12 !important;
background-color: #B8860B !important;
}
.bg-aqua,
.callout.callout-info,
.alert-info,
.label-info,
.modal-info .modal-body {
background-color: #00c0ef !important;
background-color: #0066CC !important;
}
.bg-blue {
background-color: #0073b7 !important;
Expand Down Expand Up @@ -3066,10 +3066,10 @@ table.text-center th {
color: #dd4b39 !important;
}
.text-yellow {
color: #f39c12 !important;
color: #B8860B !important;
}
.text-aqua {
color: #00c0ef !important;
color: #0066CC !important;
}
.text-blue {
color: #0073b7 !important;
Expand Down Expand Up @@ -3196,21 +3196,21 @@ table.text-center th {
color: #fff;
}
.bg-aqua-gradient {
background: #00c0ef !important;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00c0ef), color-stop(1, #14d1ff)) !important;
background: -ms-linear-gradient(bottom, #00c0ef, #14d1ff) !important;
background: -moz-linear-gradient(center bottom, #00c0ef 0%, #14d1ff 100%) !important;
background: -o-linear-gradient(#14d1ff, #00c0ef) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#14d1ff', endColorstr='#00c0ef', GradientType=0) !important;
background: #0066CC !important;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0066CC), color-stop(1, #3399FF)) !important;
background: -ms-linear-gradient(bottom, #0066CC, #3399FF) !important;
background: -moz-linear-gradient(center bottom, #0066CC 0%, #3399FF 100%) !important;
background: -o-linear-gradient(#3399FF, #0066CC) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3399FF', endColorstr='#0066CC', GradientType=0) !important;
color: #fff;
}
.bg-yellow-gradient {
background: #f39c12 !important;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f39c12), color-stop(1, #f7bc60)) !important;
background: -ms-linear-gradient(bottom, #f39c12, #f7bc60) !important;
background: -moz-linear-gradient(center bottom, #f39c12 0%, #f7bc60 100%) !important;
background: -o-linear-gradient(#f7bc60, #f39c12) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7bc60', endColorstr='#f39c12', GradientType=0) !important;
background: #B8860B !important;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #B8860B), color-stop(1, #DAA520)) !important;
background: -ms-linear-gradient(bottom, #B8860B, #DAA520) !important;
background: -moz-linear-gradient(center bottom, #B8860B 0%, #DAA520 100%) !important;
background: -o-linear-gradient(#DAA520, #B8860B) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DAA520', endColorstr='#B8860B', GradientType=0) !important;
color: #fff;
}
.bg-purple-gradient {
Expand Down
36 changes: 35 additions & 1 deletion resources/assets/v2/src/sass/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,41 @@ $success: #64B624 !default;


// some local CSS
.skip-links {display: none;}
.skip-links {
position: absolute;
top: -40px;
left: 6px;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
z-index: 1000;
border-radius: 4px;
font-weight: bold;
border: 2px solid #fff;
}
.skip-links:focus {
top: 6px;
outline: 2px solid #ffff00;
outline-offset: 2px;
}

/* Enhanced focus states for better keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid #0066CC;
outline-offset: 2px;
}

/* Ensure focus is visible on interactive elements */
.btn:focus,
.form-control:focus,
.nav-link:focus {
box-shadow: 0 0 0 2px #0066CC;
}

/*
Remove bottom margin from unstyled lists
Expand Down
13 changes: 12 additions & 1 deletion resources/views/form/amount.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,12 @@
TODO REPLACE ME
<div class="{{ classes }}" id="{{ name }}_holder">
<label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>

<div class="col-sm-8">
<div class="input-group">
{{ Html.input('number', name, value).id(options.id).class('form-control').attribute('step', 'any').attribute('autocomplete','off').attribute('min', options.min).attribute('max', options.max).attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false') }}
<div class="input-group-addon" aria-label="{{ 'currency_symbol'|_ }}">{{ currency.symbol }}</div>
</div>
{% include 'form.help' %}
{% include 'form.feedback' %}
</div>
</div>
2 changes: 1 addition & 1 deletion resources/views/form/checkbox.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div class="{% if options.small %}col-sm-4{% else %}col-sm-8{% endif %}">
<div class="checkbox">
<label>
{{ Html.checkbox(name, options.checked, value).id(options.id) }}
{{ Html.checkbox(name, options.checked, value).id(options.id).attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false') }}
</label>
</div>
{% include 'form.help' %}
Expand Down
6 changes: 3 additions & 3 deletions resources/views/form/date.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

<div class="col-sm-8">
<div class="input-group">
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
<div class="input-group-addon" aria-label="{{ 'calendar_icon'|_ }}">
<span class="fa fa-calendar" aria-hidden="true"></span>
</div>
{{ Html.input('date', name, value).id(options.id).class('form-control').attribute('autocomplete','off').attribute('spellcheck','false')
.attribute('min', options.min)
.attribute('min', options.min).attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false')
}}
</div>
{% include 'form.help' %}
Expand Down
4 changes: 2 additions & 2 deletions resources/views/form/feedback.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% if errors.has(name) %}
<span class="form-control-feedback"><span class="fa fa-fw fa-remove"></span></span>
<p class="text-danger">{{ errors.first(name) }}</p>
<span class="form-control-feedback"><span class="fa fa-fw fa-remove" aria-hidden="true"></span></span>
<p class="text-danger" id="{{ name }}_error" role="alert">{{ errors.first(name) }}</p>
{% endif %}
2 changes: 1 addition & 1 deletion resources/views/form/help.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{% if options.helpText %}
<p class="help-block">{{ options.helpText|raw }}</p>
<p class="help-block" id="{{ name }}_help">{{ options.helpText|raw }}</p>
{% endif %}
2 changes: 1 addition & 1 deletion resources/views/form/integer.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>

<div class="col-sm-8">
{{ Html.input('number', name, value).id(options.id).attribute('step',options.step).attribute('autocomplete','off').attribute('spellcheck', 'false').class('form-control').attribute('placeholder',options.placeholder) }}
{{ Html.input('number', name, value).id(options.id).attribute('step',options.step).attribute('autocomplete','off').attribute('spellcheck', 'false').class('form-control').attribute('placeholder',options.placeholder).attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false') }}
{% include 'form.help' %}
{% include 'form.feedback' %}
</div>
Expand Down
10 changes: 9 additions & 1 deletion resources/views/form/number.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,9 @@
TODO REMOVE ME
<div class="{{ classes }}" id="{{ name }}_holder">
<label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>

<div class="col-sm-8">
{{ Html.input('number', name, value).id(options.id).class('form-control').attribute('step', 'any').attribute('autocomplete','off').attribute('min', options.min).attribute('max', options.max).attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false') }}
{% include 'form.help' %}
{% include 'form.feedback' %}
</div>
</div>
2 changes: 1 addition & 1 deletion resources/views/form/password.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>

<div class="col-sm-8">
{{ Html.input('password', name, value).id(options.id).class('form-control').attribute('placeholder',options.placeholder).attribute('autocomplete','off').attribute('spellcheck','false') }}
{{ Html.input('password', name, value).id(options.id).class('form-control').attribute('placeholder',options.placeholder).attribute('autocomplete','off').attribute('spellcheck','false').attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false') }}
{% include 'form.help' %}
{% include 'form.feedback' %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/form/select.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>

<div class="col-sm-8">
{{ Html.select(name, list, selected).id(options.id).class('form-control').attribute('autocomplete','off').attribute('spellcheck','false').attribute('placeholder', options.placeholder) }}
{{ Html.select(name, list, selected).id(options.id).class('form-control').attribute('autocomplete','off').attribute('spellcheck','false').attribute('placeholder', options.placeholder).attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false') }}
{% include 'form.help' %}
{% include 'form.feedback' %}

Expand Down
2 changes: 1 addition & 1 deletion resources/views/form/text.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>

<div class="col-sm-8">
{{ Html.input('text', name, value).id(options.id).class('form-control').attribute('autocomplete','off').attribute('spellcheck','false').attribute('placeholder',options.placeholder) }}
{{ Html.input('text', name, value).id(options.id).class('form-control').attribute('autocomplete','off').attribute('spellcheck','false').attribute('placeholder',options.placeholder).attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false') }}
{% include 'form.help' %}
{% include 'form.feedback' %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/form/textarea.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<label for="{{ options.id }}" class="col-sm-4 control-label">{{ label }}</label>

<div class="col-sm-8">
{{ Html.textarea(name, value).id(options.id).attribute('rows', options.rows).class('form-control').attribute('autocomplete','off').attribute('spellcheck','false').attribute('placeholder',options.placeholder) }}
{{ Html.textarea(name, value).id(options.id).attribute('rows', options.rows).class('form-control').attribute('autocomplete','off').attribute('spellcheck','false').attribute('placeholder',options.placeholder).attribute('aria-describedby', options.helpText ? name ~ '_help' : '').attribute('aria-invalid', errors.has(name) ? 'true' : 'false') }}
{% include 'form.help' %}
{% include 'form.feedback' %}
</div>
Expand Down
Loading