Skip to content

Commit

Permalink
feat(badge): badge support aria
Browse files Browse the repository at this point in the history
  • Loading branch information
yaogengzhu committed Dec 8, 2022
1 parent 7d7433f commit 7f08bcd
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 3 deletions.
14 changes: 11 additions & 3 deletions src/badge/badge.wxml
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
<wxs src="./badge.wxs" module="this" />

<view style="{{ customStyle }}" class="{{this.getBadgeOuterClass({shape})}} {{prefix}}-class">
<view class="{{classPrefix}}__content {{prefix}}-class-content">
<view
style="{{ customStyle }}"
class="{{this.getBadgeOuterClass({shape})}} {{prefix}}-class"
aria-labelledby="labelledby"
aria-describedby="describedby"
aria-role="{{ ariaRole || 'option'}}"
>
<view id="labelledby" class="{{classPrefix}}__content {{prefix}}-class-content">
<slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
<text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
</view>
<view
aria-label="{{ this.getBadgeAriaLabel({dot, count, maxCount}) }}"
id="describedby"
wx:if="{{count !== 'slot' && this.isShowBadge({dot,count,showZero})}}"
class="{{this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
style="{{this.getBadgeStyles({color, offset})}}"
>{{ this.getBadgeValue({dot, count, maxCount}) }}
</view>
<slot name="count" wx:if="{{count === 'slot' || !count}}" />
<slot id="describedby" name="count" wx:if="{{count === 'slot' || !count}}" />
</view>
14 changes: 14 additions & 0 deletions src/badge/badge.wxs
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,22 @@ var isShowBadge = function (props) {
return true;
};

var getBadgeAriaLabel = function (props) {
if (props.dot) {
return '有新的消息';
}
if (isNaN(props.count) || isNaN(props.maxCount)) {
var str = '有' + props.count + '通知';
return str;
}
var str1 = '有' + props.maxCount + '+个消息';
var str2 = '有' + props.count + '个消息';
return parseInt(props.count) > props.maxCount ? str1 : str2;
};

module.exports.getBadgeValue = getBadgeValue;
module.exports.getBadgeStyles = getBadgeStyles;
module.exports.getBadgeOuterClass = getBadgeOuterClass;
module.exports.getBadgeInnerClass = getBadgeInnerClass;
module.exports.getBadgeAriaLabel = getBadgeAriaLabel;
module.exports.isShowBadge = isShowBadge;

0 comments on commit 7f08bcd

Please sign in to comment.