Old Versions Breaking Changes - SAP/fundamental-styles GitHub Wiki

Class naming of the Switch component has been changed:

.fd-switch__label
    .fd-switch__text
    .fd-switch
        .fd-switch__input
        .fd-switch__wrapper
            .fd-switch__track
                .fd-switch__icon
                .fd-switch__handle

.fd-switch
    .fd-switch__text
    .fd-switch__control
        .fd-switch__input
        .fd-switch__slider
            .fd-switch__track
                .fd-switch__icon
                .fd-switch__handle

.fd-message-box--no-icon modifier class is removed. Now by default Message Boxes do not have icons.

Semantic icons are added separately:

Before:

<header class="fd-bar fd-bar--header fd-message-box__header">
    <div class="fd-bar__left">
        <div class="fd-bar__element">
             <h2 class="fd-title fd-title--h5">Warning</h2>
        </div>
    </div>
</header>

Now:

<header class="fd-bar fd-bar--header fd-message-box__header">
    <div class="fd-bar__left">
        <div class="fd-bar__element">
             <i class="sap-icon--message-warning"></i>
             <h2 class="fd-title fd-title--h5">Warning</h2>
        </div>
    </div>
</header>

fd-form-group__header and fd-form-group__header-text added to give form groups a label.

Remove modifier class fd-dynamic-page__collapsible-header-container--collapsed

Remove component Inline Help

Remove component localization editor and classes fd-localization-editor, fd-localization-editor__language

Remove component form select and related classes fd-form-select

Breadcrub expand icon requires to sap-icon--slim-arrow-down class to add an icon

fd-col--full modifier added

fd-title element has been introduced inside:

• ActionBar: Before:

  <h3 class="fd-action-bar__title">Page Title</h3>

After:

<div class="fd-action-bar__title">
    <h1 class="fd-title fd-title--h3">Page Title</h1>
</div>

• Dialog: Before: <h3 class="fd-dialog__title"> After: <h3 class="fd-title fd-title--h5">
• Layout Panel:

Before:

<h3 class="fd-layout-panel__title">
  .fd-layout-panel__title
</h3>

After:

<div class="fd-layout-panel__title">
    <h3 class="fd-title fd-title--h5">
        .fd-layout-panel__title
    </h3>
</div>

• Message Box Before: class="fd-message-box__title" After: class="fd-title fd-title--h5"

Before:

<button aria-label="close button" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-close"></button>
<button aria-label="indicator button" tabindex="-1" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-indicator"></button>

After:

<button aria-label="close button" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-close">
    <i class="sap-icon--decline" role="presentation"></i>
</button>
<button aria-label="indicator button" tabindex="-1" class="fd-button fd-button--compact fd-button--transparent fd-tile__action-indicator">
    <i class="sap-icon--overflow" role="presentation"></i>
</button>

Update Avatar markup reflecting the latest markup for Avatar. More info here.

move the icon as a separate element

Before:

<span class="fd-avatar fd-avatar--xs sap-icon--washing-machine" role="presentation"></span>

After:

<span class="fd-avatar fd-avatar--xs" role="presentation">
    <i role="presentation" class="fd-avatar__icon sap-icon--washing-machine"></i>
</span>

A11y changes had been changed to and aria-hidden to role="presentation" Before:

<span aria-hidden="true" class="fd-nested-list__icon sap-icon--employee"></span>

After:

<i role="presentation" class="fd-nested-list__icon sap-icon--employee"></i>

There is added 1 new element fd-object-marker__text. A11y role="presentation" for icons with text and aria-label attribute for standalone icons

Before:

<span class="fd-object-marker">
    <i class="sap-icon--user-edit fd-object-marker__icon"></i>
    Draft
</span>

After:

<div class="fd-object-marker">
    <i class="fd-object-marker__icon sap-icon--user-edit" role="presentation"></i>
    <span class="fd-object-marker__text">Draft</span>
</div>

There are 2 new elements fd-object-status__icon and fd-object-status__text

It brought breaking change:

Before:

<span class="fd-object-status sap-icon--to-be-negative">Negative</span>

After:

<span class="fd-object-status fd-object-status--negative">
    <i class="fd-object-status__icon sap-icon--status-negative" role="presentation"></i>
    <span class="fd-object-status__text">Negative</span>
</span>

A11Y changes

Before:

<span class="fd-switch__icon--off fd-switch__icon sap-icon--decline"></span>

After:

<i role="presentation" class="fd-product-switch__icon sap-icon--home"></i>

Icons have been moved to another <i> element Before:

<span class="fd-tabs__icon sap-icon--cart">
    <p class="fd-tabs__count">15</p>
</span>

After:

<span class="fd-tabs__icon">
  <i class="sap-icon--cart" role="presentation"></i>
  <p class="fd-tabs__count">15</p>
</span>

Before:

<button class="fd-button fd-button--transparent fd-button--compact fd-tabs__overflow" aria-label="See More"></button>

After:

<button class="fd-button fd-button--transparent fd-button--compact fd-tabs__overflow" aria-label="See More">
        <i class="sap-icon--slim-arrow-down" role="presentation"></i>
</button>

Icons have been moved to another <i> element Before:

<button tabindex="0" class="fd-tree__expander" aria-label="Expander"></button>

After:

<button tabindex="0" class="fd-tree__expander" aria-label="Expander">
     <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
</button> 

Removed classes: fd-notification--information, fd-notification--success, fd-notification--warning, fd-notification--error.

Adds a div node for screen reader accessibility and adjusted aria attributes on the input.

Before:

<div class="fd-form-item">
    <div class="fd-file-uploader">
        <input 
          class="fd-input fd-file-uploader__input" 
          onclick="browseFile('input1');" 
          title="Select a file for uploading" 
          aria-label="Select a file for uploading"
          aria-live="polite"
          autocomplete="off"
          type="text" 
          id="browse_input1" 
          placeholder=" Choose a file for upload" 
          tabindex="-1"
          readonly>
        <button 
          class="fd-button"
          onclick="browseFile('input1');" 
          tabindex="0"
          id="file-uploader-button-1" 
          aria-label="Select a file for uploading">Browse...
        </button>
    </div>
    <input
      id="input1"
      class="fd-file-uploader__hidden"
      type="file"
      onchange="selectFile(this,'browse_input1')">
</div>

After:

  <div class="fd-file-uploader">
    <input
      aria-label="File upload"
      class="fd-input fd-file-uploader__input" 
      onclick="browseFile('input1');" 
      title="Choose a file for upload" 
      type="text" 
      id="browse_input1" 
      autocomplete="off"
      placeholder="Choose a file for upload"
      readonly>
    <button 
      class="fd-button"
      onclick="browseFile('input1');" 
      id="file-uploader-button-1" 
      aria-label="Select a file for uploading">Browse...
    </button>
  </div>
  <div class="fd-file-uploader__hidden" aria-live="polite" aria-atomic="true"></div>
  <input
    id="input1"
    class="fd-file-uploader__hidden"
    type="file"
    onchange="selectFile(this,'browse_input1')">

Convert the title from h5 to h4

Before:

<h5 class="fd-panel__title" id="asdASD123">Panel Header</h5>

After:

<h4 class="fd-panel__title" id="asdASD123">Panel Header</h4>

Remove incorrect scope attribute on td for navigatable rows

Before:

<td class="fd-table__cell fd-table__cell--fit-content" scope="col">
    <button aria-label="navigation" class="fd-button fd-button--transparent">
        <i class="sap-icon--navigation-right-arrow"></i>
    </button>
</td>

After:

<td class="fd-table__cell fd-table__cell--fit-content">
    <button aria-label="navigation" class="fd-button fd-button--transparent">
        <i class="sap-icon--navigation-right-arrow"></i>
    </button>
</td>

Update mega menu example - add <i> for the icon

Before:

<button class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu" onclick="onPopoverClick('9GLB26941');" aria-controls="9GLB26941" aria-haspopup="true" aria-expanded="false">
  <span class="fd-shellbar__title">Corporate Portal</span>
</button>

After:

<button class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu" onclick="onPopoverClick('9GLB26941');" aria-controls="9GLB26941" aria-haspopup="true" aria-expanded="false">
  <span class="fd-shellbar__title">Corporate Portal</span>
  <i class="sap-icon--megamenu fd-shellbar__button--icon"></i>
</button>

Before:

<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="ZvPBg609" aria-label="Close"></button>

After:

<button class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close" aria-controls="ZvPBg609" aria-label="Close">
  <i class="sap-icon--decline"></i>
</button>

remove class fd-calendar__close-button in calendar and datepicker Before:

<button type="button" class="fd-button fd-button--transparent fd-calendar__close-button fd-calendar__close-button--navigation" aria-label="Close"></button>

After:

<button type="button" class="fd-button fd-button--transparent fd-calendar__close-button--navigation" aria-label="Close">
  <i class="sap-icon--decline"></i>
</button>

The button's markup with icon has been changed.

Before:

<button class="fd-button sap-icon--*"></button>

After:

<button class="fd-button">
    <i class=sap-icon--*></i>
</button>

Menu Button

• The icon is a separate <i> element
• The text is wrapped in a <span> with class fd-button__text

Before:

<button class="fd-button fd-button--menu">Action Button</button>

<button class="fd-button fd-button--menu sap-icon--cart"></button>

After:

<button class="fd-button fd-button--menu">
    <span class="fd-button__text">Action Button</span>
    <i class="sap-icon--slim-arrow-down"></i>
</button>

<button aria-label="Add to cart" class="fd-button fd-button--menu">
    <i class="sap-icon--cart"></i><i class="sap-icon--slim-arrow-down"></i>
</button>

Before:

<div class="fd-panel__expand">
  <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="false" aria-haspopup="true" aria-controls="fghqwe321" ></button>
</div>

After:

<div class="fd-panel__expand">
  <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="false" aria-haspopup="true" aria-controls="fghqwe321" >
    <i class="sap-icon--slim-arrow-right"></i>
  </button>
</div>

• Removed classes: fd-tree--header, fd-tree__row, fd-tree__row--header, fd-tree__col, fd-tree__col--control, fd-tree__control, fd-tree__col--actions, fd-tree__group, fd-tree__group--sublevel-*

• Removed fd-info-label--only-icon class. The existing fd-info-label--icon class can be used in both cases: Icon+Text and Icon Only

Old Markup:

<span class="fd-info-label fd-info-label--accent-color-2 fd-info-label--only-icon sap-icon--upload-to-cloud"></span>

New Markup:

<span class="fd-info-label fd-info-label--accent-color-2 fd-info-label--icon sap-icon--upload-to-cloud"></span>

• Introduced new .fd-checkbox__text class, which should be used inside .fd-checkbx__label to wrap label content.

Old Markup:

<input type="checkbox" class="fd-checkbox">
<label class="fd-checkbox__label">
    Apple
</label>

New Markup:

<input type="checkbox" class="fd-checkbox">
<label class="fd-checkbox__label">
    <span class="fd-checkbox__text">Apple</span>
</label>

• Removed classes: fd-app, fd-ui, fd-ui--fixed, fd-ui__header, fd-ui__footer, fd-ui__app, fd-ui__main, fd-ui__overlay, fd-has-background-image, fd-has-background-fixed, fd-has-background-size-contain, fd-has-background-size-cover, fd-has-background-color-transparent, fd-has-background-color-none, fd-has-background-color-*, fd-has-border-radius-*, fd-has-border-*, fd-has-border-color-*, fd-has-box-shadow-none, fd-has-color-*, fd-display*, fd-has-text-transform-*, fd-has-font-weight-*, fd-has-font-style-*, fd-has-text-align-*, fd-has-float-*, fd-has-height-*, fd-has-margin-*, fd-has-padding-*, fd-has-type-*, fd-has-font-*, sap-icon--s, sap-icon--small, sap-icon--m, sap-icon--medium, sap-icon--l, sap-icon--large, sap-icon--xl, sap-icon--xlarge, sap-icon--animate-spin, sap-icon--animate-pulse, fd-nav+(--vertical), fd-nav__item, .fd-nav__link, fd-product-tile, fd-product-tile__media, fd-product-tile__title, fd-product-tile__text
• Removed variables: --fd-color-*, --fd-background-color*, --fd-forms-*, --fd-padding*, --fd-width-*, --fd-section-*

• removed classes fd-asset-upload, fd-asset-upload__label, fd-asset-upload__text, fd-asset-upload__message, fd-asset-upload__input, fd-asset-upload__label, fd-asset-upload__text, fd-asset-upload--no-icon

• removed classes fd-shellbar__product-menu, .fd-product-menu, fd-product-menu__control

• renamed class fd-bar--cosy to fd-bar--cozy

• removed classes fd-overlay, fd-overlay--alert, and fd-overlay--message-strip

• removed aria-hidden="true" from the calendar icon button
• added aria-label="button" from the calendar icon button
• replaced tag header with div and footer with div

• Removed classes: fd-tree--header, fd-tree__row, fd-tree__row--header, fd-tree__col, fd-tree__col--control, fd-tree__control, fd-tree__col--actions, fd-tree__group, fd-tree__group--sublevel-*

• removed class fd-form-input-message-group from the div with class fd-popover

• removed aria-selected for the selected page
• added class is-selected

Changes to <ul class='fd-list'>:

1. added aria-labeledby to fd-list ul connect to id on fd-form-label, see https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
2. moved validation messages div fd-list__message outside of fd-list ul - span cannot be a descendent of ul
3. added tabIndex=“-1” to fd-list ul`: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Changes to disabled state:

1. removed “disabled” attribute from fd-popover__control as this is a div and cannot have a disabled attribute
2. removed disabled attribute in favor of aria-disabled=“true”: When the action associated with a button is unavailable, the button has aria-disabled set to true. https://www.w3.org/TR/wai-aria-practices/#wai-aria-roles-states-and-properties-3

Changes to read-only state:

1. aria-readonly is not allowed on role=“button”, replaced with “is-readonly” class or readonly attribute https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/#aria-readonly

Note: There will be additional breaking changes for the underlying html of the read-only state.

1. Menu button now uses fd-shellbar__button--user-menu class instead of fd-user-menu__control and element should be <button> not <div>

1. Removed Classes:

• Elements:
• fd-table__sort-column(--asc/--desc)
• fd-table__context-menu
• fd-table__context-menu-label
• Modifiers:
• fd-table__row(--success/--error/--warning/--information)

fd-has-background-color-accent-* classes have been removed from Avatar markup

Before:

<span class="fd-avatar fd-avatar--m sap-icon--money-bills fd-has-background-color-accent-1" role="presentation"></span>

After:

<span class="fd-avatar fd-avatar--accent-color-1 fd-avatar--m sap-icon--money-bills" role="presentation"></span>

• add fd-popover__wrapper to the markup of combobox, multi-input and breadcrumb's popover

• List Group has been removed. Its successor is List #983

• Badge, Label, Status Indicator have been removed. Their successors are Info Label and Object Status #989

Renaming of the classes:
.fd-panel => .fd-layout-panel
.fd-panel__header => .fd-layout-panel__header
.fd-panel__title => .fd-layout-panel__title
.fd-panel__actions => .fd-layout-panel__actions
.fd-panel__footer => .fd-layout-panel__footer

• Introduced new component Step Input, which is using fd-input and fd-button classes.

• Product Tile has been removed.
• Removed classes: fd-tile__media, fd-tile__text, fd-tile__actions, fd-product-tile, fd-product-tile__media, fd-product-tile__content, fd-product-tile__title and fd-product-tile__text *fd-tile__title is not a child of fd-tile__content #990

• Search Input has been removed from "Patterns"
• fd-search-input and associated classes are no longer supported

• Menu bu default has box shadow. Use fd-menu__list--no-shadow or fd-menu__sublist--no-shadow to use menu without box-shadow. Components that require removal of default box shadow:
  • ActionBar
  • Button - menu
  • LocalizationEditor
  • Popover
  • Shellbar
  • Table
  • Tile
  • Tree
  • ContextualMenu
  • MultiInput
  • SearchInput

• The markup for ... has changed and it doesn't require to have the class fd-pagination__link
• the class fd-pagination__link--more has been renamed to fd-pagination__more

• Completely New Markup for time component
• New compact/tablet modes

• <p class="fd-action-bar__description--with-backBtn"> changed to <p class="fd-action-bar__description fd-action-bar__description--back">

• Use new fd-calendar__content--screen-reader-only to denote screen reader-only content. Consumers should note the updated reference HTML to provide additional instructions when adding keyboard navigation.

• Removed fonts (include icon font) from the distribution package. New instructions posted for consumers to include fonts: https://fundamental-styles.netlify.com/getting-started.html#project-configuration
• @sap-theming/theming-base-content moved from dependency to peerDependency. Consuming libraries need to include this npm package in their own project.

• is-invalid renamed to is-error
• is-vaild renamed to is-success
• fd-table__row--valid renamed to fd-table__row--success

• Removed Modal component from Fundamental Styles
• Introduce Dialog as successor of Modal. Dialog supports Fiori3 specification.
• Remove Overlay component support for Modal component. Dialog has its own integrated overlay.

• fd-button-group renamed to fd-segmented-button
• fd-button--light renamed to fd-button--transparent
• According to BEM methodology, button must start with fd-button class <button class="fd-button fd-button--positive fd-button--compact">Button</button>
• Variable$fd-animation--speed renamed to $fd-animation-speed

• Message Strip component is introduces as Alert component successor
• Message Strip component support same features as Alert component

• Alert is deprecated and replaced by Message Strip component
• Alert is temporarily supported and is going to be completely removed with next release

• Combobox now uses fd-list--dropdown class for list wrapper

• Multi Input now uses fd-list--dropdown class for list wrapper
• fd-list__input, fd-list__label and fd-list__title should be used to build multi-input component.

• Select Input now uses fd-list--dropdown class for list wrapper
• Select got new class fd-select__button. Before it was pseudo element, but we should get rid of pseudo elements unnecessary usage.

• Shellbar buttons must have new class fd-shellbar__button
• User menu control div must have classes fd-button fd-shellbar__button fd-user-menu__control
• User menu popover body must have classes fd-popover__body--no-arrow fd-popover__body--right
• Product menu control button must have classes fd-button--light fd-button--menu fd-shellbar__button--menu and no longer has class fd-product-menu__control
• Product menu popover body must have class fd-popover__body--no-arrow" and no longer has class fd-popover__body--right
• Shellbar search input no longer has <div class="fd-search-input">
• Shellbar search input group div must have new class fd-shellbar__input-group
• Shellbar search input group input must have new class fd-shellbar__input-group__input
• Shellbar search input group addon must have new class fd-shellbar__input-group__addon
• Shellbar search input group button must have new class fd-shellbar__button
• Shellbar action button counter notifications must have new class fd-shellbar__counter--notification

• Removed class fd-page__header. Bar component is now used for Page/Container header.

• Removed class fd-popover__body-header--with-subheader. For both cases (header with or without subheader use fd-popover__body-header). The Bar element is handling the case when Header is followed by a Subheader.
• Removed class fd-popover__body-subheader.
• Removed all --compact modifier classes: fd-popover__body-header--compact, fd-popover__body-subheader--compact, fd-popover__body-footer--compact.

• Removed fd-switch--no-text modifier class. A switch with no labels on sides is achieved with no modifier class.

• New overflow popover usage

• fd-toggle became fd-switch
• Completely new structure of toggle in every mode. Added classes:
• fd-switch__text - To put some text (max 3 chars) inside toggle. fd-switch__wrapper, fd-switch__track, fd-switch__handle.
• Removed size classes (--xs, --s, --m, --l, --xl)

• No more disabled state for tabs (if it's disabled, it shouldn't be visible)
• Compact mode is added to tabs fd-tabs--compact
• Semantic mode added to tabs fd-tabs__item-- + success / warning / information / error / neutral
• Filter / Process / Icon Only modes added to tabs.
• Completely new structure of fd-tab component

• Right now the close icon is not pseudo element. It is used as a normal button with class fd-token__close

    <button class="fd-token__close"></button>

• The text should be wrapped in element with fd-token__text class.

• fd-alert__close button now requires to be used along with standard fd-button, fd-button--light and fd-button--compact classes. Previous:

<button class="fd-alert__close"></button>

Now:

<button class="fd-button fd-button--light fd-button--compact fd-alert__close"></button>

• There is completely new busy-indicator
• example:

<div class="fd-busy-indicator--l" aria-hidden="false" aria-label="Loading">
    <div class="fd-busy-indicator--circle-0"></div>
    <div class="fd-busy-indicator--circle-1"></div>
    <div class="fd-busy-indicator--circle-2"></div>
</div>

• To mark field required, it's needed to put fd-form-label--required class to fd-form-label
• There are 4 new states, which can be added to form elements (is-invalid, is-valid, is-information, is-warning
• There is new class fd-form-item--horizontal, that allows to put label and input element in same line.
• Added fd-form-label--inline-help for forms item with inline help.
• Messages can have own states also like above. To add state it's needed to pass class name with modifier ex. fd-form-message--information
• #472 Messages should be used with fd-popover. The message is not supposed to be all the time visible. Example: Before:

<div class="fd-form-item">
    <label class="fd-form-label" for="input-2">
        Valid Input:
    </label>
    <input class="fd-input is-valid" type="text" id="input-2">
    <span class="fd-form-message fd-form-message--success">Success message</span>
</div>

Now:

<div class="fd-form-item fd-has-margin-none fd-popover">
    <label class="fd-form-label" for="input-1">Valid input:</label>
    <div class="fd-form-input-message-group">
        <input class="fd-input is-valid fd-popover__control" type="text" id="input-1" placeholder="Field placeholder text" aria-label="Image label" aria-controls="popoverB2" aria-expanded="false" aria-haspopup="true">
        <span class="fd-popover__body fd-popover__body--no-arrow fd-form-message fd-form-message--success" aria-hidden="true" id="popoverB2">Success message</span>
    </div>
</div>

• button elements inside InputGroup components need fd-input-group__button class added

• There is way to add state to input group element, by adding class (is-invalid, is-valid, is-information, is-warning)
• Disabled mode can be achieved by adding is-disabled, to input-group component.
• #489 - compact mode (old) fd-input-group--compact now should be added to input and addons

• Now it requires to add fd-form-label--toggle to label, containing fd-toggle

• <div class="fd-menu__addon-before"></div> above <a class="fd-menu-item"> for icons, replaced with <span class="fd-menu__addon-before"></span> inside of <a class="fd-menu-item">

• rename component to ProductSwitch
• outer div: fd-product-switcher -> fd-product-switch
• popover control button:
  • fd-shellbar__button -> fd-product-switch__control
  • add aria-label (already should have aria-controls, aria-haspopup="true", aria-expanded)
• div inside popover: fd-product-switcher__body -> fd-product-switch__body
• nav removed
• ul: fd-product-switcher__body--list -> fd-product-switch__list
• li: fd-product-switcher__body--list-item -> fd-prduct-switch__item (this is where selected is added
• div inside li:
  • if icon, span fd-product-switcher__product-icon -> div fd-product-switch__icon
  • if text, fd-product-switch__text
• div inside div inside li:
  • title: span fd-product-switcher__product-title -> div fd-product-switch__title
  • subtitle: did not exist -> fd-product-switch__subtitle

• Converts the month and year selection from a ul to a table with role="grid"

<table class="fd-calendar__table" role="grid">
    <tbody class="fd-calendar__group">
	<tr class="fd-calendar__row">
	    <td class="fd-calendar__item fd-calendar__item--current">
		<span class="fd-calendar__text" role="button">Jan.</span>
	...

• Adds role="button" to each selectable calendar item
• Adds aria-selected attribute to the currently-selected calendar item.
• removed fd-calendar__list

• Right now the pseudo element (:before) is created for label element (fd-checkbox__label / fd-radio__label)
• The structure of these components are completely different Before

<label class="fd-form-label fd-form-label--radio" for="pDidh761">
    <input type="radio" class="fd-radio" id="pDidh761" name="radio">Field label
</label>

Now:

<input type="radio" class="fd-radio" id="pDidh761" name="radio">
<label class="fd-radio__label" for="pDidh761">
    Field label
</label>

• add tabIndex="0" to <li class="fd-product-switch__item"

• src directory is now the ONLY published folder and will contain compiled ie11 compatible css for each component. We are not publishing scss directory. Although, fonts, icons and images will be copied into dist folder until another solution is created.

• do not rely on aria selectors for style changes. Use is-disabled, is-hidden, etc.
• we are no longer using element selectors, if you want style on an element, it must have a fundamental-styles class name.
• no longer supporting selecting inputs by type - must use class name.