Skip to content

Commit

Permalink
Fixed #3092 - Improve Dock implementation for Accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Oct 10, 2022
1 parent 08811b2 commit 49fbb9a
Show file tree
Hide file tree
Showing 48 changed files with 653 additions and 1,131 deletions.
50 changes: 50 additions & 0 deletions api-generator/components/dock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,55 @@ const DockProps = [
type: 'object',
default: 'null',
description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
},
{
name: 'listId',
type: 'string',
default: 'null',
description: 'Identifier of the list element.'
},
{
name: 'tabindex',
type: 'number',
default: '0',
description: 'Index of the element in tabbing order.'
},
{
name: 'aria-label',
type: 'string',
default: 'null',
description: 'Defines a string value that labels an interactive element.'
},
{
name: 'aria-labelledby',
type: 'string',
default: 'null',
description: 'Identifier of the underlying input element.'
}
];

const DockEvents = [
{
name: 'focus',
description: 'Callback to invoke when component receives focus.',
arguments: [
{
name: 'event',
type: 'object',
description: 'Browser event'
}
]
},
{
name: 'blur',
description: 'Callback to invoke when component loses focus.',
arguments: [
{
name: 'event',
type: 'object',
description: 'Browser event'
}
]
}
];

Expand All @@ -53,6 +102,7 @@ module.exports = {
name: 'Dock',
description: 'Dock is a navigation component consisting of menuitems.',
props: DockProps,
events: DockEvents,
slots: DockSlots
}
};
34 changes: 8 additions & 26 deletions public/themes/arya-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4417,13 +4417,21 @@
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.p-dock .p-dock-list-container .p-dock-list {
outline: none;
}
.p-dock .p-dock-item {
padding: 0.5rem;
}
.p-dock .p-dock-action {
width: 4rem;
height: 4rem;
}
.p-dock .p-dock-action.p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #93cbf9;
}
.p-dock.p-dock-top .p-dock-item-second-prev,
.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
.p-dock.p-dock-bottom .p-dock-item-second-next {
Expand Down Expand Up @@ -4642,14 +4650,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #93cbf9;
}
.p-menu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-menu .p-menuitem-link.p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.09);
}
.p-menu.p-menu-overlay {
background: #1e1e1e;
border: 1px solid #383838;
Expand Down Expand Up @@ -5153,24 +5153,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #93cbf9;
}
.p-tieredmenu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) {
background: rgba(100, 181, 246, 0.16);
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-text,
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-icon {
color: rgba(255, 255, 255, 0.87);
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled).p-focus {
background: rgba(100, 181, 246, 0.24);
}
.p-tieredmenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.09);
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #1e1e1e;
border: 1px solid #383838;
Expand Down
34 changes: 8 additions & 26 deletions public/themes/arya-green/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4417,13 +4417,21 @@
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.p-dock .p-dock-list-container .p-dock-list {
outline: none;
}
.p-dock .p-dock-item {
padding: 0.5rem;
}
.p-dock .p-dock-action {
width: 4rem;
height: 4rem;
}
.p-dock .p-dock-action.p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #a7d8a9;
}
.p-dock.p-dock-top .p-dock-item-second-prev,
.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
.p-dock.p-dock-bottom .p-dock-item-second-next {
Expand Down Expand Up @@ -4642,14 +4650,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #a7d8a9;
}
.p-menu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-menu .p-menuitem-link.p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.09);
}
.p-menu.p-menu-overlay {
background: #1e1e1e;
border: 1px solid #383838;
Expand Down Expand Up @@ -5153,24 +5153,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #a7d8a9;
}
.p-tieredmenu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) {
background: rgba(129, 199, 132, 0.16);
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-text,
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-icon {
color: rgba(255, 255, 255, 0.87);
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled).p-focus {
background: rgba(129, 199, 132, 0.24);
}
.p-tieredmenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.09);
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #1e1e1e;
border: 1px solid #383838;
Expand Down
34 changes: 8 additions & 26 deletions public/themes/arya-orange/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4417,13 +4417,21 @@
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.p-dock .p-dock-list-container .p-dock-list {
outline: none;
}
.p-dock .p-dock-item {
padding: 0.5rem;
}
.p-dock .p-dock-action {
width: 4rem;
height: 4rem;
}
.p-dock .p-dock-action.p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #ffe284;
}
.p-dock.p-dock-top .p-dock-item-second-prev,
.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
.p-dock.p-dock-bottom .p-dock-item-second-next {
Expand Down Expand Up @@ -4642,14 +4650,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #ffe284;
}
.p-menu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-menu .p-menuitem-link.p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.09);
}
.p-menu.p-menu-overlay {
background: #1e1e1e;
border: 1px solid #383838;
Expand Down Expand Up @@ -5153,24 +5153,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #ffe284;
}
.p-tieredmenu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) {
background: rgba(255, 213, 79, 0.16);
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-text,
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-icon {
color: rgba(255, 255, 255, 0.87);
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled).p-focus {
background: rgba(255, 213, 79, 0.24);
}
.p-tieredmenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.09);
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #1e1e1e;
border: 1px solid #383838;
Expand Down
34 changes: 8 additions & 26 deletions public/themes/arya-purple/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4417,13 +4417,21 @@
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.p-dock .p-dock-list-container .p-dock-list {
outline: none;
}
.p-dock .p-dock-item {
padding: 0.5rem;
}
.p-dock .p-dock-action {
width: 4rem;
height: 4rem;
}
.p-dock .p-dock-action.p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #cf95d9;
}
.p-dock.p-dock-top .p-dock-item-second-prev,
.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
.p-dock.p-dock-bottom .p-dock-item-second-next {
Expand Down Expand Up @@ -4642,14 +4650,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #cf95d9;
}
.p-menu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-menu .p-menuitem-link.p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.09);
}
.p-menu.p-menu-overlay {
background: #1e1e1e;
border: 1px solid #383838;
Expand Down Expand Up @@ -5153,24 +5153,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #cf95d9;
}
.p-tieredmenu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) {
background: rgba(186, 104, 200, 0.16);
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-text,
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-icon {
color: rgba(255, 255, 255, 0.87);
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled).p-focus {
background: rgba(186, 104, 200, 0.24);
}
.p-tieredmenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.09);
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #1e1e1e;
border: 1px solid #383838;
Expand Down
34 changes: 8 additions & 26 deletions public/themes/bootstrap4-dark-blue/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4429,13 +4429,21 @@
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.p-dock .p-dock-list-container .p-dock-list {
outline: none;
}
.p-dock .p-dock-item {
padding: 0.5rem;
}
.p-dock .p-dock-action {
width: 4rem;
height: 4rem;
}
.p-dock .p-dock-action.p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #e3f3fe;
}
.p-dock.p-dock-top .p-dock-item-second-prev,
.p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
.p-dock.p-dock-bottom .p-dock-item-second-next {
Expand Down Expand Up @@ -4654,14 +4662,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #e3f3fe;
}
.p-menu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-menu .p-menuitem-link.p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.12);
}
.p-menu.p-menu-overlay {
background: #2a323d;
border: 1px solid #3f4b5b;
Expand Down Expand Up @@ -5165,24 +5165,6 @@
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #e3f3fe;
}
.p-tieredmenu .p-menuitem-link:focus {
outline: none;
box-shadow: none;
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) {
background: #8dd0ff;
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-text,
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled) .p-menuitem-icon {
color: #151515;
}
.p-tieredmenu .p-menuitem-link.p-highlight:not(.p-disabled).p-focus {
background: #64bfff;
}
.p-tieredmenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.12);
}
.p-tieredmenu.p-tieredmenu-overlay {
background: #2a323d;
border: 1px solid #3f4b5b;
Expand Down
Loading

0 comments on commit 49fbb9a

Please sign in to comment.