@ithaka/pharos@14.2.1

Patch Changes

• #739 f026ecb Thanks @brentswisher! - Add individual components to export list

@ithaka/pharos@14.2.0

Minor Changes

• #733 20a8596 Thanks @michael-iden! - Emit pharos-coach-mark-closed event when coach mark is dismissed

Patch Changes

• #726 72e9476 Thanks @sirrah-tam! - Fix empty table column header cell and add test

@ithaka/pharos@14.1.0

Minor Changes

• #695 b864531 Thanks @jialin-he! - Create table component

Patch Changes

• #720 06d29c4 Thanks @michael-iden! - Re-add change to toast dismissal from PR #475 that was dropped in a tricky merge resolution

@ithaka/pharos@14.0.1

Patch Changes

• #714 ca0396a Thanks @daneah! - Ensure jsdom patch is exported for consumers to use during testing

@ithaka/pharos-site@6.0.1

Patch Changes

• #703 7905475 Thanks @daneah! - Fix component properties for Pharos v14

• Updated dependencies [ca0396a]:

  • @ithaka/pharos@14.0.1

@ithaka/pharos@14.0.0

Release Notes

Accessibility updates

A large focus on v14 was updating our components to be more accessible by default and provide helpful guardrails to prevent them from being used in inaccessible ways. This results in several new attributes in the format a11y-* which can be used to set the appropriate aria attributes within the component structure.

By specifying these new a11y attributes at the component level, the correct elements within the component will get the appropriate aria attribute to make it accessible. An example of this can be seen in the <pharos-icon> component. By adding an a11y-title attribute to the icon component, the <title> element within the rendered <svg> will be correctly populated.

Below is a list of the new attributes to make migration easier. You will also see that some elements now have guards for accessibility, and will throw errors if they are used in an inaccessible state. An example of this would be that a <pharos-icon> now must either be provided a label or be explicitly marked as decorative to render without throwing an error.

New pharos-button Attributes

• a11y-label: Gives explicit an accessible name with an aria-label attribute
• a11y-expanded - Conveys associated content’s state with aria-expanded
• a11y-pressed: Conveys the current pressed state with aria-pressed
• a11y-haspopup: Indicate an association with another widget via aria-haspopup
• a11y-disabled: Conveys the disabled state via aria-disabled while keeping it in the focus order

New pharos-link Attributes

• a11y-label: Gives an explicit accessible name via aria-label (overriding the content of the link)

New pharos-icon Attributes

• a11y-title : Used to give the SVG an accessible name via a nested title element
• a11y-hidden: Used to mark the icon as decorative to screen readers
• New requirement that all icons have a title or are explicitly hidden using the new attribute
• Updated with support for Windows High Contrast Mode

New is-on-background attribute

The on-background attribute was globally replaced with is-on-background to get around conflicts when using Pharos with Vue v3 or greater.

New Elevation Tokens

New design tokens for elevation have been added, standardizing component elevation across the design system.

Updated Pharos Tabs state management 

A new attribute of pharos-tabs will manage the selected tab. On initial render, the selected-tab attribute of pharos-tabs will be used (which defaults to 0) to set the correct pharos-tab as selected. When a pharos-tab is clicked it dispatches an event and lets the parent manage its state. When a pharos-tab is clicked and it is already selected it does not dispatch an event to the parent.

Pharos Tabs overflow setting removed

The overflow-y value has been removed from the panel of the tab component. This caused issues in some implementations when the child nodes of the panel were being confined. This will allow some flexibility and will let the consumer choose how/if to apply overflow.

Sidenav component restructures

The pharos-sidenav component was updated to remove the default responsive behavior and the built-in close button that appeared on mobile screens. This was replaced with the open and has-close-button attributes which can be customized for a wider range of use cases. An example of the previous behavior implemented with this new structure can be seen in the “Reports” storybook example.

Google Translate widget

The Google translate widget has been removed from the footer as it was deprecated by Google.

Major Changes

• #475 b9eedf6 Thanks @daneah! - Update Toaster to use internally consistent component scoping

• #657 e89bcaf Thanks @daneah! - Use is-on-background in place of on-background

• #614 d026826 Thanks @daneah! - Remove paint value of contain property globally

• #478 ace35cf Thanks @chrisjbrown! - remove sidenav button, add consumer controls

• #676 536a598 Thanks @sirrah-tam! - Update all use of label attribute to a11y-label

• #594 f8342cc Thanks @sirrah-tam! - Add additional ARIA attributes for Pharos button
  and use a new naming convention for these specific
  pharos attributes.

• #468 1913341 Thanks @chrisjbrown! - pharos-tab selected has been deprecated, see new property for pharos-tabs selected-tab

• #472 eaa514f Thanks @chrisjbrown! - individual file exports are no longer supported, import files based on the exports defined in the package.json

• #586 eb228d5 Thanks @daneah! - Remove deprecated Google Translate widget

• #699 38322bc Thanks @brentswisher! - Require an a11y-label for icon buttons

• #690 fda9018 Thanks @ymouzakis! - Remove overflow-y from pharos-tabs tab panels

Minor Changes

• #681 67684b7 Thanks @brentswisher! - Add elevation style to modal component

• #683 551c5e9 Thanks @brentswisher! - Add default elevation and remove border from combobox component

• #689 99879a1 Thanks @sirrah-tam! - Added media query for icons to appear on Windows High Contrast Mode

• #682 3992876 Thanks @brentswisher! - Update popover component elevation to use design token

• #684 c2a2248 Thanks @brentswisher! - Add default elevation and remove border from dropdown-menu

Patch Changes

• #691 8ca6aeb Thanks @sirrah-tam! - Add ability to use a11y-disabled and maintain default disabled styling

• #671 145da90 Thanks @brentswisher! - Remove deprecated onBackground attribute from sidenav storybook story

• #696 df71253 Thanks @brentswisher! - Update storybook stories to work with new sidenav display logic

• #578 52006f3 Thanks @mtorres3! - Update onBackground prop to isOnBackground

• #677 8f8c2bb Thanks @brentswisher! - Updates the Link to use a11yLabel values within Storybook

• #679 a1ade7a Thanks @brentswisher! - Require all icons to have a label or be explicitly hidden

@ithaka/pharos-site@6.0.0

Major Changes

• #657 e89bcaf Thanks @daneah! - Use is-on-background in place of on-background

• #472 eaa514f Thanks @chrisjbrown! - individual file exports are no longer supported, import files based on the exports defined in the package.json

• #586 eb228d5 Thanks @daneah! - Remove deprecated Google Translate widget

Patch Changes

• #578 52006f3 Thanks @mtorres3! - Update onBackground prop to isOnBackground

• Updated dependencies [a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, 99879a1, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68, a2eca68]:

  • @ithaka/pharos@14.0.0

@ithaka/pharos-cli@5.5.1

Patch Changes

• #578 52006f3 Thanks @mtorres3! - Update onBackground prop to isOnBackground

@ithaka/pharos@13.4.0

Minor Changes

• #678 2e83906 Thanks @mariadevadoss! - add icon add to folder

• #675 88c580a Thanks @sirrah-tam! - Updating the use of a11y-label to replace label when needing to use aria-label

Patch Changes

• #670 5b8510e Thanks @mtorres3! - Hotfix/dropdown-menu-nav: Add pharos-elevation-level-3 token to dropdown-menu-nav

@ithaka/pharos@13.3.0

Minor Changes

• #646 05eca95 Thanks @brentswisher! - Add a11y-title and a11y-hidden properties to pharos-icon and deprecate description

• #628 9ef1e18 Thanks @sirrah-tam! - Update PharosButton to use a11y naming convention and include wider ARIA support

• #643 9cf3860 Thanks @nkamau! - Add elevation tokens and docs

Patch Changes

• #644 55c263f Thanks @daneah! - Upgrade to TypeScript 5

• #645 1875aaa Thanks @brentswisher! - Update external sidenav links to open in a new tab

• #660 0bea422 Thanks @brentswisher! - Update all icons to use a11y-hidden and a11y-title syntax over description

• #666 79229b2 Thanks @brentswisher! - Update internal button usage to use a11y-pressed and a11y-label attributes

• #652 3ad3fd6 Thanks @sirrah-tam! - Update radio/checkbox group labelling to include aria-describedby and remove aria-labelledby