Releases: ithaka/pharos
@ithaka/[email protected]
@ithaka/[email protected]
Patch Changes
-
#703
7905475Thanks @daneah! - Fix component properties for Pharos v14 -
Updated dependencies [
ca0396a]:- @ithaka/[email protected]
@ithaka/[email protected]
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-labelattribute - 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-disabledwhile 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
b9eedf6Thanks @daneah! - Update Toaster to use internally consistent component scoping -
#657
e89bcafThanks @daneah! - Use is-on-background in place of on-background -
#614
d026826Thanks @daneah! - Removepaintvalue of contain property globally -
#478
ace35cfThanks @chrisjbrown! - remove sidenav button, add consumer controls -
#676
536a598Thanks @sirrah-tam! - Update all use of label attribute to a11y-label -
#594
f8342ccThanks @sirrah-tam! - Add additional ARIA attributes for Pharos button
and use a new naming convention for these specific
pharos attributes. -
#468
1913341Thanks @chrisjbrown! - pharos-tabselectedhas been deprecated, see new property for pharos-tabsselected-tab -
#472
eaa514fThanks @chrisjbrown! - individual file exports are no longer supported, import files based on the exports defined in the package.json -
#586
eb228d5Thanks @daneah! - Remove deprecated Google Translate widget -
#699
38322bcThanks @brentswisher! - Require an a11y-label for icon buttons -
#690
fda9018Thanks @ymouzakis! - Remove overflow-y from pharos-tabs tab panels
Minor Changes
-
#681
67684b7Thanks @brentswisher! - Add elevation style to modal component -
#683
551c5e9Thanks @brentswisher! - Add default elevation and remove border from combobox component -
#689
99879a1Thanks @sirrah-tam! - Added media query for icons to appear on Windows High Contrast Mode -
#682
3992876Thanks @brentswisher! - Update popover component elevation to use design token -
#684
c2a2248Thanks @brentswisher! - Add default elevation and remove border from dropdown-menu
Patch Changes
-
#691
8ca6aebThanks @sirrah-tam! - Add ability to use a11y-disabled and maintain default disabled styling -
#671
145da90Thanks @brentswisher! - Remove deprecated onBackground attribute from sidenav storybook story -
#696
df71253Thanks @brentswisher! - Update storybook stories to work with new sidenav display logic -
#578
52006f3Thanks @mtorres3! - Update onBackground prop to isOnBackground -
#677
8f8c2bbThanks @brentswisher! - Updates the Link to use a11yLabel values within Storybook -
#679
a1ade7aThanks @brentswisher! - Require all icons to have a label or be explicitly hidden
@ithaka/[email protected]
Major Changes
-
#657
e89bcafThanks @daneah! - Use is-on-background in place of on-background -
#472
eaa514fThanks @chrisjbrown! - individual file exports are no longer supported, import files based on the exports defined in the package.json -
#586
eb228d5Thanks @daneah! - Remove deprecated Google Translate widget
Patch Changes
-
#578
52006f3Thanks @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/[email protected]
@ithaka/[email protected]
@ithaka/[email protected]
Minor Changes
-
#678
2e83906Thanks @mariadevadoss! - add icon add to folder -
#675
88c580aThanks @sirrah-tam! - Updating the use of a11y-label to replace label when needing to use aria-label
Patch Changes
@ithaka/[email protected]
Minor Changes
-
#646
05eca95Thanks @brentswisher! - Add a11y-title and a11y-hidden properties to pharos-icon and deprecate description -
#628
9ef1e18Thanks @sirrah-tam! - Update PharosButton to use a11y naming convention and include wider ARIA support -
#643
9cf3860Thanks @nkamau! - Add elevation tokens and docs
Patch Changes
-
#645
1875aaaThanks @brentswisher! - Update external sidenav links to open in a new tab -
#660
0bea422Thanks @brentswisher! - Update all icons to use a11y-hidden and a11y-title syntax over description -
#666
79229b2Thanks @brentswisher! - Update internal button usage to use a11y-pressed and a11y-label attributes -
#652
3ad3fd6Thanks @sirrah-tam! - Update radio/checkbox group labelling to include aria-describedby and remove aria-labelledby
@ithaka/[email protected]
Minor Changes
Patch Changes
-
#660
0bea422Thanks @brentswisher! - Update all icons to use a11y-hidden and a11y-title syntax over description -
#666
79229b2Thanks @brentswisher! - Update internal button usage to use a11y-pressed and a11y-label attributes -
Updated dependencies [
55c263f,05eca95,9ef1e18,1875aaa,9cf3860,0bea422,79229b2,3ad3fd6]:- @ithaka/[email protected]
@ithaka/[email protected]
@ithaka/[email protected]
Patch Changes
- #638
29fdb15Thanks @henryclong! - Fix positioning of coach mark react component