feat(elements|ino-nav-drawer): accesibility improvements

packages/elements-angular/src/directives/proxies.ts

@@ -424,13 +424,13 @@ The event only emits if the property `clickable` is true.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['activated', 'autoFocus', 'disabled', 'filled', 'icon', 'type']
+  inputs: ['activated', 'attrs', 'autoFocus', 'disabled', 'filled', 'icon', 'type']
 })
 @Component({
   selector: 'ino-icon-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['activated', 'autoFocus', 'disabled', 'filled', 'icon', 'type']
+  inputs: ['activated', 'attrs', 'autoFocus', 'disabled', 'filled', 'icon', 'type']
 })
 export class InoIconButton {
   protected el: HTMLElement;
@@ -712,13 +712,13 @@ export declare interface InoNavDrawer extends Components.InoNavDrawer {
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['anchor', 'open', 'variant']
+  inputs: ['a11yLabels', 'anchor', 'open', 'variant']
 })
 @Component({
   selector: 'ino-nav-drawer',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['anchor', 'open', 'variant']
+  inputs: ['a11yLabels', 'anchor', 'open', 'variant']
 })
 export class InoNavDrawer {
   protected el: HTMLElement;

packages/elements-vue/src/proxies.ts

@@ -190,6 +190,7 @@ export const InoIcon = /*@__PURE__*/ defineContainer<JSX.InoIcon>('ino-icon', un
 
 
 export const InoIconButton = /*@__PURE__*/ defineContainer<JSX.InoIconButton>('ino-icon-button', undefined, [
+  'attrs',
   'autoFocus',
   'disabled',
   'activated',
@@ -323,6 +324,7 @@ export const InoNavDrawer = /*@__PURE__*/ defineContainer<JSX.InoNavDrawer>('ino
   'open',
   'anchor',
   'variant',
+  'a11yLabels',
   'openChange'
 ]);
 

packages/elements/src/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Alignment, ButtonType, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerVariant, SnackbarType, SpinnerType, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
+import { Alignment, ButtonType, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarType, SpinnerType, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types";
 import { Variants } from "./components/ino-button/ino-button";
 import { PickerTypeKeys } from "./components/ino-datepicker/picker-factory";
 import { Placement, Props } from "tippy.js";
@@ -481,6 +481,10 @@ export namespace Components {
           * Marks the icon button as activated.  Useful in cases where an external state controls the icon button activation. Makes the component **managed**.
          */
         "activated"?: boolean;
+        /**
+          * Allows the specification of native HTML attributes on the underlying HTML element
+         */
+        "attrs": JSXBase.HTMLAttributes<HTMLButtonElement> & Partial<ARIAMixin>;
         /**
           * Sets the autofocus for this element.
          */
@@ -819,6 +823,10 @@ export namespace Components {
         "placement": Placement;
     }
     interface InoNavDrawer {
+        /**
+          * The aria-labels used for content and fotter nav elements. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role.
+         */
+        "a11yLabels"?: NavDrawerLabels;
         /**
           * Side from which the drawer will appear. Possible values: `left` (default), `right`.
          */
@@ -2322,6 +2330,10 @@ declare namespace LocalJSX {
           * Marks the icon button as activated.  Useful in cases where an external state controls the icon button activation. Makes the component **managed**.
          */
         "activated"?: boolean;
+        /**
+          * Allows the specification of native HTML attributes on the underlying HTML element
+         */
+        "attrs"?: JSXBase.HTMLAttributes<HTMLButtonElement> & Partial<ARIAMixin>;
         /**
           * Sets the autofocus for this element.
          */
@@ -2683,6 +2695,10 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     interface InoNavDrawer {
+        /**
+          * The aria-labels used for content and fotter nav elements. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role.
+         */
+        "a11yLabels"?: NavDrawerLabels;
         /**
           * Side from which the drawer will appear. Possible values: `left` (default), `right`.
          */

packages/elements/src/components/ino-icon-button/ino-icon-button.tsx

@@ -14,6 +14,7 @@ import {
 import classNames from 'classnames';
 
 import { ButtonType } from '../types';
+import { JSXBase } from '@stencil/core/internal';
 
 /**
  * @slot default - `<ino-icon>`
@@ -30,6 +31,11 @@ export class IconButton implements ComponentInterface {
 
   @Element() el!: HTMLInoIconButtonElement;
 
+   /**
+   * Allows the specification of native HTML attributes on the underlying HTML element
+   */
+   @Prop() attrs: JSXBase.HTMLAttributes<HTMLButtonElement> & Partial<ARIAMixin>;
+
   /**
    * Sets the autofocus for this element.
    */
@@ -128,6 +134,7 @@ export class IconButton implements ComponentInterface {
           class={iconButtonClasses}
           disabled={this.disabled}
           type={this.type}
+          {...this.attrs}
         >
           <div class="mdc-icon-button__ripple"/>
           <span class="mdc-icon-button__icon">

packages/elements/src/components/ino-icon-button/readme.md

@@ -123,14 +123,15 @@ The component bubbles the native `click`-Event to the user.
 
 ## Properties
 
-| Property    | Attribute   | Description                                                                                                                                        | Type                              | Default     |
-| ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
-| `activated` | `activated` | Marks the icon button as activated.  Useful in cases where an external state controls the icon button activation. Makes the component **managed**. | `boolean`                         | `undefined` |
-| `autoFocus` | `autofocus` | Sets the autofocus for this element.                                                                                                               | `boolean`                         | `undefined` |
-| `disabled`  | `disabled`  | Disables this element.                                                                                                                             | `boolean`                         | `undefined` |
-| `filled`    | `filled`    | Styles this element as filled icon button with the `ino-color-scheme` as background color.                                                         | `boolean`                         | `undefined` |
-| `icon`      | `icon`      | The name of the icon of this element.                                                                                                              | `string`                          | `undefined` |
-| `type`      | `type`      | The type of this form.  Can either be `button`, `submit` or `reset`.                                                                               | `"button" \| "reset" \| "submit"` | `'button'`  |
+| Property    | Attribute   | Description                                                                                                                                        | Type                                                     | Default     |
+| ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ----------- |
+| `activated` | `activated` | Marks the icon button as activated.  Useful in cases where an external state controls the icon button activation. Makes the component **managed**. | `boolean`                                                | `undefined` |
+| `attrs`     | --          | Allows the specification of native HTML attributes on the underlying HTML element                                                                  | `HTMLAttributes<HTMLButtonElement> & Partial<ARIAMixin>` | `undefined` |
+| `autoFocus` | `autofocus` | Sets the autofocus for this element.                                                                                                               | `boolean`                                                | `undefined` |
+| `disabled`  | `disabled`  | Disables this element.                                                                                                                             | `boolean`                                                | `undefined` |
+| `filled`    | `filled`    | Styles this element as filled icon button with the `ino-color-scheme` as background color.                                                         | `boolean`                                                | `undefined` |
+| `icon`      | `icon`      | The name of the icon of this element.                                                                                                              | `string`                                                 | `undefined` |
+| `type`      | `type`      | The type of this form.  Can either be `button`, `submit` or `reset`.                                                                               | `"button" \| "reset" \| "submit"`                        | `'button'`  |
 
 
 ## Events
@@ -147,20 +148,6 @@ The component bubbles the native `click`-Event to the user.
 | `"default"` | `<ino-icon>` |
 
 
-## CSS Custom Properties
-
-| Name                                          | Description                                    |
-| --------------------------------------------- | ---------------------------------------------- |
-| `--ino-icon-button-background-active-color`   | base color of the active background            |
-| `--ino-icon-button-background-color`          | default color of the background                |
-| `--ino-icon-button-background-disabled-color` | base color of the background in disabled state |
-| `--ino-icon-button-icon-active-color`         | color of the active icon itself                |
-| `--ino-icon-button-icon-color`                | default color of the icon itself               |
-| `--ino-icon-button-icon-disabled-color`       | color of the icon itself in disabled state     |
-| `--ino-icon-button-icon-size`                 | size of the icon itself                        |
-| `--ino-icon-button-size`                      | size of the entire button                      |
-
-
 ## Dependencies
 
 ### Used by

packages/elements/src/components/ino-list-item/ino-list-item.tsx

@@ -116,7 +116,7 @@ export class ListItem implements ComponentInterface {
 
     return (
       <Host>
-        <li ref={(el) => (this.listItemEl = el)} class={listItemClasses} {...this.attrs}>
+        <li ref={(el) => (this.listItemEl = el)} class={listItemClasses} aria-disabled={this.disabled} {...this.attrs}>
           <span class="mdc-deprecated-list-item__ripple"></span>
           {leadingSlotHasContent && (
             <span class="mdc-deprecated-list-item__graphic" role="presentation">

packages/elements/src/components/ino-list-item/readme.md

@@ -73,22 +73,6 @@ document
 | `"trailing"`  | For the element to be appended                     |
 
 
-## CSS Custom Properties
-
-| Name                                                 | Description                                           |
-| ---------------------------------------------------- | ----------------------------------------------------- |
-| `--ino-list-item-deselected-background-color`        | Background color of a deselected list item            |
-| `--ino-list-item-deselected-background-color-active` | Background color of a deselected list item if active  |
-| `--ino-list-item-deselected-background-color-focus`  | Background color of a deselected list item if focused |
-| `--ino-list-item-deselected-background-color-hover`  | Background color of a deselected list item on hover   |
-| `--ino-list-item-deselected-color`                   | Text color of a deselected list item                  |
-| `--ino-list-item-selected-background-color`          | Background color of a selected list item              |
-| `--ino-list-item-selected-background-color-active`   | Background color of a selected list item if active    |
-| `--ino-list-item-selected-background-color-focus`    | Background color of a selected list item if focused   |
-| `--ino-list-item-selected-background-color-hover`    | Background color of a selected list item on hover     |
-| `--ino-list-item-selected-color`                     | Text color of a selected list item                    |
-
-
 ## Dependencies
 
 ### Used by

packages/elements/src/components/ino-nav-drawer/ino-nav-drawer.tsx

@@ -11,7 +11,7 @@ import {
   h,
   Listen,
 } from '@stencil/core';
-import { NavDrawerAnchor, NavDrawerVariant } from '../types';
+import { NavDrawerAnchor, NavDrawerVariant, NavDrawerLabels } from '../types';
 import classNames from 'classnames';
 
 /**
@@ -60,6 +60,17 @@ export class NavDrawer implements ComponentInterface {
    */
   @Prop() variant?: NavDrawerVariant = 'docked';
 
+  /**
+   * The aria-labels used for content and footer nav elements.
+   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role.
+   */
+  @Prop() a11yLabels?: NavDrawerLabels = {
+    content: 'Main Navigation',
+    footer: 'Footer Navigation',
+    toggleBtn: 'Toggle Navigation'
+  };
+
+
   componentDidLoad() {
     this.drawerInstance = new MDCDrawer(
       this.el.shadowRoot.querySelector('.mdc-drawer')
@@ -151,18 +162,21 @@ export class NavDrawer implements ComponentInterface {
           </slot>
         </div>
 
-        <nav class="mdc-drawer__content">
+        <nav class="mdc-drawer__content" aria-label={this.a11yLabels.content}>
           <slot name="content"></slot>
         </nav>
 
-        <div class="mdc-drawer__footer">
+        <nav class="mdc-drawer__footer" aria-label={this.a11yLabels.footer}>
           <slot name="footer"></slot>
           <ino-icon-button
             class="mdc-drawer__toggle"
             icon="arrow_right"
             onClick={this.toggleDrawer}
+            attrs={{
+              ariaLabel: this.a11yLabels.toggleBtn
+            }}
           />
-        </div>
+        </nav>
       </aside>
     );
 

packages/elements/src/components/ino-nav-drawer/readme.md

@@ -118,11 +118,12 @@ class MyComponent extends Component {
 
 ## Properties
 
-| Property  | Attribute | Description                                                                                    | Type                                   | Default    |
-| --------- | --------- | ---------------------------------------------------------------------------------------------- | -------------------------------------- | ---------- |
-| `anchor`  | `anchor`  | Side from which the drawer will appear. Possible values: `left` (default), `right`.            | `"left" \| "right"`                    | `'left'`   |
-| `open`    | `open`    | Marks this element as open. (**unmanaged**)                                                    | `boolean`                              | `false`    |
-| `variant` | `variant` | The variant to use for the drawer Possible values: `docked` (default), `dismissible`, `modal`. | `"dismissible" \| "docked" \| "modal"` | `'docked'` |
+| Property     | Attribute | Description                                                                                                                                      | Type                                                      | Default                                                                                                     |
+| ------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `a11yLabels` | --        | The aria-labels used for content and fotter nav elements. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role. | `{ content: string; footer: string; toggleBtn: string; }` | `{     content: 'Main Navigation',     footer: 'Footer Navigation',     toggleBtn: 'Toggle Navigation'   }` |
+| `anchor`     | `anchor`  | Side from which the drawer will appear. Possible values: `left` (default), `right`.                                                              | `"left" \| "right"`                                       | `'left'`                                                                                                    |
+| `open`       | `open`    | Marks this element as open. (**unmanaged**)                                                                                                      | `boolean`                                                 | `false`                                                                                                     |
+| `variant`    | `variant` | The variant to use for the drawer Possible values: `docked` (default), `dismissible`, `modal`.                                                   | `"dismissible" \| "docked" \| "modal"`                    | `'docked'`                                                                                                  |
 
 
 ## Events

packages/elements/src/components/ino-nav-item/readme.md

@@ -49,16 +49,6 @@ document
 | `"default"` | Any element |
 
 
-## CSS Custom Properties
-
-| Name                                     | Description                                   |
-| ---------------------------------------- | --------------------------------------------- |
-| `--ino-nav-item-background-color`        | Inactive color of the background of one item. |
-| `--ino-nav-item-background-color-active` | Active color of the background of one item.   |
-| `--ino-nav-item-color`                   | Inactive color of icon.                       |
-| `--ino-nav-item-color-active`            | Active color of icon.                         |
-
-
 ## Dependencies
 
 ### Depends on

packages/elements/src/components/types.ts

@@ -65,3 +65,4 @@ export type KeyValue = {
     value: string;
 };
 export type HeaderSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type NavDrawerLabels = {content: string, footer: string, toggleBtn: string}