feat(components): implementa alternância no nível de acessibilidade

Implementa alternância no nível de acessibilidade dos componentes de formulário.

fixes DTHFUI-10108

src/css/commons/po-icon/po-icon-base.css

@@ -28,11 +28,24 @@ po-icon i {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.po-icon {
-  display: inline-block;
+.po-icon,
+.po-icon i,
+[data-a11y='AAA'] .po-icon-aa,
+[data-a11y='AAA'] .po-icon-aa i {
   font: normal normal normal 14px/1 PoIcon;
-  font-size: inherit;
+  font-size: var(--font-size-lg);
   text-rendering: auto;
+  vertical-align: middle;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.po-icon-aa,
+.po-icon-aa i {
+  font-size: var(--font-size-default);
+}
+
+.po-icon-large,
+.po-icon-large i {
+  font-size: var(--font-size-xl);
+}

src/css/commons/po-icon/po-icon.html

@@ -8,10 +8,6 @@
     list-style: none;
     padding: 8px;
   }
-
-  .po-icon {
-    font-size: 24px;
-  }
 </style>
 
 <article>

src/css/components/po-button/po-button.css

@@ -2,20 +2,20 @@ po-button {
   display: inline-block;
 }
 
-.po-button {
+.po-button,
+[data-a11y='AAA'] .po-button-aa {
   font-family: var(--font-family);
   font-weight: var(--font-weight, var(--font-weight-bold));
   font-size: var(--font-size, var(--font-size-default));
   line-height: var(--line-height, var(--line-height-none));
   border-radius: var(--border-radius, var(--border-radius-md));
   border-width: var(--border-width, var(--border-width-md));
-  padding: var(--padding, 0 1em);
+  padding-inline: var(--padding, var(--spacing-sm));
 
   letter-spacing: var(--letter-spacing-auto);
   border-style: solid;
-  min-height: 2.75em;
+  min-height: var(--target-size-aaa);
   cursor: pointer;
-  min-width: 2.75em;
   display: inline-flex;
   align-items: center;
 }
@@ -53,7 +53,7 @@ po-button {
 
 .po-button:focus-visible,
 .po-button:enabled:focus-visible {
-  outline-width: var(--outline-width-focus-visible);
+  outline-width: var(--outline-width);
 }
 
 .po-button[p-kind='secondary'] {
@@ -145,20 +145,24 @@ po-button {
 .po-button[p-kind='secondary']:disabled {
   color: var(--color-disabled);
   border-color: var(--color-disabled);
-
   background-color: var(--background-color-disabled);
 }
 
 .po-button[p-kind='tertiary']:disabled {
   color: var(--color-disabled);
-
   background-color: var(--background-color-disabled);
 }
 
-.po-button[p-size='large'] {
-  padding: var(--padding, 0 1.5em);
+.po-button-aa {
+  font-size: var(--font-size, var(--font-size-sm));
+  padding-inline: var(--padding, var(--spacing-xs));
+  min-height: var(--target-size-aa);
+}
 
-  min-height: 3.5em;
+.po-button-large {
+  font-size: var(--font-size, var(--font-size-lg));
+  padding-inline: var(--padding, var(--spacing-md));
+  min-height: var(--spacing-3xl);
 }
 
 [class*='po-xl-'],
@@ -170,8 +174,19 @@ po-button {
   }
 }
 
-.po-button-icon {
+.po-button-icon,
+[data-a11y='AAA'] .po-button-icon-aa {
   vertical-align: middle;
+  font-size: var(--font-size, var(--font-size-lg));
+}
+
+.po-button-icon-aa {
+  font-size: var(--font-size, var(--font-size-default));
+  min-height: var(--target-size-aa);
+}
+
+.po-button-icon-large {
+  font-size: var(--font-size, var(--font-size-xl));
 }
 
 .po-button-label {

src/css/components/po-dropdown/po-dropdown.css

@@ -1,31 +1,42 @@
-.po-dropdown {
+.po-dropdown,
+[data-a11y='AAA'] .po-dropdown-aa {
   font-family: var(--font-family);
   font-weight: var(--font-weight);
-  font-size: var(--font-size);
+  font-size: var(--font-size, var(--font-size-default));
   line-height: var(--line-height);
   display: inline-block;
   position: relative;
   width: inherit;
   border-radius: var(--border-radius);
 }
 
+.po-dropdown-aa {
+  font-size: var(--font-size, var(--font-size-sm));
+}
+
 .po-dropdown[disabled='true'] {
   cursor: not-allowed;
 }
 
-.po-dropdown-button {
+.po-dropdown-button,
+[data-a11y='AAA'] .po-dropdown-button-aa {
   background-color: var(--background);
   border: solid var(--border-width) var(--color);
   border-radius: var(--border-radius);
   color: var(--color);
   cursor: pointer;
-  height: 44px;
-  padding: var(--padding, 0 1em);
+  min-height: var(--target-size-aaa);
+  padding-inline: var(--padding, var(--font-size-sm));
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
+.po-dropdown-button-aa {
+  min-height: var(--target-size-aa);
+  padding-inline: var(--padding, var(--spacing-xs));
+}
+
 .po-dropdown-button:hover {
   border: solid var(--border-width) var(--color-hover);
   color: var(--color-hover);
@@ -62,7 +73,13 @@
   color: var(--color-dropdown-button-color-hover, var(--color-hover));
 }
 
-.po-dropdown-icon {
-  font-size: calc(var(--font-size) + 8px);
+.po-dropdown-icon,
+[data-a11y='AAA'] .po-dropdown-icon-aa {
+  font-size: var(--font-size-lg);
   margin-left: 0.5em;
+  display: flex;
+}
+
+.po-dropdown-icon-aa {
+  font-size: var(--font-size-default);
 }

src/css/components/po-field/po-checkbox/po-checkbox.css

@@ -1,4 +1,5 @@
-.po-checkbox {
+.po-checkbox,
+[data-a11y='AAA'] .po-checkbox-aa {
   width: 24px;
   height: 24px;
   box-sizing: border-box;
@@ -14,24 +15,30 @@
   min-height: 24px;
   cursor: pointer;
   position: relative;
-  align-self: flex-start;
 }
 
-.po-checkbox-poicon {
-  font-family: PoIcon !important;
-}
-
-.po-checkbox-phosphor {
-  font-family: Animalia !important;
+.po-checkbox-aa {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
 }
 
-[p-size='large'] .po-checkbox {
+.po-checkbox-large {
   width: 32px;
   height: 32px;
   min-width: 32px;
   min-height: 32px;
 }
 
+.po-checkbox-poicon {
+  font-family: PoIcon !important;
+}
+
+.po-checkbox-phosphor {
+  font-family: Animalia !important;
+}
+
 .po-checkbox:hover {
   border-color: var(--color-hover);
   box-shadow: 0 0 0 4px var(--shadow-color-hover);
@@ -50,12 +57,25 @@
 }
 
 .po-checkbox-outline:is(:focus-visible) {
-  outline-width: var(--outline-width-focus-visible);
+  outline-width: var(--outline-width);
 }
 
-.po-checkbox-outline {
+.po-checkbox-outline,
+[data-a11y='AAA'] .po-checkbox-outline-aa {
   display: flex;
   align-items: center;
+  height: 24px;
+  min-height: 24px;
+}
+
+.po-checkbox-outline-aa {
+  height: 16px;
+  min-height: 16px;
+}
+
+.po-checkbox-outline-large {
+  height: 32px;
+  min-height: 32px;
 }
 
 [aria-checked='true'].po-checkbox,
@@ -86,7 +106,7 @@
 
 .container-po-checkbox {
   display: flex;
-  min-height: 24px;
+  min-height: 16px;
   align-items: center;
 }